Vue+Koa2 打包後如何進行部署

最近使用Vue和Koa2重構了本身的博客，過程當中踩了很多坑，查了不少資料，最後總算成功上線。以後我計劃圍繞這個過程寫一系列文章，講講如何用Vue+Koa2寫一套網站。

而如今，先來說講最後一步，在寫完Vue和Koa2後，如何將它們部署到線上。

1.將Vue和Koa2結合

不少人在打完包後就不知道怎麼作了，畢竟後面都是後端的事情。若是你用的是Vue-cli3.0，那麼打包這一步會很是簡單，只須要執行一條命令便可，其它的不用關心：

npm run build
複製代碼

以後會生成一個dist的文件夾，將它放到Koa2目錄下的public文件裏，而後在Koa2的配置文件app.js裏將靜態資源指向這個文件夾，指向命令在咱們建立Koa2框架時就已經自動生成，因此咱們要作的也只是改一下文件地址就好了：

app.use(require('koa-static')(__dirname + '/public/dist'))
複製代碼

改好以後打開koa2的主頁，看看是否加載成功，第一步就愉快地完成了。

2.Nginx配置

如今登陸服務器，安裝完Nginx後，在/etc/nginx/sites-enabled/下新建一個conf文件，而後寫入配置：

//Koa的端口通常默認是3000
upstream koa.server{
    server 127.0.0.1:3000;
}

server {
    listen      80;
    server_name .******.com;

    location / {
        proxy_pass http://koa.server;
        proxy_redirect off;
    }
}
複製代碼

寫完以後重啓Nginx：

sudo /etc/init.d/nginx restart
複製代碼

接着將Koa2文件上傳到服務器，啓動後在瀏覽器裏輸入你的網址或者服務器ip，能訪問到就大功告成了。

固然，這套Nginx配置仍是很是簡陋，若是但願長期穩定運行的話還得加入SSL和Gzip，網上資料不少，若是之後有機會的話我也會講一下。

3.使用Pm2進行進程管理

能成功訪問後接着就是將Koa放到後臺運行，這裏使用了Pm2進行管理，先來安裝：

npm install -g pm2
複製代碼

安裝好後在Koa目錄下建立一個文件 「pm2.conf.json」，而後輸入如下代碼：

{
    "apps":{
        "name":"blog",
        "script": "bin/www",
        "watch": true,
        "ignore_watch":[
            "node_modules",
            "logs"
        ],
        "instances":2,
        "error_file":"logs/err.log",
        "out_file":"logs/out.log",
        "log_date_format": "YYYY-MM-DD HH:mm:ss"
    }
}
複製代碼

來重點說下兩個參數，watch和instances。 Watch是檢測到文件有改動會自動重啓加載，ignore_watch則是排除不須要監控的文件。 Instances則是開啓實例數，建議根據cpu核數進行配置，有多少核就開啓多少條。

最後啓動：

pm2 start pm2.conf.json
複製代碼

到這裏，大部分時間都只有你本身登陸的網站就算部署完了。