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實現高階部署上線
看完上面的,小夥伴可能會嗤之以鼻?,但是實事求是那個執行完程式碼就是生產環境的程式碼了,只不過那麼去部署可能會存在一些問題:
- 監控狀態
- 系統崩潰無法重啟
- 負載均衡
- ...其他問題
說白了,其實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還有很多高階功能,大家自己去探索吧。
總結
這篇文章可不是水文了吧,哈哈。畢竟是應很多小夥伴要求寫的,最後我覺得這個腳手架完成的真差不多了。是不是可以推廣一波了~寫幾個專案試試
?Star或Fork,不要迷路~Next-Antd-Scaffold
交流
有興趣交流,大家一起分享探討,加入群聊,如果失效請加QQ:439923999,備註Next?
QQ群:641113448 (備註:Next.js)