next.js、nuxt.js等服務端渲染框架構建的項目部署到服務器，並用PM2守護程序

前端渲染： vue、react等單頁面項目應該這樣子部署到服務器

貌似從前幾年，先後端分離逐漸就開始流行起來，把一些渲染計算的工做拋向前端以便減輕服務端的壓力，但爲啥如今又開始流行在服務端渲染了呢？如vue全家桶或者react全家桶，都推薦經過服務端渲染來實現路由。搞得咱們慌得不行，不由讓我想起一句話：歷來沒有任何一門語言的技術棧像Javascript同樣，學習者拼盡全力也不讓精通。沒辦法，流行，我們就得學！

前斷時間寫了一篇vue、react等單頁面項目應該這樣子部署到服務器，結果反響不錯！最近好多朋友私信或邀請問不少關於next.js和nuxt.js的問題，好比關於nextjs 和 nuxtjs如何部署？，pm2如何配合？...在這裏咱們就一塊兒討論下在服務器上使用PM2守護next.js、nuxt.js等服務端渲染框架構建的項目！該篇咱們只討論服務端渲染應用部署，靜態應用部署就是我前段時間寫的vue、react等單頁面項目應該這樣子部署到服務器。

Nginx配置

既然是應用，咱們就應該有域名，在這裏咱們以 nginx配置 爲例，簡單配置以下：
Next域名：http://next.sosout.com/
Nuxt域名：http://nuxt.sosout.com/

