Vue+Node.js部署到Heroku

简介

使用Heroku的免费云服务来部署Express服务器，数据库使用的是MongoDB云数据库。由于国内访问这两个网站的速度可能较慢，所以最好备有梯子。

一、前后端结合

1、Vue项目打包

使用npm run build来打包我们已经写好的Vue项目。将打包完成后的dist文件夹复制到Express项目中。

注意:由于后端的端口会发生改变，所以api地址也会发生改变。所以前端的api请求地址也要做出相应的修改，不然部署后将无法请求到数据。

由于不知道端口将会变成多少，我的方法是将api地址的前段设置为部署后的网址，即https://yourHerokuAppName.herokuapp.com/api

2、Express后端设置

(1)设置服务器端口号

由于Heroku的端口号是自行配置的，所以我们要将服务器端口号设置为；

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`http://localhost:${port}`);
});

(2)设置静态文件路径

var fs = require('fs');
var path = require('path');
app.use(express.static(path.resolve(__dirname, './dist')));

(3)将路由指向index.html

app.get('*', function(req, res) {
  res.sendFile(path.resolve(__dirname, './dist/index.html'));
});

(4)创建Procfile文件

在项目的根目录中新建名为Procfile的文件，并写入

web: node index.js

Procfile 文件用来声明应用如何在服务器中运行，这里通过 node index.js 执行 Node 脚本。其中，index.js为服务器的起始文件。

3、文件上传Github

将前后端结合好后的文件上传到github仓库中。

二、部署到Heroku

首先注册一个Heroku账号(163,yeah,qq邮箱被禁用)；注册完成后登录Heroku并创建一个app；由于连接Heroku的网速较慢，所以使用Github的部署方式，在Github授权之后，选择要部署的文件仓库及分支；最后点击部署按钮，等待部署完成后就可以查看网站了。

部署参考文章：三步将Node应用部署到Heroku上