Linux部署Nuxt應用一條龍

[TOC]

1、安裝環境

node版本是v8.11.3 npm版本是5.6.0 pm2版本3.3.2

1.安裝node環境，Linux 64bit version

wget https://nodejs.org/dist/v8.11.3/node-v8.11.3-linux-x64.tar.xz
複製代碼

下載以後，因爲是tar.xz格式的壓縮文件，因此須要用下面的命令解壓：

xz -d **.tar.xz
tar -xv -f **.tar
//或者
tar -Jxv -f **.tar.xz(大寫的J）
複製代碼

壓成功以後便是能夠運行的二進制文件，只須要爲node何npm創建兩個軟鏈接，使之能夠全局運行便可：

ln -s /you_path/node-v8.11.3-linux-x64/bin/node /usr/local/bin/node
ln -s /you_path/node-v8.11.3-linux-x64/bin/npm /usr/local/bin/npm
複製代碼

最後執行node --version，顯示node版本號即爲安裝成功：

node --version
v8.11.3

npm --version
5.6.0
複製代碼

安裝淘寶鏡像 執行如下命令便可全局安裝cnpm。以後能夠直接使用cnpm代替npm，命令格式是同樣，速度比npm快不少

npm install -g cnpm --registry=https://registry.npm.taobao.org
ln -s /you_path/node-v8.11.3-linux-x64/bin/cnpm /usr/local/bin/cnpm
複製代碼

2.安裝pm2 PM2是node進程管理工具，能夠利用它來簡化不少node應用管理的繁瑣任務，如性能監控、自動重啓、負載均衡等，並且使用很是簡單。

cnpm i pm2 -g
ln -s /you_path/node-v8.11.3-linux-x64/bin/pm2 /usr/local/bin/pm2
pm2 --version
3.2.2
複製代碼

2、nginx反向代理

先在nuxt項目配置文件中配置域名和端口

// nuxt.config.js
 server: {
    port: 3004, // default: 3000
    host: '0.0.0.0', // default: localhost,
  },
複製代碼

nginx監聽的端口與項目中的端口一致，在nginx的 vhost裏新建一個主機綁定

upstream deju-pc-ssr {
    #nuxt項目 監聽端口與項目端口一致（7六、251的docker環境要把127.0.0.1替換成服務器ip）
    server 127.0.0.1:3004;
    keepalive 64;
}

server {
    listen 443;
    server_name www.dighouse.com;

    location ~* ^/(aboutus|ershoufang|xinfang).*$ {
                 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://deju-pc-ssr; #反向代理
     }

     location ~* ^/(index|index.html)?/?$ {
				 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://deju-pc-ssr; #反向代理
      }
}
複製代碼

3、打包應用

項目在本地完成後，npm run build 打包應用， 打包完成後，咱們將3個文件傳到服務器空間裏/www.dighouse.com/deju-pc-ssr/, 須要上傳文件以下

.nuxt
nuxt.config.js
package.json
複製代碼

4、pm2開啓進程守護

進入對應的應用目錄/www.dighouse.com/deju-pc-ssr/，執行如下命令 1.安裝package裏的依賴,只須要安裝一次

cnpm install
複製代碼

2.本地啓動nuxt項目檢測是否報錯

npm run start //查看 http://localhost:3002/
複製代碼

3.啓動守護進程

pm2 start npm --name "deju-pc-ssr" -- run start
複製代碼

其中deju-pc-ssr的名稱是 咱們在package中的項目名稱。 執行完pm2的啓動命令後，咱們用 pm2 list 查看一下進程列表

4.發佈新版本代碼重啓守護進程

pm2 restart deju-pc-ssr
複製代碼

5、pm2配置文件啓動，監聽文件變化自動重啓

每次發佈代碼去執行命令重啓pm2進程仍是很麻煩，經過pm2配置文件啓動服務能夠監聽文件變化自動重啓。

1.新建pm2配置文件 在服務器項目目錄中新建 pm2.config.js文件，代碼以下：

// pm2.config.js
module.exports = {
  apps: [
    {
      name: 'deju-pc-ssr',//項目名稱
      cwd: "./",// 當前工做路徑
      script: 'npm',// 實際啓動腳本
      args: "run start",//參數
      autorestart: true,
      watch: true,// 監控變化的目錄，一旦變化，自動重啓
      watch: [".nuxt", "nuxt.config.js"],// 監控變化的目錄，一旦變化，自動重啓
      watch_delay: 1000,
      ignore_watch: ["node_modules"],// 從監控目錄中排除
      watch_options: {
        "followSymlinks": false,
        "usePolling": true,
      }
    }
  ],
};
複製代碼

2.啓動pm2 若是以前服務啓動過記得先刪除進程pm2 delete deju-pc-ssr。 而後啓動pm2配置文件

pm2 start pm2.config.js
複製代碼

6、開機自動啓動

咱們但願直接經過服務器重啓以後能自動啓動，能夠經過pm2 startup來實現開機自啓動。細節可參考。流程以下：

1. 經過pm2 save保存當前進程狀態。
2. pm2 startup

參考

• 【nuxtjs指南】nuxt js 利用nginx反向代理如何優雅的部署

• PM2官網

• PM2實用入門指南