【超詳細！】vue+koa+nginx先後端分離開發項目上線部署到雲服務器

最近被vue+koa項目搞瘋了，好多坑！！！先將部署的步驟詳細介紹一下吧，以後再總結一篇閉坑指南~忙完這段時間會將項目作成視頻課程。

一、項目介紹

本項目是vue+koa先後端分離開發的手機商城項目，先貼一下項目的目錄，咱們主要就是要部署dist和server這兩個文件夾

二、部署前文件的處理

（1）修改config/index.js文件

將build裏面的assetsPublicPath路徑改爲./，否則生成的dist文件加載不到js、css、img等靜態文件

build: {
    //須要修改的地方
    assetsPublicPath: './',

（2）修改請求後端的url

在本地進行項目開發，後端的url通常都用http://localhost:3000。部署上線後就須要將這個url換成真正的域名了，我是統必定義在src/config.js文件裏面
後面跟的端口要跟後端server/app.js裏面的監聽端口app.listen(3000)一致

//須要修改的部分
const host = 'http://yourdomain.com:3000'

const config = {
  host
}

export default config

（3）在項目文件夾下面運行npm run build，生成dist文件夾

~/xbapp$ npm run build

生成的dist文件夾目錄，咱們在本地打開dist/index.html文件，測試一下樣式是否能正常顯示

（4）修改數據庫信息

後端有操做數據庫的話，也須要更改數據庫名、數據庫密碼等信息

三、將項目上傳到雲服務器

用git或者scp上傳均可以，我上傳到了/mnt/xbapp目錄下面
git上傳有個須要注意的地方，項目根目錄下面的.gitigonre文件可能會將dist文件夾忽略上傳，咱們須要在.gitigonre文件中刪掉dist/

.DS_Store
dist/     //須要刪掉
npm-debug.log*
yarn-debug.log*
yarn-error.log*

git程序員都會，就不展開講了，以前寫過git部署項目的文章，你們能夠借鑑一下
項目上線--git部署項目

---

下面咱們就開始在雲服務器上操做了

---

四、koa配置並測試

（1）安裝koa插件

koa須要node環境的支持，雲服務器若是沒有node環境須要先安裝node
node環境安裝參考文章

接下來咱們開始安裝koa插件

#打開server文件夾
cd /mnt/xbapp/server

#刪掉node_modules文件夾和package-lock.json文件
rm -r node_modules
rm package-lock.json

#安裝插件
npm install

#開啓項目
npm run dev

npm install的時候，可能會報錯，好比let notifier = require('update-notifier')({pkg})這個錯誤，大部分的錯誤是由於node版本太低引發的，能夠更新一下node版本，參考文章：linux環境升級node版本

（2）測試

成功運行npm run dev以後，不表明koa已經配置成功了，在瀏覽器上面輸入域名+koa開啓的端口，順利返回koa2就說明後端已經部署OK了

（3）可能遇到的錯誤

固然啦，在順利見到上面的效果以前，可能會碰倒許許多多的錯誤，若是npm run dev成功以後，域名+端口請求仍是顯示鏈接超時
告訴你們幾個解題思路：

• ping一下域名檢查是否是域名的問題

ping yourdomain.com

• 不是域名問題 在用telnet檢查一下端口，域名沒有問題的話，通常問題就出在端口身上

telnet yourdomain.com 3000

端口出問題緣由有不少，你們只能根據本身的狀況來解決了，我用的是阿里雲服務器，端口請求超時的緣由是安全組中沒有開啓3000端口，添加上就能夠了。
添加端口參考文章：在安全組中添加受權端口

五、配置nginx

nginx是web代理服務器，由他將瀏覽器的請求轉發到服務器項目上面
通常安裝好的nginx都在/etc/nginx文件夾中，咱們先來看一下這裏面的nginx.conf文件，裏面能找到這麼兩條語句，意思是nginx的配置會引用/etc/nginx/conf.d/文件夾下面以.conf結尾的文件和/etc/nginx/sites-enabled/文件夾下面的全部文件

include /etc/nginx/conf.d/*.conf;
 include /etc/nginx/sites-enabled/*;

因此，咱們在這兩個文件夾下面進行配置均可以，我比較習慣在conf.d文件夾裏面

#打開conf.d文件夾
cd /etc/nginx/conf.d

#建立一個.conf文件
touch xbapp.conf

#打開剛剛建立的文件
vim xbapp.conf

在xbapp.conf文件中粘貼下面的代碼，

upstream koa.server{
  server localhost:3000;
}

server {
  listen   80;
  server_name yourdomain.com;    #這裏修改爲本身的域名
  root /mnt/xbapp/dist;  #修改爲本身的文件夾路徑，index頁面在dist文件夾下，因此指向dist文件夾
  location / {
    index  index.html index.htm;
  }
}

配置好了以後，輸入nginx -t檢查一下nginx配置是否成功，成功的話，會顯示下面這兩條語句

$ nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

從新啓動nginx

service nginx restart

如今打開域名應該就能夠正常顯示項目頁面了，最後咱們來安裝pm2這個進程管理器，幫助koa後端進程長期開啓

六、安裝pm2並啓動項目

//安裝pm2
~$ npm install pm2 --global

//檢查是否安裝成功
~$ pm2 -v

//進入項目目錄
~$ cd /mnt/xbapp/server/

//啓動項目
/mnt/xbapp/server/$ pm2 start app.js
//啓動成功返回的信息
[PM2] Starting /mnt/truth_hold/server/app.js in fork_mode (1 instance)
[PM2] Done.
┌────┬────────────────────┬──────────┬──────┬──────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status   │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼──────────┼──────────┼──────────┤
│ 0  │ app                │ fork     │ 0    │ online   │ 0%       │ 25.8mb   │
└────┴────────────────────┴──────────┴──────┴──────────┴──────────┴──────────┘

這樣vue項目就算是部署成功了~~