【新手向】Nginx+pm2部署和發佈Nuxt項目 實現服務端渲染

Nuxt項目完成了 剩下的就是部署到服務器上了
但是網上的教程多半含混不清 順序混亂 對新手不太友好 索性自己寫一個比較全的教程吧

介紹

Nuxt項目打包後發佈在服務器上是前臺運行的 啓動後 若將窗口關掉則無法訪問

使用pm2可以完美解決該問題
pm2是一個帶有負載均衡功能的Node應用的進程守護工具 允許獨立代碼利用全部服務器上的所有CPU 並且能夠保證進程永遠活着(alive)
pm2有着0秒的重載 還能提供監控等功能 是個很實用的工具

環境準備

一、首先當然是安裝Node了

安裝pm2需要npm 包括Nuxt項目的下載模塊同樣也需要npm 因此Node必不可少

1、下載：

wget https://nodejs.org/dist/v10.11.0/node-v10.11.0-linux-x64.tar.xz

2.解壓：

解壓方式一(若失敗請用方式二)：

tar -zxvf node-v10.11.0-linux-x64.tar.xz

方式二：

xz -d node-v10.11.0-linux-x64.tar.xz
tar -xvf node-v10.11.0-linux-x64.tar

3、重命名：

mv node-v10.11.0-linux-x64 node

4、設置環境變量：

vi ~/.bash_profile

裏面默認有個PATH=$PATH:$HOME/bin
將其修改爲：

PATH=$PATH:$HOME/bin:/usr/local/node/bin(根據自己的實際目錄修改)

修改完之後 編譯剛剛修改過的文件：

source ~/.bash_profile

5、測試是否安裝成功：

node -v
npm -v

二、安裝pm2

pm2的安裝過程很簡單

npm i pm2 -g

設爲開機自啓動：

pm2 startup
pm2 save

三、然後需要安裝Nginx服務器

(如果已安裝了請跳過)
安裝步驟在我的另一篇博客：Linux環境下Nginx反向代理服務器的安裝和配置

安裝完之後 還需在nginx.conf進行配置：

(在這上個完整版的配置文件吧 可根據需要修改)

#user  nobody;
worker_processes  1;
error_log  logs/error.log;
error_log  logs/error.log  notice;
error_log  logs/error.log  info;
pid  logs/nginx.pid;

events {
  worker_connections  1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  #gzip  on;
    server {
        listen       80;
        server_name  test.com www.test.com;# 這裏填寫你的域名
        location / {
                proxy_redirect off;
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;
                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto  $scheme;
                proxy_read_timeout 1m;
                proxy_connect_timeout 1m;
                proxy_pass http://127.0.0.1:3000; # nuxt項目的監聽端口 啓動在哪個端口這裏就填寫哪個端口
        }
    }
}

如果是SSL 要這麼配置：

server {
    listen 443 ssl;
    server_name test.com www.test.com;
    ssl_certificate cert/xxxxxx.pem;   # 證書文件的路徑
    ssl_certificate_key cert/xxxxxx.key;   # 證書密鑰的路徑
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  #使用此加密套件
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   #使用該協議進行配置
    ssl_prefer_server_ciphers on;

    location / {
      # =======================若要實現CORS跨域 則將下方的註解解開=======================
      #add_header 'Access-Control-Allow-Origin' $http_origin;
      #add_header 'Access-Control-Allow-Credentials' 'true';
      #add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      #add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
      #add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
      #if ($request_method = 'OPTIONS') {
          #add_header 'Access-Control-Max-Age' 1728000;
          #add_header 'Content-Type' 'text/plain; charset=utf-8';
          #add_header 'Content-Length' 0;
          #return 204;
      #}
      # =======================若要實現CORS跨域 則將上方的註解解開=======================
      proxy_redirect off;
      proxy_set_header Host               $host;
      proxy_set_header X-Real-IP          $remote_addr;
      proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto  $scheme;
      proxy_read_timeout                  1m;
      proxy_connect_timeout               1m;
      proxy_pass                          http://127.0.0.1:3000;
    }
}

部署

現在已經萬事俱備只欠東風了 我們需要將我們的Nuxt項目打包

等等 我們還需要稍微配置一下端口和ip：
在nuxt.config.js裏 和head屬性平級 添加server的配置

