Share This Post

簡介

Untitled

<aside> <img src=”/icons/username_blue.svg” alt=”/icons/username_blue.svg” width=”40px” /> “Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.” 「Vercel 是前端開發人員的平台,提供創新者在靈感迸發時所需的速度和可靠性。」

</aside>

看到這標語應該猜到這平台是作什麼用的了吧。

Vercel 是個平台即服務(PAAS)平台,提供前端開發者預覽及部屬前端網站。

Develop

Untitled

Vercel 可以隨時部屬,不管是從本地上傳,或是整合到 Git,都能自動部屬一個網頁成品出來。

Vercel 支援超過 30 種框架

Vercel 支援超過 30 種框架

Vercel 支援現在主流的框架,並且會自動偵測,如果偵測錯誤也可以修改。就算不是常見框架,也可以自訂部屬時需要的動作(如:編譯 css)。

Vercel 會自動偵測前端框架

Vercel 會自動偵測前端框架

Preview

Untitled

Vercel 能就開發中的前端程式部屬預覽版本,隨時觀察小組協作專案的任何變更。

Untitled

透過 Git 整合,每個分支都能自動產出預覽版

Untitled

此外現在可以就預覽版本新增留言,加速完成專案。

Untitled

Ship

Untitled

Vercel 除了部屬預覽版本外,也能部屬線上公開版本,也就是 Production。便能讓網站隨時上線,在任何地方都能存取,也可以隨時追中狀態。

使用

要建立部屬其實非常簡單,但是在這之前需要有個帳號,個人帳號是免費的。

註冊

Untitled

Vercel 支援透過三大 Git 平台登入,當然也能選擇使用帳號密碼登入。

註冊完會直接進入建立專案頁面,如果使用 GitHub 註冊可能會觸發快顯封鎖,將快顯視窗開啟即可綁定 GitHub Repo。詳細建立方法:與 GitHub 整合

CLI 使用

接著我們先透過 CLI 部屬一個專案。

<aside> ⚠️ 系統需求:已安裝 Node.js 16 以上

</aside>

<aside> 👉 這次的主體主要以前端為主,因為 Vercel 是個 Serverless 平台,要推送後端什麼的,需要改寫程式碼讓他有 Serverless function,這部分會比較複雜,不在本次分享範圍內,有興趣的可以參考官方文件。

Using the Node.js Runtime with Serverless Functions

Using Express.js with Vercel

</aside>

<aside> 💡 我們以 Vue 專案為例,並假設我們已經有一個 Vue 專案:

可以參考官方文件建立專案

Quick Start | Vue.js

</aside>

到專案資料夾開啟終端機:

  1. 安裝 Vercel CLI npm i -g vercel
  2. 開始部屬到 Vercel 上 vercel 接著他會要你登入,使用你的帳號登入即可 Untitled 接著會問你一連串問題,包括要建的 Team、專案名稱、並且根據偵測到的框架設定一些指令。 Untitled <aside> 💡 第一次用 CLI 部屬的會是 Production 版本,當網頁有更新,可以再打一次 vercel 指令部屬,不過部屬出來的會是 Preview 版,若要更新 Production,則需改用 vercel --prod 指令部屬。 </aside> 回到 https://vercel.com/dashboard ,你就會發現你剛剛部屬的網站 Untitled 按一下右上角的箭頭可以直接瀏覽網頁