部署到
全世界

部署到底是什麼？

你寫好的網站在你電腦跑得很開心，但全世界的人怎麼看到？要把它放到一台24 小時開著的電腦（伺服器），給網域名稱（第 12 章），讓使用者輸入網址就能連到。

三大部署模式

• 靜態：HTML/CSS/JS 上 CDN，免費、超快、夠用 80% 場景
• Serverless：每次請求才執行函式，按用量計費
• 傳統 Server：跑一個常駐程式，租 VPS 或 PaaS

各家部署平台比較

Vercel（5 分鐘上線）

1. 把專案推到 GitHub
2. 到 vercel.com，登入 GitHub
3. Import 你的 repo
4. 確認框架（自動偵測 Next.js / Vite / Vue）
5. 填環境變數（DATABASE_URL 等）
6. Deploy → 1 分鐘後拿到 xxx.vercel.app

之後每次 git push 自動部署。PR 會自動生 preview URL。

自訂網域

• Settings → Domains → 加入 yourdomain.com
• 到網域商加 CNAME 指向 cname.vercel-dns.com
• SSL 證書 Vercel 自動申請（Let's Encrypt）

Zeabur：台灣的雲端

Zeabur 對 Vercel 的痛點下手——支援任何框架（Vercel 偏 Next）、有正式東京區、價格便宜、繁中支援、小團隊有真人客服。

什麼可以放

• Next.js / Nuxt / Astro / 任何前端
• Node / Python / Go / Rust 後端
• PostgreSQL / Redis / MongoDB（一鍵部署）
• 任何 Docker image
• 靜態站

部署流程

1. 到 zeabur.com 登入 GitHub
2. 建 Project → 選 Region（東京）
3. Add Service → 從 GitHub 選 repo
4. 設環境變數
5. 網域 Tab：用 xxx.zeabur.app 或綁自訂網域

放後端 + DB 的範例

同個 Project 裡開三個 Service：

• Service A：Next.js 前端
• Service B：Express API
• Service C：PostgreSQL（template 一鍵）

內部用 service name 互相連線，不走外網。

Cloudflare Pages

Cloudflare 把 200+ 城市的邊緣節點開放給你免費跑網站。頻寬無限、請求無限、build 500 次 / 月。

適合場景

• 靜態網站（行銷頁、文件、部落格）
• 用 Workers 寫超輕量 API
• 大流量、想省錢

部署

1. 登入 Cloudflare → Workers & Pages → Create Project
2. 連 GitHub repo
3. 選框架（自動偵測）
4. 設環境變數、build command（npm run build）、輸出目錄（dist / .next）
5. Save and Deploy

Cloudflare Workers（serverless function）

// functions/api/hello.ts
export async function onRequest(ctx) {
  return new Response(JSON.stringify({ hi: 'world' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Cloudways：託管 VPS

Vercel、Zeabur 是 PaaS（你只管 code）。Cloudways 比較像「半托管 VPS」——你選 DigitalOcean / AWS / GCP，它幫你裝 LAMP / LEMP，你直接上 WordPress / Laravel。

適合場景

• WordPress 客戶網站（90% 接案會遇到）
• 需要 PHP（Laravel）的專案
• 想要固定資源不被流量罰

價格

• $11/月 起（DigitalOcean 1GB）
• 包含：自動備份、SSL、CDN、staging、防火牆

Docker 入門

Docker 把你的 app 打包成一個「容器」，可以在任何地方一致地跑。

# Dockerfile
FROM node:20-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]

docker build -t my-app .
docker run -p 3000:3000 my-app

# docker-compose.yml：一次跑多個服務
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgres://db/app
    depends_on:
      - db
  db:
    image: postgres:16
    environment:
      POSTGRES_PASSWORD: secret
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

docker compose up -d

環境變數與 secrets

• 本地：.env 檔（加進 .gitignore）
• 正式：到部署平台後台設
• NEXT_PUBLIC_*：在前端可讀。不要放敏感資料！

CI/CD：push 即部署

GitHub Actions 範例（push 到 main 自動跑測試）：

# .github/workflows/ci.yml
name: CI
on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint
      - run: npm test
      - run: npm run build

Vercel / Zeabur / CF Pages 都自動 push 部署，不用自己寫 CI 部署。GitHub Actions 用來跑測試、lint、安全掃描。