適逢今次 Hosting 到期，觸發我 migrate 到新平台的念頭，重新考慮使用一個成本效益更加高的 Hosting 方案。
AWS Amplify vs Cloudflare Pages#
AWS Amplify 和 Cloudflare Pages 都是非常受歡迎 Serverless 平台，以下先從兩者的功能和價格比較。
功能比較#
| 功能 | AWS Amplify | Cloudflare Pages |
|---|---|---|
| 部署方式 | CI/CD 自動部署，支援 GitHub、GitLab、Bitbucket | 直接連結 GitHub，支援自動部署 |
| 後端服務整合 | 支援 GraphQL API、認證、資料庫等全方位後端服務 | 主要聚焦前端部署，後端需搭配 Workers |
| 擴展性 | 高度擴展，適合大型應用 | 適合靜態前端及 JAMstack 方案 |
| 自動化建置 | 支援前端與後端建置流程 | 只針對前端建置，無內建後端服務 |
| 全球 CDN | 透過 AWS 網路提供全球快速加速 | Cloudflare 全球邊緣網路支持 |
| 自訂域名 | 支援且管理 | 支援且管理 |
| 原生 HTTPS | 免費自動配置 | 免費自動配置 |
價格比較#
| 項目 | AWS Amplify | Cloudflare Pages |
|---|---|---|
| 建置分鐘/建置次數 | 1000 分鐘免費/月（12 個月） | 500 次免費建置/月 |
| 超出建置價格 | 約 $0.01/分鐘 | 無直接超出費用，但超次需升級計劃 |
| 免費流量 | 15 GB/月（12 個月） | 無限制流量（公平使用政策） |
| 團隊成員 | 無限制 | 免費方案最多 5 位 |
| 記憶體限制 | 2 GB 起，最高 8 GB | 無官方公開限制 |
| 後端服務 | 需額外付費（如 API、認證） | 需搭配 Cloudflare Workers 等額外計費 |
如何 Deploy 到 AWS Amplify#
預備步驟#
- 創建 Git Repository - AWS Amplify 支援 GitHub, BitBucket, AWS CodeCommit, GitLab 這些供應商
- 在開發環境設定 Git Repository
- 建立 Hugo 網站
- 把 Source Code Push 到你的 Repository
- 創建 AWS 帳戶
步驟#
準備好上述預備步驟之後，就可以開始設定。完成設定後，就會開啟 CD (Continuous Deployment)，每當有新 Commit，AWS Amplify 就會幫你 Build 和 Deploy 新版本。不論 GitHub, BitBucket, AWS CodeCommit, GitLab， 步驟大致都是相同。
1. 設定 Amplify pipeline#
在目錄中建立一個名為 amplify.yml 的檔案
touch amplify.yml
2. 複製並貼到 amplify.yml 中#
這個 Amplify pipeline 會做以下步驟：
- 在 CI 裡用指定版本安裝 Dart Sass、Go、Hugo
- 如果有 package-lock.json / npm-shrinkwrap.json，就用 npm ci 安裝 Node dependencies
- 用 hugo –gc –minify build 靜態網站到 public/。
- 把 public/ 當作部署 artifact，同時 cache Hugo / NPM 的 cache 以加速後續 build。
可以根據要求更新 Hugo, Go 版本和時區。
version: 1
env:
variables:
# Application versions
DART_SASS_VERSION: 1.93.2
GO_VERSION: 1.25.3
HUGO_VERSION: 0.152.2
# Time zone
TZ: Asia/Hong_Kong
# Cache
HUGO_CACHEDIR: ${PWD}/.hugo
NPM_CONFIG_CACHE: ${PWD}/.npm
frontend:
phases:
preBuild:
commands:
# Create directory for user-specific executable files
- echo "Creating directory for user-specific executable files..."
- mkdir -p "${HOME}/.local"
# Install Dart Sass
- echo "Installing Dart Sass ${DART_SASS_VERSION}..."
- curl -sLJO "https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
- tar -C "${HOME}/.local" -xf "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
- rm "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
- export PATH="${HOME}/.local/dart-sass:${PATH}"
# Install Go
- echo "Installing Go ${GO_VERSION}..."
- curl -sLJO "https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz"
- tar -C "${HOME}/.local" -xf "go${GO_VERSION}.linux-amd64.tar.gz"
- rm "go${GO_VERSION}.linux-amd64.tar.gz"
- export PATH="${HOME}/.local/go/bin:${PATH}"
# Install Hugo
- echo "Installing Hugo ${HUGO_VERSION}..."
- curl -sLJO "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
- mkdir "${HOME}/.local/hugo"
- tar -C "${HOME}/.local/hugo" -xf "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
- rm "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
- export PATH="${HOME}/.local/hugo:${PATH}"
# Verify installations
- echo "Verifying installations..."
- "echo Dart Sass: $(sass --version)"
- "echo Go: $(go version)"
- "echo Hugo: $(hugo version)"
- "echo Node.js: $(node --version)"
# Install Node.js dependencies
- echo "Installing Node.js dependencies..."
- "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci --prefer-offline || true"
# Configure Git
- echo "Configuring Git..."
- git config core.quotepath false
build:
commands:
- echo "Building site..."
- hugo --gc --minify
artifacts:
baseDirectory: public
files:
- '**/*'
cache:
paths:
- ${HUGO_CACHEDIR}/**/*
- ${NPM_CONFIG_CACHE}/**/*
3. 把 amplify.yml commit 到你的 Repository#
可以用你喜愛的 GUI Git Client, 例如 SourceTree, Fork 等等。也可用以下 Command commit amplify.yml 檔案。
git add -A
git commit -m "Create amplify.yml"
git push
4. 登入 AWS Console，找 Amplify 開始 Deploy#
可以選擇一個鄰近你/客戶的 Region，我會選擇香港 (ap-east-1)。然後選擇 “Deploy an app”。
5. 選擇你的 Repository 供應商#
如果你沒有用 Git, 也可以把你的 Build 好的 Code，zip 好直接上載或放到 S3。
6. AWS Amplify 會要求你登入提供授權#
7. 提供授權後，選擇你的 Repository 和 Branch#
8. 驗證 App Settings#
之前設定了 amplify.yml，AWS Amplify 會讀取以上檔案。Deploy 時會用以下 Command build 到 public 資料夾。
hugo --gc --minify
也可查看一下 Build Instance type，因為 AWS Amplify 的 Build 是按分鐘收費，如果你的 App 需要一個更高效能環境，請選擇一個合適的以減少 Build 時間。
9. Review 所有設定#
Review 一下資料是否正確，完成後可以開始 “Save and Deploy”
Deploying!
10. 網站成功 Deploy 後，會生成一條預設 URL#
網站已經通過 URL Deploy 到互聯網，而已預設 URL 已經提供了基本 SSL 憑證，為你的網站提供保障。
後記#
你也可以把自訂網域，透過 AWS Route 53 把其綁定到 AWS Amplify 的網站。AWS Amplify 也提供了便捷的步驟，協助你生成 SSL Certificate 和更新 DNS 的記錄。
AWS Amplify 也提供額外付費的防火牆功能，幫你開啟 AWS WAF，為你的網站提供保護，免受攻擊而招致損失。
AWS Amplify 提供了便捷的步驟，令你可以快速把網站發佈。下一篇文章，會嘗試利用 Cloudflare Pages 把網站發佈，再比較一下兩者實際的優點缺點。