server: {
    port: 3000, // 默認3000 也可以改成其它的端口號
    host: '0.0.0.0', // 默認localhost
  },

注：這個host: '0.0.0.0'很重要 必須配置 否則無法直接訪問Nuxt項目(當然 若使用Nginx進行反向代理 則無須進行此配置)

然後就是編譯了
我的Nuxt項目是用腳手架構建的 因此已經自帶了腳本命令：

在本地環境的項目根目錄下輸入npm run build開始編譯 然後等待一會(如果你的項目比較大 那就不是等"一會"了 是等"好久"🤣)

編譯完之後 我們會發現在項目的根目錄下生成了一個名爲.nuxt的文件夾
將項目的這四個文件和文件夾(.nuxt、static、nuxt.config.js、package.json)傳到服務器上：
注：傳到服務器上時 不一定要傳到Nginx的html目錄下 其它任意目錄都可以

進入目錄 輸入npm i下載所需的模塊：

模塊安裝完畢之後 用pm2啓動：

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

(這裏的my-nuxt-project可以是項目的package.json中的項目名 當然你也可以改成其它喜歡的)

啓動後 輸入pm2 list即可查看當前啓動的項目了：

最後 在瀏覽器裏即可成功訪問啦

---

附：pm2命令大全

pm2 start app.js              # 啓動app.js應用程序
pm2 start app.js -i 4         # cluster mode 模式啓動4個app.js的應用實例 且4個應用程序會自動進行負載均衡
pm2 start app.js --name="api" # 啓動應用程序並命名爲 "api"
pm2 start app.js --watch      # 當文件變化時自動重啓應用
pm2 start script.sh           # 啓動 bash 腳本
pm2 list                      # 列表 PM2 啓動的所有的應用程序
pm2 monit                     # 顯示每個應用程序的CPU和內存佔用情況
pm2 show [app-name]           # 顯示應用程序的所有信息
pm2 logs                      # 顯示所有應用程序的日誌
pm2 logs [app-name]           # 顯示指定應用程序的日誌
pm2 flush                     # 清空所有日誌文件
pm2 stop all                  # 停止所有的應用程序
pm2 stop 0                    # 停止 id爲 0的指定應用程序
pm2 restart all               # 重啓所有應用
pm2 reload all                # 重啓 cluster mode下的所有應用
pm2 gracefulReload all        # Graceful reload all apps in cluster mode
pm2 delete all                # 關閉並刪除所有應用
pm2 delete 0                  # 刪除指定應用 id 0
 
pm2 scale api 10              # 將名字叫api的應用擴展到10個實例
pm2 reset [app-name]          # 重置重啓數量
pm2 startup                   # 創建開機自啓動命令
pm2 save                      # 保存當前應用列表
pm2 resurrect                 # 重新加載保存的應用列表
pm2 update                    # 保存進程 結束pm2然後復原進程

---

結語：

其實我在部署的時候並沒有一帆風順
遇到了個大Bug 部署完畢訪問的時候老是請求不到 前端頁面上只顯示一個An error occurred in the application and your page could not be served.
在日誌裏時而輸入404時而輸入500的：

 ERROR  Request failed with status code 404

  at createError (node_modules/axios/lib/core/createError.js:16:15)
  at settle (node_modules/axios/lib/core/settle.js:17:12)
  at Unzip.handleStreamEnd (node_modules/axios/lib/adapters/http.js:236:11)
  at Unzip.emit (events.js:187:15)
  at Unzip.EventEmitter.emit (domain.js:442:20)
  at endReadableNT (_stream_readable.js:1092:12)
  at process._tickCallback (internal/process/next_tick.js:63:19)

後來才發現我項目部署完畢是通過http請求訪問的 然而在項目中Axios請求的接口地址又是https的 所以無法訪問

關鍵是日誌對錯誤信息的描述壓根沒有 只有個404誰知道呀 網上也沒有相關的解決方法
忙活了一下午 總算在stackoverflow上看到了個相似的問題 折騰了一下最終解決了
不得不說 在問題解決完畢之後還是很爽的😎

沒想到啊 連部署都有這麼多麻煩事 果然SSR沒這麼容易(手動狗頭)

---