將 Next.js 專案部署上 Vercel 平台 - Modern Next.js Blog 系列 #03
- Published on
本文同步發佈於 it 邦幫忙 2022 iThome 鐵人賽
這篇文章會介紹 Vercel 架站平台、如何把 Next.js 專案部署上去、以及綁定 Github 實現持續部署。
內容如下：
- Vercel 架站平台介紹
- 將上一篇做完的 Next.js 空專案部署上 Vercel
- Vercel x Github CI/CD 持續部署
雖然我們啥都還沒開發，但先來部署網站吧！
通常來說「部署」是網站開發的最後一步。
但因為環境不同，在你電腦上跑得好好的網站，未必能在你選擇的架站平台上運作順利。
如果一次全部開發完再部署上去，最後發現架不起來，因為專案大了，要追查問題會比較困難，問題可能出在套件支援度、程式語言版本、或程式寫法等地方，任何地方！
如果你將開發的專案不需要非常保密的話，建議越早部署、打通部署流程越好。提早把部落格上線，並在開發過程中定期上來玩玩看，如果發現問題的話，就知道問題只會出現在最近幾個有修改的地方，能更快找到問題根源。
因此讓我們先把部落格部署上線吧！
Vercel：開發者體驗最棒的架站平台
Vercel 是開發 Next.js 的公司，他們也提供了同名的「Vercel」平台，能讓我們部署網站上去。
（文章後續講到 Vercel，都是指他們的架站平台。）
Vercel 平台支援所有主流前端框架部署，包含 Next.js、React.js、Vue.js、Nuxt.js、Anguer、Svelte、Hugo、Gatsby 等。
Vercel 也支援各種渲染類型的前端專案，包含打包完的純靜態網站、Client-side Rendering 網站、Server-side Rendering 網站、Serverless function。
最後 Vercel 也內建讓網頁讀取速度更快的 CDN，和串接 Github CI/CD 功能。
除開沒有資料庫（Database）功能，一個現代前端專案該有的功能，Vercel 都提供了。並且我們只需要專心寫 code 實現邏輯，剩下的架構、擴展性問題 Vercel 都會幫我們處理。
Vercel 費用（Pricing）也很佛心，個人非商業性專案，每月流量不超過 100GB 的話，正常使用是完全免費的，以個人部落格來說綽綽有餘。
總結來說 Vercel 對於部落格、Side Project 來說，是非常好的架站平台，開發者體驗極佳，不需要太多設定，未來即使要搬遷到其他平台也沒啥轉移成本，同一份 Code 重新部署上其他平台即可。
將 Next.js 專案部署上 Vercel
Code
上一篇文章我們在自己電腦上建立的基本 Next.js 專案，程式碼在 Github 上 Kamigami55/nextjs-tailwind-contentlayer-blog-starter repo 的 day02-init-nextjs branch，連結如下：
https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/tree/day02-init-nextjs
Vercel x Github CI/CD
Vercel 提供了 Github CI/CD 功能。CI/CD 指的是 Continuous Integration 持續整合、Continuous Deployment 持續部署，講人話就是自動把 code 部署成網站，不用按任何按鈕或下任何指令，超方便！
我們會使用這方式來自動部署網站。
將 Next.js 放上 Github
首先你需要將 Next.js 專案程式碼推上自己的 Github 帳號上，以我為例我是建成 Kamigami55/nextjs-tailwind-contentlayer-blog-starter repo。
註冊 Vercel 帳號
接著進到 Vercel 註冊頁面，使用 Github 帳號來註冊並登入，或是用其他方式註冊登入也行，但後續需要另外綁定 Github 帳號。
在 Vercel Dashboard 建立新專案，從 Github repo 建立
接著進到 Vercel Dashboard 頁面，按下右上角建立新專案按鈕（Add new... -> Project）：
下個畫面如果你的帳號跟 Github 綁定完了，就會看到所有 Github 專案列在這裡，選取你要部署的專案，按下「Import」按鈕：
再來做一些基礎設定，這邊不需要修改什麼，Vercel 都會自動偵測專案內容（使用的框架和打包指令等），直接按「Deploy」按鈕開始部署：
Vercel 就會開始部署你的專案了，過程約一分鐘：
等他跑完後，看到禮砲特效就代表部署成功了！
Vercel 會自動分配一個 XXX.vercel.app 的網域給你的專案，點選中間的大框框就可以瀏覽你的網頁了，恭喜你！
以我的專案為例，我的專案會自動被部署在這個網址上：
https://nextjs-tailwind-contentlayer-blog-starter.vercel.app/
Github CI/CD
還記得前面提過 CI/CD 嗎？當我們做完剛剛那套流程後，我們也完成 CI/CD 的設定了！未來當你 push code 到專案 repo 上時，Vercel 都會自動偵測到，並執行新一輪部署，將最新的 code 部署上去。
推到 main branch 時，新改動會被部署成 Production，給所有讀者使用。
而推到其他任何 branch 時，Vercel 則會部署成 Preview site，他會自動分配一個隨機網址給這個改動，並 Email 通知你，讓你能在上面測試改動是否符合預期。
所以未來我們幾乎不需要回到 Vercel Dashboard 做操作，或下任何指令。我們只需要開發完新功能，Push 上 Github，幾分鐘後就能在網站看到最新的改動了，非常方便！
小結＆下一篇
現在我們瞭解了 Vercel 架站平台，和把 Next.js 專案架設上去了，並且會根據 Github 最新的改動持續部署。
下一篇，我們會繼續改 Next.js 專案的 code，做一些 ESLint、Prettier、TypeScript 等基礎設定！