Next.js 腳手架進階 —— Zeit Now部署

Next.js腳手架進階系列

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

前言

很久沒寫文章了，最近也沒有學什麼，有點荒廢。嘗試着學習一些新東西，GraphQL、Gatsby、Netlify等（可能對不少人來講不是新東西了）。其中學到Netlify的時候發現，很適合部署靜態網站，因此就嘗試着部署了一下，發現還真是簡單，只須要填寫幾個命令就能夠完成靜態站點的部署了，免費託管，簡直是比gh pages還要方便。因此嘗試了幾個靜態網站以後，好比周公子的花園，就是一鍵式部署。

而後我就想，把一些項目都試着部署一下，首先就想把這個Next-Antd-Scaffold腳手架部署上去，以前講過部署了，可是那個部署是有條件的：

• gh pages部署須要生成靜態文件，也就是next export
• pm2部署須要開發者擁有一個服務器

那麼對於學生黨或者初學者來講，實際上並無感覺到本身建站的完總體驗，這裏就想着經過這種部署方式，把腳手架部署上去。

ok,上面說了，想用的是Nelify進行部署，那麼我想多了，或者說我功課沒作到位，Netlify部署雖然很簡單，可是並無成功，過程以下：

• 第一步，選擇倉庫

  

• 第二步，部署配置

  

• 第三步，部署中

  

• 第四步，部署完成（失敗）

能夠看到，部署完成，而且活去了netlify分配給咱們的地址，訪問一下，oh no～失敗了，緣由我並不知道，主要它也沒提供錯誤日誌，不過我猜想既然是靜態站部署，那麼這個腳手架實際上是用了node動態獲取數據，多是有一部分緣由吧，並且build完以後的文件夾並無index.html，也沒有再去糾結，由於本文主題是now部署。

那個長得不是很好看的地址是netlify爲咱們分配的，你還能夠經過 site settings進行custom化，確實很方便。

Now 部署

上面失敗，也情有可原，誰讓本身懶了呢，爲啥這麼說呢？Next.js本來就是zeit倉庫的一個項目，而對應配套的，zeit倉庫還有一個now項目，專門進行部署的，真是很是很是NB啊，不得不佩服大牛們～

本來我覺得會很簡單的就能夠部署成功呢，爲啥呢，由於準備工做作好以後只有一條命令，那就是now，而後就等待就好了，結果然是慘不忍睹，各類問題各類踩坑，因此分享給你們踩坑經歷吧～

能夠看到，部署失敗了六次，第七次才部署成功～艱難險阻啊

事先聲明，now-cli很強大，我只用來部署Next.js項目了，其實它能夠支持不少不少種部署，具體以下圖

準備工做

首先就是安裝now工具了，官方提供下載地址，各類版本的。我習慣直接npm了，你們按需安裝。

// 安裝now
npm install -g now
複製代碼

部署踩坑

安裝完以後火燒眉毛的進行嘗試，我其實就是按照文檔一步一步來作的，文檔地址zeit-now docs以及now-next docs。

具體的你們本身去讀吧，我只是負責幫大家踩坑，一步一步來。

第一次嘗試 - add now.json

新建now.json配置文件，鍵入以下代碼：

{
  "version": 2,
  "builds": [{ "src": "next.config.js", "use": "@now/next" }]
}
複製代碼

而後運行部署命令:

now
複製代碼

沒錯，我什麼都沒作，就直接運行命令了。顯而易見，我失敗了，哈哈。now的好處就是失敗了會有詳細的部署日誌，失敗緣由。

OK，緣由很明顯提示咱們了， no serverless pages，這是個什麼東西我不太清楚，由於next.js正常部署是不會有這個東西的，那麼就去查文檔，發現以下：

也就是咱們想經過now進行部署Next.js項目,須要將target配置爲serverless，這樣就能夠了。

第二次嘗試 - serverless

咱們對代碼進行了以下修改：

// next.config.js
...
module.exports = {
    ...
+  target: 'serverless'
    ...
}
...
複製代碼

再次進行部署：

now
複製代碼

不出意外，又失敗了：

從圖中能夠看到，很是明顯，serverless模式下，不支持publicRuntimeConfig，至於publicRuntimeConfig是個什麼東西，能夠去看官方文檔，這裏就很少說了，而後我去看了下Next.js的文檔，發現了以下提示 文檔地址：

Next.js的部署文檔也提供了now的注意事項，因此咱們若是看的特別仔細，也會避免這種問題。 那麼，咱們就修改吧，把代碼裏全部的提早配置都修改掉。修改方式有不少種，官方也給了方案，好比：

還有就是能夠經過babel-plugin-transform-define或者Webpack DefinePlugin。

第三次嘗試 - 修改config

ok ,沒問題了，部署成功就能夠直接訪問了部署後線上地址。預覽一下，也基本沒什麼問題，以爲仍是挺簡單的，可能我太笨了，哈哈。

此次單純是我想寫，從開始到結束也就兩個小時各類截圖，沒什麼技術，純當是沒有服務器的同窗免費嘗試免費玩一玩了。

最後部署的分支是腳手架的now分支。部署過程是拿master分支嘗試的，你們注意了哦。

Next-antd-scaffold腳手架能夠正式用了，沒有人提issue和貢獻一下嗎～哈哈