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

Next.js腳手架進階系列

• 完美契合ant-design
• 封裝fetch && 增長中間件
• 部署上線
• Zeit Now部署

最近常常有人在前幾篇關於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就發佈成功了。

出現問題

問題描述：上面那個正常跑部署走客戶端流程，沒有什麼大問題，不過當在非首頁的其餘野蠻進行刷新，會出現404報錯，緣由是從首頁https://luffyzh.github.io/next-markdown-editor/ 路由跳轉到page1被渲染成了https://luffyzh.github.io/page1，咱們期待的應該是https://luffyzh.github.io/next-markdown-editor/page1，因此出現了404。

解決辦法

# 安裝babel-plugin-transform-define
yarn add -d babel-plugin-transform-define

# 新建env-config.js
const prod = process.env.NODE_ENV === 'production';

module.exports = {
  'process.env.BACKEND_URL': prod ? '/next-markdown-editor' : ''
};

# 更改.babelrc ->.babelrc.js
const envConfig = require("./env-config.js");

module.exports = {
  "presets": ["next/babel"],
  "plugins": [
    ... // other plugin
    ["transform-define", { ...envConfig }]
  ]
}

# 更改路由跳轉
// 原來
<Link prefetch href='/normal'>
  <Button size='large' type='default'>普通編輯器</Button>
</Link>

// 如今
<Link prefetch href='/normal' as={process.env.BACKEND_URL + '/normal'}>
  <Button size='large' type='default'>普通編輯器</Button>
</Link>

# yarn deploy發佈便可
複製代碼

生產環境部署

這個我以爲就不必講了吧。。。事實上，官方已經說得很清楚了。

"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）