Nuxt項目部署，pm2對Nuxt項目進行線程守護，pm2部署Nuxt項目,pm2守護Vue進程，pm2部署Vue項目,安裝淘寶鏡像

文章摘要：

1. 安裝vue相關包vue-cli
2. 安裝淘寶景象cnpm
3. 建立cnpm軟鏈 查看cnpm是否安裝成功
4. 安裝pm2 node進程管理器，建立pm2軟鏈接
5. pm2命令

樓主系統說明:
系統環境: CentOS7.3 64位
版本工具: svn 1.7.14
nodeJs: 8.9.1
npm: 5.6.0
cnpm: 5.2.0

一: 安裝vue相關包

如果vue-cli沒有安裝，請安裝vue-cli

npm install -g vue-cli

到項目目錄下

cd /data/www/project/shop/yf_mall_v1.0.5

安裝淘寶景象, 因爲在國內用npm安裝會比較慢, 所有我們使用淘寶鏡像安裝 也就是cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org 

建立cnpm軟鏈

ln -s /usr/local/node8.9.1/bin/cnpm  /usr/local/bin/cnpm 

安裝vue相關組件

cnpm install

查看是cnpm 是否安裝成功

cnpm -v

輸出內容包括:
node版本
npm版本
cnpm 版本等信息

