使用Heroku部署网站
徐徐 抱歉选手

本来想在Netlify上部署网站的,结果无论如何都没办法重定向到github,并且总是网页无法打开,就转用heroku了。

Vue-CLI项目部署

参考链接

VueCLI官方给出的部署教程

BinarCode上的部署教程

Heroku官方基于Heroku CLI的Node.js应用部署文档

StackOverflow上比较好的回答1

StackOverflow上比较好的回答2

部署操作

需要在heroku上创建账号,创建app。在进入app后有一排工具栏,可以查看对应的信息。

image-20210104130207252

Deploy一栏是初次部署的时候显示的页面,在这里关联github的特定项目。

Activity一栏可以查看build log,如果部署不成功需要去查找错误。

Settings一栏可以配置环境变量。在vue3-demo3中用到了.env配置环境变量,需要在部署的时候添加到heroku去。

如果部署中出现报错npm ERR! missing script: start,意思是在package.json中没有找到start相关的script,因为vue-cli默认只有serve/build/lint。这时需要自定义start脚本的内容。

这里涉及一些npm脚本的知识。掘金上关于npm的知识点汇总

npm脚本常用的几个缩写分别是:

  • npm start short for npm run start

  • npm test short for npm run test

  • npm stop short for npm run stop

如下,当执行npm run start指令的时候,实际上执行的就是start在scripts中的脚本 node server.js。

第一个指令缩写可以解释为什么create-react-app中运行指令是npm start了。

在脚手架的package.json文件中添加"start": "node server.js",指令,如下:

image-20210104131030319

这个指令的意思是在node环境下执行server.js文件。server.js文件是需要在当前应用文件夹的最顶层,和package.json处于同一级的自建文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// server.js
const express = require("express");
const history = require("connect-history-api-fallback");
const serveStatic = require("serve-static");
const enforce = require("express-sslify");
// require()中涉及的字符串都是需要预先安装的npm包

const app = express();//该app使用express

app.use(enforce.HTTPS({ trustProtoHeader: true })); // 要求使用http链接
app.use(serveStatic(__dirname + "/dist"));
// 要求部署的最终代码都放在heroku生成的__dirname下的dist文件夹中
app.use(history());
app.listen(process.env.PORT || 5000);
  • 本文标题:使用Heroku部署网站
  • 本文作者:徐徐
  • 创建时间:2021-01-04 12:44:39
  • 本文链接:https://machacroissant.github.io/2021/01/04/heroku-app-deploy/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论