http {
    ....  # 省略其餘配置
   
    server {
        listen 80;
        server_name  *.sosout.com;
        
        if ($host ~* "^(.*?)\.sosout\.com$") {
            set $domain $1;
        }

        location / {
            if ($domain ~* "next") {
                root /mnt/html/next;
            }
            if ($domain ~* "nuxt") {
                root /mnt/html/nuxt;
            }
            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;
        }
        access_log  /mnt/logs/nginx/access.log  main;
    }

    #tcp_nopush     on;

    include /etc/nginx/conf.d/*.conf;
}

Nginx反向代理

因爲服務端渲染的各個應用端口號各不相同，所以這個時候咱們就須要反向代理了，配置以下：

#經過upstream nodejs 能夠配置多臺nodejs節點，作負載均衡
#keepalive 設置存活時間。若是不設置可能會產生大量的timewait
#proxy_pass 反向代理轉發 http://nodejs

upstream nodenext {
    server 127.0.0.1:3001; #next項目 監聽端口
    keepalive 64;
}

server {
    listen 80;
    server_name next.sosout.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://nodenext; #反向代理
    }
}

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

server {
    listen 80;
    server_name nuxt.sosout.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; #反向代理
    }
}

服務器的準備工做已完成，接下來咱們就分別看看Next.js和Nuxt.js服務端渲染應用如何部署？

Next.js服務端渲染應用部署

部署 Next.js 服務端渲染的應用不能直接使用 next 命令，而應該先進行編譯構建，而後再啓動 Next 服務，官方經過如下兩個命令來完成：

next build
next start

官方推薦的 package.json 配置以下：

{
  "name": "my-app",
  "dependencies": {
    "next": "latest"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

而我更推薦以下配置，稍後你會發現這樣和 pm2 一塊兒使用更方便，自動化部署也方便:

{
  "name": "my-app",
  "dependencies": {
    "next": "latest"
  },
  "scripts": {
    "dev": "next",
    "start": "next start -p $PORT",
    "build": "next build && PORT=3001 npm start"
  }
}

next.js服務端渲染應用部署這樣就完成了，官方前後執行 npm run build 、npm start 便可完成部署。而我這邊只要執行 npm run build ，其實我只是把兩個合併成一個，並設置了端口以便區別其餘應用，避免端口占用！

接下來簡單的說一下next這幾個命令：
next: 啓動一個熱加載的Web服務器（開發模式）
next build: 利用webpack編譯應用，壓縮JS和CSS資源（發佈用）。
next start: 以生成模式啓動一個Web服務器 (next build 會先被執行)。

Nuxt.js服務端渲染應用部署

其實部署 Nuxt.js 服務端渲染的應用和 Next.js 極其類似！在這裏我就把代碼粘粘貼貼，複復制制，改改寫寫。。。。
Nuxt.js 服務端渲染的應用不能直接使用 nuxt 命令，而應該先進行編譯構建，而後再啓動 Nuxt 服務，官方經過如下兩個命令來完成：

nuxt build
nuxt start

官方推薦的 package.json 配置以下：

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  }
}

而我更推薦以下配置，稍後你會發現這樣和 pm2 一塊兒使用更方便，自動化部署也方便:

{
  "name": "my-app",
  "dependencies": {
    "nuxt": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "start": "PORT=3002 nuxt start",
    "build": "nuxt build && npm start"
  }
}

nuxt.js服務端渲染應用部署這樣就完成了，官方前後執行 npm run build 、npm start 便可完成部署。而我這邊只要執行 npm run build ，其實我只是把兩個合併成一個，並設置了端口以便區別其餘應用，避免端口占用！

接下來簡單的說一下nuxt這幾個命令：
nuxt: 啓動一個熱加載的Web服務器（開發模式）
nuxt build: 利用webpack編譯應用，壓縮JS和CSS資源（發佈用）。
nuxt start: 以生成模式啓動一個Web服務器 (nuxt build 會先被執行)。

PM2守護程序

Next.js使用pm2，進入對應的應用目錄，執行如下命令：

pm2 start npm --name "my-next" -- run build

Nuxt.js使用pm2，進入對應的應用目錄，執行如下命令：

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

使用pm2時，把兩個部署命令合成一個更方便！執行完pm2的啓動命令後，咱們用 pm2 list 查看一下進程列表，我截一下我我的服務器的pm2列表：

之後您就能夠用pm2進行維護了，好比咱們的next應用更改了代碼，由於當時建立時給next應用命名的進程名稱爲 my-next ，所以咱們能夠直接使用 pm2 reload my-next 進行重載。接下來我就簡單介紹一下pm2，若是有須要，我能夠另寫一篇關於pm2的文章！

pm2 簡單介紹

pm2是nodejs的一個帶有負載均衡功能的應用進程管理器的模塊，相似有Supervisor，forever，用來進行進程管理。

1、安裝：

npm install pm2 -g

2、啓動：

pm2 start app.js
pm2 start app.js --name my-api       #my-api爲PM2進程名稱
pm2 start app.js -i 0                #根據CPU核數啓動進程個數
pm2 start app.js --watch             #實時監控app.js的方式啓動，當app.js文件有變更時，pm2會自動reload

3、查看進程：

pm2 list
pm2 show 0 或者 # pm2 info 0         #查看進程詳細信息，0爲PM2進程id

4、監控：

pm2 monit

5、中止：

pm2 stop all                         #中止PM2列表中全部的進程
pm2 stop 0                           #中止PM2列表中進程爲0的進程

6、重載：

pm2 reload all                       #重載PM2列表中全部的進程
pm2 reload 0                         #重載PM2列表中進程爲0的進程

7、重啓：

pm2 restart all                      #重啓PM2列表中全部的進程
pm2 restart 0                        #重啓PM2列表中進程爲0的進程

8、刪除PM2進程：

pm2 delete 0                         #刪除PM2列表中進程爲0的進程
pm2 delete all                       #刪除PM2列表中全部的進程

9、日誌操做：

pm2 logs [--raw]                     #Display all processes logs in streaming
pm2 flush                            #Empty all log file
pm2 reloadLogs                       #Reload all logs

10、升級PM2：

npm install pm2@lastest -g           #安裝最新的PM2版本
pm2 updatePM2                        #升級pm2

11、更多命令參數請查看幫助：

pm2 --help

12、PM2目錄結構：

• 一、默認的目錄是：當前用於的家目錄下的.pm2目錄（此目錄能夠自定義，請參考：十3、自定義啓動文件），詳細信息以下：

$HOME/.pm2                   #will contain all PM2 related files
$HOME/.pm2/logs              #will contain all applications logs
$HOME/.pm2/pids              #will contain all applications pids
$HOME/.pm2/pm2.log           #PM2 logs
$HOME/.pm2/pm2.pid           #PM2 pid
$HOME/.pm2/rpc.sock          #Socket file for remote commands
$HOME/.pm2/pub.sock          #Socket file for publishable events
$HOME/.pm2/conf.js           #PM2 Configuration

十3、自定義啓動文件：

• 一、建立一個test.json的示例文件，格式以下：

{
  "apps":
    {
      "name": "test",
      "cwd": "/data/wwwroot/nodejs",
      "script": "./test.sh",
      "exec_interpreter": "bash",
      "min_uptime": "60s",
      "max_restarts": 30,
      "exec_mode" : "cluster_mode",
      "error_file" : "./test-err.log",
      "out_file": "./test-out.log",
      "pid_file": "./test.pid"
      "watch": false
    }
}

• 二、參數說明：

apps：json結構，apps是一個數組，每個數組成員就是對應一個pm2中運行的應用
name：應用程序的名稱
cwd：應用程序所在的目錄
script：應用程序的腳本路徑
exec_interpreter：應用程序的腳本類型，這裏使用的shell，默認是nodejs
min_uptime：最小運行時間，這裏設置的是60s即若是應用程序在60s內退出，pm2會認爲程序異常退出，此時觸發重啓max_restarts設置數量
max_restarts：設置應用程序異常退出重啓的次數，默認15次（從0開始計數）
exec_mode：應用程序啓動模式，這裏設置的是cluster_mode（集羣），默認是fork
error_file：自定義應用程序的錯誤日誌文件
out_file：自定義應用程序日誌文件
pid_file：自定義應用程序的pid文件
watch：是否啓用監控模式，默認是false。若是設置成true，當應用程序變更時，pm2會自動重載。這裏也能夠設置你要監控的文件。

因爲工做緣由，一直沒光顧segmentfault，收到不少關於部署的私信和評論，特此補充如下內容：

部署（以nuxt爲例）

基礎模板的部署方式

何爲基礎模板？使用了 vue init nuxt-community/starter-template <project-name> 進行搭建的！

第一步，打包

在執行 npm run build 的時候， nuxt 會自動打包。

第二步，選擇要部署的文件（社友最關心的步驟）：

• .nuxt/ 文件夾
• package.json 文件
• nuxt.config.js 文件(若是你配置proxy等，則須要上傳這個文件，建議把它傳上去)

第三步，啓動你的nuxt：

使用pm2啓動你的nuxt.js：

$ npm install // or yarn install 若是未安裝依賴或依賴有更改
$ pm2 start npm --name "my-nuxt" -- run start