[root@jsyfprod001 yf_mall_v1.0.5]# cnpm -v
[email protected] (/usr/local/node8.9.1/lib/node_modules/cnpm/lib/parse_argv.js)
[email protected] (/usr/local/node8.9.1/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
[email protected] (/usr/local/node8.9.1/bin/node)
[email protected] (/usr/local/node8.9.1/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local/node8.9.1 
linux x64 3.10.0-693.5.2.el7.x86_64 
registry=https://registry.npm.taobao.org

一、安裝pm2：
安裝pm2 node進程管理器

進入到yf_mall_v1.0.5目錄下安裝pm2
注(重要): 樓主在其他目錄下安裝全局pm2 雖能安裝成功 但是執行pm2 list的時間一直失敗 在項目目錄下成功了 所以纔到項目目錄下執行安裝pm2命令

cd  /data/www/project/shop/yf_mall_v1.0.5

cnpm install -g pm2 

安裝信息如下(最後幾行):

All packages installed (194 packages installed from npm registry, 1 packages installed from remote url, used 3s, speed 2.13MB/s, json 173(1.43MB), tarball 5.17MB)
[[email protected]] link /usr/local/node8.9.1/bin/pm2@ -> /usr/local/node8.9.1/lib/node_modules/pm2/bin/pm2
[[email protected]] link /usr/local/node8.9.1/bin/pm2-dev@ -> /usr/local/node8.9.1/lib/node_modules/pm2/bin/pm2-dev
[[email protected]] link /usr/local/node8.9.1/bin/pm2-docker@ -> /usr/local/node8.9.1/lib/node_modules/pm2/bin/pm2-docker
[[email protected]] link /usr/local/node8.9.1/bin/pm2-runtime@ -> /usr/local/node8.9.1/lib/node_modules/pm2/bin/pm2-runtime

建立pm2軟鏈接

ln -s /usr/local/node8.9.1/bin/pm2  /usr/local/bin/pm2

Nuxt官方部署教程如下:https://zh.nuxtjs.org/guide/commands
根據教程上提示
需要先後執行以下命令

nuxt build
nuxt start

但是樓主安裝的時候提示

[root@jsyfpre001 shop]# nuxt build
-bash: nuxt: command not found

解決方法如下:
把nuxt自帶的nuxt命令放到項目的要目錄下
執行軟鏈(放到根目錄)命令如下:

 ln -s /data/www/project/shop/yf_mall_v1.0.5/node_modules/nuxt/bin/nuxt /data/www/project/shop/yf_mall_v1.0.5/nuxt

此時項目目錄爲:

[root@jsyfpre001 yf_mall_v1.0.5]# ls -al
total 228
drwxr-xr-x   12 root root   4096 Feb  6 19:14 .
drwxr-xr-x    5 root root   4096 Feb  6 12:02 ..
-rw-r--r--    1 root root   1536 Feb  6 12:03 app.html
drwxr-xr-x    4 root root   4096 Feb  6 12:03 assets
drwxr-xr-x    6 root root   4096 Feb  6 12:03 components
-rw-r--r--    1 root root    207 Feb  6 12:03 .editorconfig
-rw-r--r--    1 root root  28623 Feb  6 12:03 element-variables.scss
-rw-r--r--    1 root root  11515 Feb  6 12:03 .eslintrc.js
-rw-r--r--    1 root root     92 Feb  6 12:03 .gitignore
drwxr-xr-x    2 root root   4096 Feb  6 12:03 layouts
drwxr-xr-x    2 root root   4096 Feb  6 12:03 middleware
drwxr-xr-x 1106 root root 114688 Feb  6 14:18 node_modules
lrwxrwxrwx    1 root root     64 Feb  6 19:14 nuxt -> /data/www/project/shop/yf_mall_v1.0.5/node_modules/nuxt/bin/nuxt #樓主添加: 注意此行
-rw-r--r--    1 root root   2950 Feb 23 14:20 nuxt.config.js
-rw-r--r--    1 root root   1150 Feb 23 14:20 package.json
drwxr-xr-x   24 root root   4096 Feb 23 14:20 pages
drwxr-xr-x    2 root root   4096 Feb 23 14:20 plugins
-rw-r--r--    1 root root   2843 Feb 23 14:20 README.md
drwxr-xr-x    9 root root   4096 Feb 23 14:20 static
drwxr-xr-x    2 root root   4096 Feb 23 14:20 store
drwxr-xr-x    4 root root   4096 Feb 23 14:20 .svn

如果此時還會出現以下錯誤,:

[root@jsyfpre001 shop]# nuxt build
-bash: nuxt: command not found

把命令修改爲以下的命令就OK了

[root@jsyfpre001 shop]# ./nuxt build

注：官方推薦的根目錄package.json配置信息如下：

 { 
  “name”：“my-app”，
  “dependencies”：{ 
    “nuxt”：“latest” 
  }，
  “scripts”：{ 
    “dev”：“nuxt 
    ”build“：”nuxt build“， 
    ”start“：”nuxt start“
  }
}

我的配置信息如下:

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

注: 爲方便與pm2守護進行結合, 使用更加方便nuxt.js服務端渲染應用部署這樣就完成了
官方先後執行 npm run build 、npm start 即可完成部署。
而我這邊只要執行 npm run build ，其實我只是把兩個合併成一個，並設置了端口以便區別其他應用，避免端口占用！

簡單說一下nuxt命令(來自官方):

nuxt 啓動一個熱加載的Web服務器（開發模式,端口默認3000） localhost:3000。
nuxt build 利用webpack編譯應用，壓縮JS和CSS資源（發佈用）。
nuxt start 以生成模式啓動一個Web服務器 (nuxt build 會先被執行)。
nuxt generate 編譯應用，並依據路由配置生成對應的HTML文件 (用於靜態站點的部署)。

下面啓動Nuxt項目
到項目目錄下用pm2執行啓動Nuxt項目命令

pm2 start npm --name "jsyfShopNuxt" -- run start

pm2 list # 查看當前正在運行的進程
pm2 start all  # 啓動所有應用
pm2 restart all  # 重啓所有應用
pm2 stop all # 停止所有的應用程序
pm2 delete all # 關閉並刪除所有應用
pm2 logs # 控制檯顯示所有日誌

pm2 start 0  # 啓動 id爲 0的指定應用程序
pm2 restart 0  # 重啓 id爲 0的指定應用程序
pm2 stop 0 # 停止 id爲 0的指定應用程序
pm2 delete 0 # 刪除 id爲 0的指定應用程序

pm2 logs 0 # 控制檯顯示編號爲0的日誌
pm2 show 0  # 查看執行編號爲0的進程
pm2 monit jsyfShopNuxt # 監控名稱爲jsyfShopNuxt的進程

注:
pm2官網： http://pm2.keymetrics.io/
pm2-github: https://github.com/Unitech/pm2