甚麼是vercel? – 深度分析

By /

什麼是 Vercel？從概念到實作的全面教學

引言

在現代網頁開發的世界中，速度、效率和開發者體驗 (Developer Experience) 變得越來越重要。前端開發者不再僅僅關注撰寫程式碼，更需要一個能夠快速部署、自動擴展並提供優異性能的平台。Vercel 正是為了解決這些痛點而生。

Vercel 是一個為前端應用程式而設計的雲端平台，它以其「無縫部署」、「全球邊緣網路」和「無伺服器功能」等特性，徹底改變了開發者建立、部署和擴展網頁專案的方式。無論您是開發個人部落格、企業網站還是複雜的單頁應用程式 (SPA)，Vercel 都能提供一個極其流暢且強大的解決方案。

本文將帶您深入了解 Vercel 的核心概念、運作原理，並透過一個循序漸進的實作範例，引導您將自己的專案部署到 Vercel，親身體驗其帶來的便利與高效。

Vercel 是什麼？深入了解核心概念

Vercel 的定義與願景

Vercel 自稱為「前端雲端平台 (The Frontend Cloud)」，它的核心願景是讓開發者能夠專注於創造優秀的產品，而將部署、擴展和維護等繁瑣的基礎設施工作交給平台處理。它特別針對現代前端框架（如 Next.js、React、Vue、Svelte 等）進行了優化，並深度整合了無伺服器功能 (Serverless Functions)，使前端開發者也能輕鬆處理後端邏輯。

簡而言之，Vercel 是一個：
* 部署平台：將您的網頁應用程式部署到全球網路。
* 開發工具：提供優化開發工作流程的工具，如 Vercel CLI。
* 效能加速器：透過全球 CDN 和邊緣運算，確保您的網站快速載入。

Vercel 的核心特色與優勢

Vercel 之所以受到廣大開發者的青睞，得益於其一系列強大且獨特的特性：

  1. 自動化部署 (Automatic Deployments)

    • Git 整合：與 GitHub、GitLab 和 Bitbucket 無縫整合。當您推送程式碼到指定分支時，Vercel 會自動觸發建置 (Build) 和部署流程。
    • 預覽部署 (Preview Deployments)：對於每個分支或拉取請求 (Pull Request)，Vercel 都會自動建立一個獨立的預覽 URL，方便團隊成員檢視和測試，而不會影響正式環境。
    • 即時回滾 (Instant Rollbacks)：如果新的部署出現問題，您可以隨時一鍵回滾到先前的版本。

  2. 全球邊緣網路 (Global Edge Network)

    • Vercel 擁有遍布全球的內容傳遞網路 (CDN)。您的網站內容會被快取在離用戶最近的伺服器上，大大減少延遲，提升載入速度和用戶體驗。
    • 這對於靜態資產、圖片和預先渲染的頁面尤其有效。

  3. 無伺服器功能 (Serverless Functions)

    • 允許您在 Vercel 平台上部署輕量級的後端程式碼（通常是 Node.js, Python, Go, Ruby 等），無需管理伺服器。這些功能只在被請求時執行，並按實際使用量計費。
    • 與您的前端應用程式緊密整合，非常適合 API 路由、資料庫查詢、認證等後端任務。

  4. 零配置 (Zero Configuration)

    • Vercel 能夠自動偵測您的專案所使用的前端框架（如 Next.js, React, Vue, Svelte, Angular 等），並自動配置建置命令和部署設定，大大簡化了部署流程。

  5. 開發者體驗 (Developer Experience, DX)

    • Vercel CLI：提供強大的命令列工具，讓您在本地開發環境中模擬 Vercel 的生產環境，並直接從終端機部署。
    • 自訂網域：輕鬆設定和管理您的自訂網域，並自動配置 SSL 憑證。

  6. 內建優化 (Built-in Optimizations)

    • 自動壓縮、圖片優化、智能快取策略等，無需手動配置，即可獲得最佳性能。

Vercel 如何運作？

了解 Vercel 的運作原理，能幫助我們更好地利用這個平台。

部署流程概覽

Vercel 的部署流程可以概括為以下幾個步驟：

  1. 程式碼推送 (Code Push)：開發者將程式碼推送到 Git 儲存庫（如 GitHub）。
  2. Vercel 偵測 (Vercel Detection)：Vercel 透過 Git 整合，監聽到程式碼變更。
  3. 建置 (Build)：Vercel 根據專案類型和配置，執行建置命令（例如 npm run build），將原始碼轉換為可部署的靜態資產和無伺服器功能。
  4. 部署 (Deployment)：建置完成的內容會被部署到 Vercel 的全球邊緣網路。靜態檔案會分發到 CDN 節點，無伺服器功能則會部署為可按需執行的 Lambda 函數。
  5. 提供服務 (Serving)：當用戶請求您的網站時，Vercel 會從離用戶最近的邊緣節點提供內容，確保極致的速度。如果請求的是無伺服器功能，則會觸發其執行並返回結果。

