Next.js腳手架進階 —— 部署上線
最近經常有人在前幾篇關於Next.js的文章裡問我如何部署專案，並且還有小夥伴嘗試使用這個腳手架編寫專案，真的是非常開心和感謝大家啊，寫的不怎麼樣，希望志同道合的小夥伴可以多提意見，我好改進～。不過我如果說我也沒部署過你們會不會打我？哈哈，不要著急，今天咱們就擼一發部署上線～滿足大家的需求，證明一下這個腳手架是很ok的，可以使用～
Export靜態資源
提到釋出頁面，就不能不提到Next提供的這個功能了，前面也減少過，但是很簡單的介紹的，今天就真正的拿來用用，以 Next-Markdown-Editor 來測試，正好這個Demo全是靜態頁，沒有任何資料獲取操作～
Export的功能就是通過配置，將對應的pages下的路由頁面匯出成靜態html檔案。
export 配置
// package.json
"scripts": {
"start": "node server.js",
"build": "next build",
"prod": "NODE_ENV=production node server.js",
// 新增export命令
"preexport": "next build",
"export": "next export"
}
// next.config.js
exportPathMap: async function (defaultPathMap) {
return {
'/': { page: '/' },
'/normal': { page: '/normal' },
'/edit': { page: '/edit' },
'/preview': { page: '/preview' }
}
}
複製程式碼
serve啟動
我們通過export命令，會將專案生成一個靜態資原始檔夾out，如圖所示：
其實這個就跟我們正常的SPA應用例如create-react-app生成的build資料夾很像，裡面有一個index.html。同理，我們可以使用serve來進行啟動～
1.安裝serve
yarn add serve
2.增加啟動命令
"scripts": {
"start": "node server.js",
"build": "next build",
"prod": "NODE_ENV=production node server.js",
"preexport": "next build",
"export": "next export",
// 增加
"static-run": "next export && serve out"
}
3.執行命令
yarn static-run
複製程式碼
執行後控制檯截圖，以及訪問localhost:5000/
部署到Github Pages
為啥介紹上一步呢？因為我的目的是靜態的Next應用可以部署成Github Pages檢視Demo，這樣的免費又好用的伺服器，不去用豈不是一種浪費～接下來就介紹如何把靜態Next程式部署成Github Pages。
其實官方文件介紹的很詳細，也講的很清晰，包括每個步驟為什麼那麼做，我這裡為了方便，就把地址列出來，然後說明一下我是怎麼做的就可以了，還是那句話，應用層級～ Next-How-To-Deploy-Github-Pages
第一步：配置好export相關引數
參考上面的內容
第二步：增加deploy命令
// 一體化一部直接deploy語句
"scripts": {
"start": "node server.js",
"build": "next build",
"prod": "NODE_ENV=production node server.js",
"preexport": "next build",
"export": "next export",
"static-run": "next export && serve out",
// 新增
"deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
},
複製程式碼
第三步：新開一個本地分支(deploy-branch)
這裡我要說一下，為什麼新開一個本地分支。 注意，這個分支不需要push到遠端，因為某些特殊操作，deploy操作不適合在master和目標gh-pages分支上 。
原因如下：
- 不適合master原因
因為存在路由的關係，所以需要deploy前配置assetPrefix引數，但是配置完這個引數為的是釋出到Github Pages，而會導致生產環境也會帶上那個引數，以至於很多資源無法找到。所以不適合在master分支。
- 不適合gh-pages分支的原因
Github Pages依賴的是gh-pages分支，釋出成功後倉庫變成了下圖這樣：
很明顯，如果我們放在gh-pages分支上，每一次都需要很麻煩（比如-f才能提交，遠端倉庫和原生代碼不一致需要pull等等...），才能重新發布。
我的解決方案，新開一個 deploy-branch 本地分支，名字大家隨意。
// next.config.js增加程式碼
const debug = process.env.NODE_ENV !== 'production';
module.exports = {
// 這裡面改成你倉庫的名字
assetPrefix: !debug ? '/next-markdown-editor/' : '',
...
}
複製程式碼
第四步：釋出到Github Pages
// 在deploy-branch下直接執行 yarn deploy 複製程式碼
【注意】：什麼都不用做，增加完assetPrefix後直接執行 yarn deploy 就行，執行結果如下圖。
檢視效果
訪問 https://luffyzh.github.io/next-markdown-editor/ , 就可以看到，我們的Next專案Github Pages就釋出成功了。
生產環境部署
這個我覺得就沒必要講了吧。。。事實上，官方已經說得很清楚了。
"scripts": {
"start": "node server.js", // 開發環境命令
"build": "next build", // 生產環境打包
"prod": "NODE_ENV=production node server.js" // 生產環境執行
},
複製程式碼
官方的程式碼就是將NODE_ENV設定成production即可，就是生產環境～，這裡說明一下正好有人問過，如果是windows環境，命令應該變成 "prod": "set NODE_ENV=production && node server.js"
PM2實現高階部署上線
看完上面的，小夥伴可能會嗤之以鼻:smile:，但是實事求是那個執行完程式碼就是生產環境的程式碼了，只不過那麼去部署可能會存在一些問題：
- 監控狀態
- 系統崩潰無法重啟
- 負載均衡
- ...其他問題
說白了，其實Next.js是一個node端框架（你看啟動命令就知道了 node server ）。所以，部署上線我準備採用比較流行的PM2來進行部署，PM2的具體使用方法我在前面的一篇文章中講過了，這裡就不多講了，直接操作了。
傳送門：PM2簡易使用手冊
- 第一步：配置檔案
module.exports = {
apps: [
{
name: 'next-antd-scaffold',
script: './server.js',
cwd: './', // 當前工作路徑
watch: [
'.next' // 監控變化的目錄，一旦變化，自動重啟
],
ignore_watch: [
// 從監控目錄中排除
'node_modules',
'logs',
'static'
],
instances: 2,// 啟動2個例項
node_args: '--harmony',
env: {
NODE_ENV: 'development',
PORT: 3006
},
env_production: {
NODE_ENV: 'production',
PORT: 5000
},
out_file: './logs/out.log', // 普通日誌路徑
error_file: './logs/err.log', // 錯誤日誌路徑
merge_logs: true,
log_date_format: 'YYYY-MM-DD HH:mm Z' // 設定日誌的日期格式
}
]
};
複製程式碼
不懂得，去前面的文章裡看看就好啦～很簡單都。
- 第二步：部署服務
# 執行命令 $ pm2 start pm2.config.js --env production 複製程式碼
如上圖所示，我這邊開發環境是3006埠，生產環境是5000埠，使用pm2部署服務以後，訪問專案都是正常的，包括API服務。並且pm2還為我們提供日誌以及監控功能，詳細如下圖：
系統所有的控制檯輸出日誌：
系統所有的錯誤日誌：
等等等等...
PM2還有很多高階功能，大家自己去探索吧。