開發時常常遇到：需要讓他人預覽專案、卻又不便直接上傳至正式環境的需求。ngrok是一個方法，之前我有寫過，不過雖然用 ngrok 很方便，但 ngrok 本質上是將本地 Port 映射至公開網址，一旦電腦重啟、進入休眠或不慎關閉程式，連線就會中斷。所以缺點是它必須「一直開著」

因此更穩定的雲端預覽方案，還能順便檢查部署狀況、做後續的流量分析，那麼 Vercel 會是我優先首選!

(Vercel 雲端部屬的原因也讓他成為作品集的最佳首選!)

Vercel 是 Next.js的母公司，大家可以先去註冊一個Vercel帳號!

Vercel 的核心定位是 Serverless (無伺服器) 平台，主要針對前端 (Next.js, React) 和輕量級的 Function (Node.js, Python, Go)。

使用github、gitLab部屬Next.js

先來講講，如何透過GitHub來部屬到Vercel!

GitLaba部屬的操作大同小異!

我們先將程式碼上傳到GitHub，.next , node_module 這種設定檔不用上傳。

左下角的地方可以選擇 Repository ，在這邊選擇GitHub，Vercel會透過API取得你現在的專案，按下Import 後進入自動部屬頁面:

接著按下Deploy就好了!! 接著就會進入儀表板，其他操作之後會再介紹( 這篇主要著重在部屬 )

---

使用terminal部屬Next.js

接著來看看如果不想開發到一半還要離開編譯器，去瀏覽器設定的話 (又或者懶得Git操作)，我們可以直接透過終端機下指令來完成簡單的部屬!

首先，先安裝 Vercel CLI

npm i -g vercel

可以輸入 vercel --version 確認是否安裝成功。

如果是第一次在電腦上透過Terminal部屬，會需要先登入：(會跳到瀏覽器讓你驗證身分)

vercel login

接著連結專案，一路按 Enter 即可。(執行完會多一個 .vercel 資料夾)

vercel link

Step 3: 執行部屬

• 部屬到預覽環境 (Preview)： 這會產生一個隨機的測試網址，讓你檢查線上版本是否正常。

<code>vercel</code>Code language: HTML, XML (xml)

• 部屬到正式環境 (Production)： 當測試沒問題，加上 --prod 參數會更新到正式網域，就可以與別人分享了!!

<code>vercel --prod</code>Code language: HTML, XML (xml)