Vue 折騰記 - (14) Nuxt.js 2 正式版升級採坑以及部署姿勢改動

Nuxt.js Vue · 發表 2018-09-30 19:40:05

記錄下過程遇到的一些問題及修正知識;

之前用的 nuxt 1.4 , 僅做備忘錄,有興趣瞧瞧,沒興趣止步;

開發模式正常,部署模式下找不到靜態資源

因為我這邊用的 nginx , 這個需要配置下 nginx 靜態資源識別

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
expires 7d;
access_log off;
}
location ~ .*\.(js|css)?$ {
expires 7d;
access_log off;
}

css 背景圖丟失的問題

樣式 background 裡的路徑 ~/assets 改為 ~assets ;

template 的依舊文件那種寫法 ~/assets

CentOS安裝 `node-sass` 掛了的問題

不用 scss 的可以忽略

一開始以為是缺少編譯環境,排查了下 make 這些都全,

最終發現還是牆的問題, 就這個模組走 cnpm 的源,順利進行

在部署使用者的個人目錄下,操作如下

# 終端執行 , 就是寫一個npm的環境配置檔案
vim ~/.npmrc


# 寫入,這幾個依賴走國內的cnpm源
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org/

熱部署問題

常規姿勢

本地 git 推送 -> 跑到線上拉取(沒寫鉤子)
打包(再次打包) : nuxt build
重啟服務( pm2 重啟服務) : pm2 restart id|name

而且在伺服器上打包, CPU 各種跑滿 , 我稍微整理下,讓維護更加可控一點

簡化姿勢

git
pm2

直入主題,我用的 nuxt + koa 的搭配,其實這塊也沒涉及到 koa 這些

package.json

# start 裡面的環境變數這些,我全部用`ecosystem`這種模式來配置,直觀好維護
# deploy 是
"scripts": {
"dev": "cross-env NODE_ENV=developmentHOST=0.0.0.0 nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "node server/index.js",
"generate": "nuxt generate"
}

在專案根目錄寫一個 ecosystem.config.js 配置檔案,

module.exports = {
apps: [
{
name: 'nuxt2-sx-share',
script: 'npm',
args: 'run start',
watch: ['.nuxt'], // 監控輸出目錄
watch_options: {
usePolling: true
},
exec_mode:'cluster',
env: {
HOST: '0.0.0.0',
PORT: 4444,
NODE_ENV: 'development'
},
env_production: {
NODE_ENV: 'production',
HOST: '0.0.0.0',
PORT: 4444
},
output: './logs/console.log',
error: './logs/consoleError.log'
}
],
deploy: {
production: {
// SSH user
user: 'crper',
// SSH host
host: ['xxx'],
// SSH options with no command-line flag, see 'man ssh'
// can be either a single string or an array of strings
ssh_options: 'StrictHostKeyChecking=no',
// GIT remote/branch
ref: 'origin/master',
// GIT remote
repo: '[email protected]:lqh/nuxt-sx-mobile-share.git',
// path in the server
path: '/data/xixi/nuxt-sx-mobile-share',
// Pre-setup command or path to a script on your local machine
'pre-setup': 'ls -la',
'pre-deploy':'git pull',
// deploy hook
'post-deploy':
'npm install && pm2 reload ecosystem.config.js --env production'
}
}
}

整個配置檔案分兩部分: apps(啟動應用的相關資訊,環境變數,程序執行模式等) , deploy(部署區域)

SSH的配置和倉庫資訊這些就不說了

這裡我們主要說下部署這塊的,我的指令碼用了三個鉤子,初始化,預部署,及推送執行

pre-setup : 是用於初始化的時候呼叫的,我這裡只是單純的展示目錄結構
pre-deploy : 部署之前,執行,這個鉤子正常來說不用在這裡 git pull , 因為每次 update 都會拉取一變
post-deploy : 接受推送觸發的鉤子, 安裝依賴及過載服務

寫完這個配置檔案,只要你伺服器許可權(包括使用者組這些都正確配置),伺服器需要預先安裝 pm2 (啟動服務);

我自己寫了四個 alias

#pm2
alias pm2init="pm2 deploy ecosystem.config.js production setup"
alias pm2prod="pm2 deploy ecosystem.config.js production "
alias pm2up="pm2 deploy ecosystem.config.js production update"
alias pm2rev="pm2 deploy ecosystem.config.js production revert"

開始部署

本地安裝一個全域性的 pm2

部署初始化 : pm2init ,這裡會觸發拉取專案,克隆到對應位置什麼的,會產生 share 和 source (程式碼在這裡)
啟動服務(若是第一步成功,裡面會自動啟動,否則手動啟動下,排錯): pm2prod
更新過載服務 : pm2up

效果圖

ofollow,noindex" target="_blank">官方部署文件

ecosystem可配置項

你問我為什麼不做持續化整合…有條件誰不想搞?

有不對之處可以留言,會及時修正,謝謝閱讀