iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

從零開始學習 Next.js系列 第 17

Day17 - 把 Next.js 部署到 Vercel 上吧!

  • 分享至 

  • xImage
  •  

部署至 Vercel

Vercel 是一個定位在部署前端應用的雲端平台,除了 Next.js 以外,也支援了現今許多常見的前端框架,例如 Nuxt.js、Svelte、Angular 等,而且也可以用來部署靜態頁面,例如 Gatsby.js、Hugo 等。

vercel 支援的框架

將部署同步 Git 環境

想一起動手的讀者,可以直接 clone 這個 repo https://github.com/leochiu-a/next-deploy-test

現今 Vercel 提供了三種 Git 環境的選項,分別是 GitHub、GitLab、Bitbucket,不論 repo 是公有或是私有,都可以透過 Vercel 授權推上至 git 的專案。

在將專案推上至一個 git 的雲端環境後,可以在 Vercel 中點擊「import」選擇該專案的 repo:

import git repo

開始部署前,有些選項可以設置,像是專案的名稱、將部署的專案框架,以及在部署時使用的指令、環境變數等。因為我們使用的專案很單純,基本上除了專案名稱之外,都可以選擇不用做任何的變動,就可以點擊「Deploy」開始部署 Next.js 的應用程式了。

configure project

因為是一個簡單的應用,所以部署到 Vercel 上的速度非常地塊,僅僅只需要 1 分鐘以內就可以完成部署,在第一次部署體驗上算是相當不錯。

deploying

筆者很久沒有開新的 GitHub 專案了,這次在部署的時候才發現預設的 branch 已經從 master 變成 main,去年 2020 年的時候有聽說這個消息,但後來一直沒跟進這個消息後來的結果,現在看到也算是耳目一新。

Vercel 也有跟進這個更名,在專案的部署設定也有提到將 main branch 作為預設 production branch,如果想要修改也可以進入到設定中修改,像是許多舊有的專案仍然還是用 master 做為 production branch,不用擔心不能順利部署的問題。

DPS: Develop, Preview, Ship

在官方文件中還有提到「DPS」這個 Vercel 提出的概念:

  • Deploy 指的是在部署至 Vercel 的時候,既有的 server 仍然會繼續運行,而在部署成功之後會經由 React Fast Refresh 的優點更新網站。
  • Preview 指的是在 git push 後,在每一個 branch,每一個 pull request 都可以部署一個 preview app,Vercel bot 會留下一個已經部署的 url,你的團隊就可以即時的討論剛才的修改。
  • Ship 的概念其實就是 CI/CD,在推送至特定的 branch 後,就會即時的觸發部署流程。

接下來我們來實驗看看,使用已經上面已經部署至 Vercel 的 repo,在這個 repo 中新建立一個 branch,並且推送一個 commit,然後創建 pull request。創建完畢後,在 pull request 的下方可以看到 Vercel 正在為這個 commit 部署一個 preview app。

deploy in pull request

在部署完之後,Vercel bot 就會在留言中留下已經部署完畢的連結,以及 vercel 中關於這次部署的相關訊息的連結,在 review PR 的人就可以透過這個連結即時地瀏覽修改的部分,能夠減少需要將 remote branch 拉下來至本地端運行的過程,能夠增加團隊協作的效率。

deploy url

順帶一提,現在關於 preview 的方式越來越方便,GitHub 在近期也推出了 codespace 的服務,可以直接在 GitHub 上面用 vscode review PR,甚至開 preview app,真的是非常酷 XD

除了技術面之外

除了技術面之外,順帶一提 Vercel 這家公司,它成立於 2015 年,目前公司的募資進度已經到了 C 輪,在 C 輪總共募資了 102 M 美金,相當於 29 億台幣左右,總募資金額有 163M 美金,Vercel 的未來是非常值得期待的。

常見部署網頁應用在 AWS、GCP、Azure 上,現今又多了一種選擇,如果未來有單純部署前端應用的需求,也許可以考慮部署在 Vercel 上。

Reference


上一篇
Day16 - 在 Next.js 做 JWT 驗證,使用既有的 Backend API - PART 2
下一篇
Day18 - 如何在頁面中預先載入其他的頁面 (prefetch)
系列文
從零開始學習 Next.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言