簡(jiǎn)介

使用Heroku的免費(fèi)云服務(wù)來(lái)部署Express服務(wù)器，數(shù)據(jù)庫(kù)使用的是MongoDB云數(shù)據(jù)庫(kù)。由于國(guó)內(nèi)訪(fǎng)問(wèn)這兩個(gè)網(wǎng)站的速度可能較慢，所以最好備有梯子。

一、前后端結(jié)合

1、Vue項(xiàng)目打包

使用npm run build來(lái)打包我們已經(jīng)寫(xiě)好的Vue項(xiàng)目。將打包完成后的dist文件夾復(fù)制到Express項(xiàng)目中。

注意:由于后端的端口會(huì)發(fā)生改變，所以api地址也會(huì)發(fā)生改變。所以前端的api請(qǐng)求地址也要做出相應(yīng)的修改，不然部署后將無(wú)法請(qǐng)求到數(shù)據(jù)。

由于不知道端口將會(huì)變成多少，我的方法是將api地址的前段設(shè)置為部署后的網(wǎng)址，即https://yourHerokuAppName.herokuapp.com/api

2、Express后端設(shè)置

(1)設(shè)置服務(wù)器端口號(hào)

由于Heroku的端口號(hào)是自行配置的，所以我們要將服務(wù)器端口號(hào)設(shè)置為；

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

(2)設(shè)置靜態(tài)文件路徑

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)創(chuàng)建Procfile文件

在項(xiàng)目的根目錄中新建名為Procfile的文件，并寫(xiě)入

web: node index.js

Procfile 文件用來(lái)聲明應(yīng)用如何在服務(wù)器中運(yùn)行，這里通過(guò) node index.js 執(zhí)行 Node 腳本。其中，index.js為服務(wù)器的起始文件。

3、文件上傳Github

將前后端結(jié)合好后的文件上傳到github倉(cāng)庫(kù)中。

二、部署到Heroku

首先注冊(cè)一個(gè)Heroku賬號(hào)(163,yeah,qq郵箱被禁用)；注冊(cè)完成后登錄Heroku并創(chuàng)建一個(gè)app；由于連接Heroku的網(wǎng)速較慢，所以使用Github的部署方式，在Github授權(quán)之后，選擇要部署的文件倉(cāng)庫(kù)及分支；最后點(diǎn)擊部署按鈕，等待部署完成后就可以查看網(wǎng)站了。

部署參考文章：三步將Node應(yīng)用部署到Heroku上