Next.js腳手架進階 —— 部署上線

Next.js腳手架進階系列

• 完美契合ant-design
• 封裝fetch && 增加中介軟體
• 部署上線

最近經常有人在前幾篇關於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）