Vercel 與其他平台比較 (簡述)

  • 與 Netlify：Vercel 和 Netlify 在許多方面非常相似，都是專為前端和 Jamstack 應用設計的平台。主要差異可能在於對特定框架（如 Vercel 對 Next.js 的深度優化）以及一些進階功能和定價策略上。
  • 與傳統雲端服務 (如 AWS S3/CloudFront, Google Cloud Storage/CDN)：傳統雲端服務提供更底層、更靈活的基礎設施，但通常需要更多的配置和管理工作。Vercel 則將這些複雜性抽象化，提供一個更簡潔、更自動化的部署體驗，特別適合前端開發者。
  • 與 Heroku/Render 等 PaaS 平台：這些平台提供更全面的應用程式託管，包括資料庫、後端服務等。Vercel 則更專注於前端和無伺服器功能，但在整合外部資料庫或第三方 API 方面也表現出色。

實作範例：部署你的第一個網站到 Vercel

現在，讓我們動手將一個簡單的網頁專案部署到 Vercel。

步驟 1: 建立一個簡單的網頁專案

首先，我們需要一個專案來部署。為了簡單起見，我們將建立一個最基本的靜態 HTML 網站。

  1. 建立專案資料夾：
    在您的電腦上建立一個新資料夾，例如 my-first-vercel-app。

  2. 建立 index.html 檔案：
    在 my-first-vercel-app 資料夾內，建立一個 index.html 檔案，並填入以下內容：

    html
    <!DOCTYPE html>
    <html lang="zh-TW">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個 Vercel 網站</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f2f5;
    color: #333;
    }
    .container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    }
    h1 {
    color: #0070f3;
    margin-bottom: 20px;
    }
    p {
    font-size: 1.1em;
    line-height: 1.6;
    }
    .vercel-logo {
    width: 100px;
    margin-top: 30px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <h1>哈囉，Vercel！</h1>
    <p>這是我透過 Vercel 部署的第一個網站。</p>
    <p>部署成功，世界你好！</p>
    <img src="https://assets.vercel.com/image/upload/v1672323862/front/favicon/vercel/512.png" alt="Vercel Logo" class="vercel-logo">
    </div>
    </body>
    </html>

  3. 初始化 Git 儲存庫：
    打開您的終端機或命令提示字元，進入 my-first-vercel-app 資料夾，並執行以下 Git 命令：

    bash
    git init
    git add .
    git commit -m "Initial commit: My first Vercel app"

步驟 2: 將專案上傳至 Git 儲存庫 (GitHub)

Vercel 透過 Git 儲存庫來管理您的專案。我們將使用 GitHub 作為範例。

  1. 建立 GitHub 儲存庫：
    前往 GitHub 並登入。點擊右上角的「+」號，選擇「New repository」。

    • Repository name (儲存庫名稱): 例如 my-first-vercel-app
    • Description (描述): 可選
    • Public (公開) 或 Private (私人): 選擇 Public 方便示範
    • 不要勾選「Add a README file」或「Choose a license」，因為我們已經有本地檔案了。
      點擊「Create repository」。

  2. 將本地專案推送到 GitHub：
    在 GitHub 頁面建立儲存庫後，您會看到一些指令。將您的本地專案推送到這個新的 GitHub 儲存庫：

    bash
    git remote add origin https://github.com/您的用戶名/my-first-vercel-app.git
    git branch -M main
    git push -u origin main
    (請將 您的用戶名 替換為您的 GitHub 用戶名)

步驟 3: 註冊並登入 Vercel 帳號

  1. 前往 Vercel 網站：
    開啟瀏覽器，前往 vercel.com。

  2. 註冊/登入：
    點擊右上角的「Sign Up」或「Log In」。
    強烈建議使用 GitHub 帳號 進行註冊或登入，因為這將大大簡化後續的專案匯入流程。按照指示完成授權。

步驟 4: 匯入 Git 專案並部署

登入 Vercel 後，您會進入 Vercel Dashboard。

  1. 新增專案：
    在 Dashboard 頁面，點擊「Add New...」按鈕，然後選擇「Project」。

  2. 匯入 Git 儲存庫：
    Vercel 會列出您的 Git 儲存庫。找到您剛剛建立的 my-first-vercel-app 儲存庫，點擊「Import」。

    • 如果沒有看到您的儲存庫，可能需要點擊「Configure GitHub App」來授權 Vercel 存取更多儲存庫。

  3. 配置專案設定 (零配置)：
    Vercel 會自動偵測這是一個靜態 HTML 網站。

    • Project Name (專案名稱): 預設會是您的儲存庫名稱，您可以修改。
    • Root Directory (根目錄): 如果您的 index.html 不在儲存庫的根目錄，您可以在這裡指定。對於我們的範例，保持空白即可。
    • Build and Output Settings (建置和輸出設定): 對於靜態 HTML 專案，Vercel 通常不需要特別的建置步驟，它會直接將檔案作為靜態內容處理。您可以保持預設。
    • Environment Variables (環境變數): 此範例不需要。

    確認設定無誤後，點擊「Deploy」按鈕。

  4. 等待部署完成：
    Vercel 會開始建置和部署您的專案。您會看到一個實時的部署日誌。整個過程通常只需要幾秒鐘到一分鐘。

  5. 部署成功！：
    部署成功後，您將會看到一個「Congratulations!」頁面，並顯示您的專案的預覽圖和一個自動生成的 URL (例如 my-first-vercel-app-xxxx.vercel.app)。

步驟 5: 查看部署結果與設定

  1. 訪問您的網站：
    點擊成功頁面上的「Visit」按鈕或直接複製 URL 到瀏覽器中，您將看到您剛剛部署的「哈囉，Vercel！」網頁。

  2. Vercel Dashboard：
    回到 Vercel Dashboard，您的專案現在會列在「Projects」下方。點擊專案名稱，您可以查看專案的詳細資訊：

    • Overview (概覽)：顯示最近的部署、預覽 URL、生產 URL 等。
    • Deployments (部署)：列出所有歷史部署，您可以查看每次部署的日誌，並可以輕鬆地回滾到任何一個舊版本。
    • Domains (網域)：在這裡您可以新增自訂網域，例如將您的網站從 my-first-vercel-app-xxxx.vercel.app 更改為 my-awesome-site.com。Vercel 會自動為您處理 SSL 憑證。
    • Settings (設定)：配置專案的各種進階設定，例如 Git 整合、環境變數、建置命令等。

恭喜您！您已經成功將第一個網站部署到 Vercel 了。現在，每次您向 GitHub 儲存庫的 main 分支推送新的程式碼時，Vercel 都會自動重新部署您的網站。

Vercel CLI：本地開發與部署的利器

Vercel CLI (Command Line Interface) 是 Vercel 提供的命令列工具，它讓您能夠在本地環境中模擬 Vercel 的生產環境，並直接從終端機進行部署和管理。

安裝 Vercel CLI

您可以使用 npm 或 yarn 全域安裝 Vercel CLI：

npm install -g vercel
# 或者使用 yarn
# yarn global add vercel

登入 Vercel CLI

安裝完成後，您需要登入您的 Vercel 帳號：

vercel login

這會要求您輸入電子郵件地址。Vercel 會發送一封驗證郵件到您的信箱，點擊郵件中的連結即可完成登入。

本地開發伺服器

Vercel CLI 最強大的功能之一是 vercel dev 命令，它允許您在本地運行專案，並模擬 Vercel 的生產環境，包括無伺服器功能。

進入您的專案資料夾 (my-first-vercel-app)，然後執行：

vercel dev

這會在本地啟動一個開發伺服器（通常是 http://localhost:3000），您可以在瀏覽器中預覽您的網站。對於更複雜的 Next.js 或 React 專案，vercel dev 也會自動啟動它們的開發伺服器，並處理無伺服器功能的模擬。

從 CLI 部署

您也可以直接從終端機部署您的專案：

進入您的專案資料夾，然後執行：

vercel

如果這是您第一次從這個資料夾部署，Vercel 會詢問您一些問題，例如是否要連結到一個現有的專案，或者建立一個新專案。按照提示操作，您的專案將會被部署到 Vercel。

Vercel CLI 32.3.0
? Set up and deploy “~/my-first-vercel-app”? [Y/n] Y
? Which scope do you want to deploy to? (your-username)
? Link to existing project? [y/N] N
? What's your project's name? my-first-vercel-app
? In which directory is your code located? ./
...

部署完成後，CLI 會輸出部署的 URL。

總結

Vercel 為現代前端開發提供了一個強大、高效且極具開發者友善的平台。透過其自動化部署、全球邊緣網路、無伺服器功能以及零配置的特性，Vercel 讓開發者能夠擺脫繁瑣的基礎設施管理，將精力集中在創造優質的用戶體驗上。

從一個簡單的靜態網站到複雜的 Next.js 應用程式，Vercel 都能提供無縫的部署和卓越的性能。透過本文的介紹和實作範例，您應該已經對 Vercel 有了深入的理解，並成功地部署了您的第一個網站。

隨著您對 Vercel 的熟悉，您可以進一步探索其更多功能，例如自訂網域、環境變數、無伺服器 API 路由等，將您的網頁專案提升到新的高度。Vercel 不僅是一個部署工具，更是現代前端開發工作流程中不可或缺的一部分。

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top