nuxt.js部署vue應用到服務端過程

由於seo的需要，最近將項目移植道nuxt.js下采用ssr渲染

移植完成后，一路順暢，但是到了要部署到服務器端上時候，還是個頭疼的問題，但最終還是順利完成。
現在記錄一下部署中的過程。

注：部署時候過程中，參考了下：https://segmentfault.com/a/11...

一：搭建nginx+node+npm+pm2環境

我們的nginx版本是 1.12
node版本是v8.11.1
npm版本是5.6.0
pm2版本是2.10.2

具體環境安裝，網上都有教程，就不在敘述，直接進入正文。

一：配置nginx代理監聽3002端口，package打包時端口3002

在nuxt.js的項目下package.json里設置

在nginx的 vhost里新建一個主機綁定

 

upstream nodenuxt {
    server 127.0.0.1:3002; #nuxt項目 監聽端口
    keepalive 64;
}

server {
    listen 80;
    server_name mysite.com;
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;  
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_cache_bypass $http_upgrade;
        proxy_pass http://nodenuxt; #反向代理
    }
}

二：項目在本地完成后，npm run build 打包應用
打包完成后，我們將

.nuxt
static
nuxt.config.js
package.json

傳到服務器空間里, 需要上傳文件如下

三：在服務器上部署運行

1. 運行npm install 安裝package里的依賴
2. 運行npm start 就可以運行起來nuxt的服務渲染了

此時我們就可以在瀏覽器上輸入 mysite.com 訪問了。服務端渲染瞬間出來了，但這並不理想，進程穩定性能否常駐后台？

四：pm2開啟進程守護

進入對應的應用目錄，執行以下命令

pm2 start npm --name "my-nuxt" -- run start 

其中 my-nuxt的名稱是 我們在package中的項目名稱。
執行完pm2的啟動命令后，我們用 pm2 list 查看一下進程列表，我截一下我個人服務器的pm2列表：

大功完成！！