nuxt基於ubuntu18.04服務器下的部署

最近這幾年前端三大框架橫行，包括本人也一直在用Vue這個框架，但由於spa的緣由，若是隻是單單作系統之類的還好，可是在作門戶類等須要SEO的站點時候，每每不盡人意，這時候就該上nuxt.js了。
這篇教程是基於ubuntu 18.04 系統下的nuxt部署方法。
搭建nginx+node+npm+pm2環境
nginx版本1.14.0
pm2版本3.5.1
node版本v10.11.0
npm版本6.4.1

一、安裝nginx

更新源

sudo apt-get update
複製代碼

安裝

sudo apt-get install nginx
複製代碼

若是忘記了nginx程序目錄，能夠執行：

whereis nginx
複製代碼

Nginx若是指定默認加載/etc/nginx/nginx.conf的配置文件。若是要查看加載的是哪一個配置文件，能夠用這個命令sudo nginx -t或者ps -ef | grep nginx

nginx的使用方法

sudo service nginx {start | stop | restart | reload | force-reload | status | configtest | rotate | upgrade }
複製代碼

二、安裝node+npm

下載node

cd /usr/local/src/
複製代碼

wget https://nodejs.org/dist/v10.11.0/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
複製代碼

重命名

mv node-v10.11.0-linux-x64 node
複製代碼

環境變量
打開文件後鍵盤輸入 i 便可開始編輯

vim ~/.bash_profile
複製代碼

PATH=$PATH:$HOME/bin:/usr/local/src/node/bin
複製代碼

改完按鍵盤左上角Esc鍵並輸入 :wq （冒號+w+q，不要掉了冒號）
最後編譯剛剛修改的文件 

source ~/.bash_profile
複製代碼

安裝完成測試

node -v
複製代碼

npm -v
複製代碼

三、安裝pm2

npm i -g pm2
複製代碼

自啓動

pm2 startup
複製代碼

pm2 save
複製代碼

四、設置nginx代理

nginx代理設置

server {
	listen 80;
	server_name test.rdf.banjiajia.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://127.0.0.1:3333; #反代理地址，端口是nuxt項目所用到的端口
    }
}
複製代碼

五、nuxt打包上傳

npm run build
複製代碼

把 nuxt.config.js package.json static .nuxt 上傳到服務器項目文件夾 列入: /var/www/nuxt
進入項目目錄安裝依賴

cd /var/www/nuxt
複製代碼

npm i
複製代碼

用pm2運行項目

cd /var/www/nuxt
複製代碼

pm2 start npm --name "my-nuxt" -- run start
複製代碼

pm2管理項目命令
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 list
pm2 delete id
rm -r node_modules nuxt.config.js package.json package-lock.json static
複製代碼

從新上傳新打包的文件而後，安裝依賴並開啓項目'rdf-nuxt''

npm i
pm2 start npm --name "rdf-nuxt" -- run start
複製代碼

如下關於集羣的內容轉自：

https://www.jianshu.com/p/39e0fa9f1739
複製代碼

關於集羣

pm2 的 cluster模式能夠支持同一個端口，集羣多個實例（一個核心起一個實例，若是是單核的服務器就無法了）

在項目根目錄 pm2 init  發現生成了一個 ecosystem.config.js

vi ecosystem.config.js

module.exports = {
    
      apps : [{
    
        name: 'nuxt-app',
    
        script: './node_modules/nuxt/bin/nuxt.js',  // 不能用npm run start 的命令，會報錯端口占用
    
        args: 'start',
    
        // Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/
    
        instances: 2, // 幾個實例也能夠填 'max' 服務器最大支持的實例
    
        exec_mode: 'cluster',
    
        autorestart: true,
    
        watch: false,
    
        max_memory_restart: '1G', // 個人服務器是1g內存，當超過1g內存，會重啓
    
        env: {
    
          NODE_ENV: 'development'
    
        },
    
        env_production: {
    
          NODE_ENV: 'production'
    
        }
    
      }]

};
複製代碼

編輯保存完以後，pm2 start， 使用pm2 list 查看當前狀態

測試，如何測試兩個實例都在正常工做， 咱們pm2 list, 能夠看到當前的node進程狀態，如今咱們發現有兩個，0 和 1，此時咱們試着pm2 stop 0 ，關掉第一個，看還能不能訪問，一樣的方法關掉1，打開0，若是都是正常的，那就說明咱們部署成功了。