AWS Amplify 教程（2026 最新）：前端全栈部署实战，从 Git 提交到全球 CDN 上线全流程

Meta Description: AWS Amplify 深度实战教程，含 Git 自动部署、amplify.yml 构建设置、CLI 手动部署、自定义域名与免费 HTTPS、SSR 服务端渲染、区域选择、2026 最新价格对比表（构建/存储/流量/SSR）、省钱 5 招与 7 大坑，解答国内访问、免费额度、Amplify vs S3+CloudFront 选型等常见问题。

> 关键词： AWS Amplify、Amplify Hosting 教程、AWS 前端部署、Next.js 部署 AWS、amplify.yml、AWS 静态网站托管、Amplify 价格、Amplify 自定义域名、SSR 部署、AWS 免费套餐

前言

一句话结论：Amplify Hosting 是 AWS 的"前端 Vercel"——你把代码推到 GitHub，它自动构建、自动部署、自动发 HTTPS 证书、自动挂到全球 CDN 上；花钱只花在"构建分钟数 + CDN 流量 + SSR 请求"三件事上，且所有区域价格统一。

先记住这条决策口诀，全文都在解释它：

> 纯静态站、要极致省钱 → S3 + CloudFront；要 Git 一键部署、要预览环境、要 SSR → Amplify Hosting；只是练手 → 用它自带的免费额度。

很多国内开发者对 AWS 的印象停在"EC2 又要配安全组又要装 Nginx，太麻烦"。但如果你的产品是 React / Vue / Next.js / Nuxt 这类前端项目，你根本不需要碰 EC2——Amplify Hosting 把 CI/CD、CDN、SSL 证书、环境变量、分支预览这些事全包了，整个上线流程可以压缩到 10 分钟以内。

这篇文章按"是什么 → 怎么部署 → 怎么配域名 → 怎么算钱 → 怎么避坑"的顺序写，每一步都给控制台描述和命令行，你可以边看边做。

一、Amplify 到底是什么：Hosting / CLI / Studio 三件套

很多人第一次看 AWS Amplify 会被官方文档绕晕，因为"Amplify"其实是一组产品的统称：

| 组件 | 作用 | 是否额外收费 | |------|------|--------------| | Amplify Hosting | 全托管前端托管：CI/CD + CDN + HTTPS + SSR 运行时 | 收费（本文重点） | | Amplify CLI | 本地命令行工具，生成后端配置、手动部署 | 工具免费 | | Amplify Studio | 可视化配置后端（Auth/Data/函数），给非开发者用 | 工具免费 | | Amplify 库 | 前端 SDK（React/Vue/Next.js 等） | 开源免费 |

关键点：CLI、Studio、SDK 本身一分钱不收，你只为它们背后调用的 AWS 服务付费（Cognito、AppSync、DynamoDB、Lambda、S3 等）。而真正让账单动起来的，通常是 Amplify Hosting 这一层。

所以本文聚焦 Hosting——它是把"代码变成能访问的网站"的那一环。

1.1 Amplify Hosting 能做什么

- Git 自动部署：连接 GitHub / GitLab / Bitbucket / AWS CodeCommit，推一次代码就自动构建上线 - 分支即环境：主分支进生产，dev 分支自动生成独立预览地址 - 免费 HTTPS：自动签发 ACM 证书，且支持泛域名（wildcard），主域名和所有子域名共用一张证书 - 自定义域名：域名在 Route 53 上可以一键接入，第三方注册商按提示改 DNS 也行 - SSR 服务端渲染：原生支持 Next.js、Nuxt.js、Astro.js、SvelteKit - 重定向与重写：控制台里配置 301/302、自定义 404、反向代理到外部服务 - 访问保护：每个分支可以开基础用户名密码认证，方便给客户/内部同事演示 - 环境变量加密存储：默认对所有分支生效，不用一个个分支重填

1.2 Amplify Hosting vs S3+CloudFront vs 第三方平台

这是国内开发者问得最多的问题，直接上对比表：

| 对比维度 | Amplify Hosting | S3 + CloudFront | Serverless 平台（Vercel/Netlify 类） | |----------|-----------------|-----------------|--------------------------------------| | 上手难度 | 低，连仓库即可 | 中，要配 OAC、缓存、错误页 | 极低 | | 自动 CI/CD | ✅ 内置 | ❌ 需自己接 CodePipeline 或 GitHub Actions | ✅ 内置 | | 分支预览环境 | ✅ 自动生成 | ❌ 手工建桶 | ✅ | | 免费 HTTPS + 泛域名 | ✅ 自动 | ✅ 需自行申请 ACM + 配置 | ✅ | | SSR 支持 | ✅ 支持四大框架 | ❌ 只能静态 | ✅ | | 计费粒度 | 构建分钟 + CDN 流量 + SSR 请求 | S3 存储 + 请求 + CloudFront 流量 | 按会员套餐（$20/月 起常见） | | 低流量成本 | 很低（可用免费额度覆盖） | 最低 | 套餐制，低流量不划算 | | 高流量成本 | 流量 $0.15/GB 偏贵 | CloudFront 阶梯价更便宜 | 套餐外按 GB 叠加 | | 国内访问 | 看区域（选香港/东京更近） | 看 CloudFront 边缘节点 | 通常被墙或绕行 | | 后端集成 | ✅ 原生接 Cognito/DynamoDB | ❌ 需自行拼装 | 部分支持 | | 适合谁 | 前端团队要效率 | 极致控成本、大流量静态站 | 海外团队、不介意月费 |

一句话选型：要"省心 + SSR"选 Amplify；要"把钱花到极致"选 S3+CloudFront；怕 AWS 学习成本的海外项目可以先用第三方平台。

1.3 区域可用性：选香港还是东京？

Amplify Hosting 在北美、欧洲、亚太、南美多个区域都有端点，价格在所有区域完全一致，所以选区域的唯一标准就是"离用户近不近"。亚太可选的主要区域：

| 区域代码 | 位置 | 国内访问体验参考 | |----------|------|------------------| | ap-east-1 | 中国香港 | 距离最近，延迟通常最低 | | ap-northeast-1 | 日本东京 | 华东/华北用户友好 | | ap-northeast-2 | 韩国首尔 | 北方用户较优 | | ap-southeast-1 | 新加坡 | 东南亚 + 华南用户 | | ap-southeast-2 | 澳大利亚悉尼 | 大洋洲用户 | | us-east-1 | 美国弗吉尼亚 | 功能最全、新特性首发 |

> 提示：Amplify 控制台里的服务区域是创建 App 时选定的，建完不能改。 主要服务国内用户就优先 ap-east-1（香港），服务东南亚用户选 ap-southeast-1。区域选错不会多花钱，但会白白多几十毫秒延迟。

二、实战一：从 Git 仓库部署第一个应用（10 分钟）

这是最推荐的路径，全程在控制台点几下。

前置条件：一个 GitHub/GitLab 仓库 + 一个能构建的前端项目（本文以 Vite + React 为例）。

1. 登录 AWS 控制台，搜 Amplify，进入 Amplify Hosting，点 Create new app（新用户直接选 Deploy your app）。 2. 选择代码来源：GitHub，首次使用需要授权（OAuth），授权后选择目标仓库与分支（如 main）。 3. 如果仓库是 monorepo，勾选 My app is a monorepo 并指定根目录。 4. 系统会自动识别框架并生成构建配置，你可以在 Build settings 里查看/修改（下一节详讲）。 5. （可选）展开 Advanced settings，添加环境变量，例如 VITE_API_BASE。环境变量默认对所有分支生效，且加密存储。 6. 点 Save and deploy。Amplify 会依次执行：拉代码 → Provision → Build → Deploy → Verify。

构建成功后你会拿到一个 https://main.xxxxxxxxxxxx.amplifyapp.com 形态的地址。这个地址自带 HTTPS，可以直接访问。

关键概念：分支即环境。 你在仓库里推一个 dev 分支并在 Amplify 里连接它，会自动得到 https://dev.appname.amplifyapp.com；每个分支的环境变量、后端资源都可以隔离。团队协作时主分支进生产、dev 分支做预发，互不干扰。

三、实战二：amplify.yml 构建设置全解

Amplify 的构建行为由仓库根目录的 amplify.yml 决定。这是整个 Hosting 最值得花时间理解的文件，因为它直接决定构建能不能过、产物能不能被找到。

一个标准的前端构建配置长这样：

`yaml version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: dist files: - '*/' cache: paths: - node_modules/*/ `

逐段解释：

- phases.preBuild：装依赖。用 npm ci 而不是 npm install，它严格按 lock 文件安装，构建结果可复现，也更快。 - phases.build：真正跑构建命令，产物一般在 dist 或 build 或 .next。 - artifacts.baseDirectory：最容易踩坑的一项——它必须指向构建产物目录。Vite 默认 dist，CRA 默认 build，Next.js 静态导出是 out。填错的表现是"构建成功但访问 404"。 - cache.paths：缓存 node_modules，第二次构建通常能快 40%～60%，直接省钱（构建是按分钟计费的）。

monorepo 的写法是在 appRoot 指定子目录，例如 appRoot: apps/web，Amplify 就会在 apps/web 下找 amplify.yml 与产物。

> 记住一个判断技巧：构建日志里 "Build succeeded" 只代表命令跑完了，不代表产物被找到了。 上线后白屏/404，先回头查 baseDirectory。

四、实战三：不用 Git，用 Amplify CLI 手动部署

有些场景不适合走 Git：外包交付、构建产物由别的流水线生成、或者你只是想先试一下。这时用 Amplify CLI 手动部署。

先装 CLI 并做本地凭据配置：

`bash // 安装 Amplify CLI npm install -g @aws-amplify/cli

// 配置 AWS 凭据（会引导创建 IAM 用户并写入本地 profile） amplify configure

// 在项目根目录初始化（会生成 amplify/ 目录与团队共享配置） amplify init

// 添加托管能力（选 manual deploy 即手动部署） amplify add hosting

// 构建并发布，产物会被推送到 Amplify 托管 amplify publish `

如果你的项目是 Amplify Gen 2（新版本，用 npm create amplify@latest 初始化），则走 TypeScript 定义后端 + Git 流程，CI 里用：

`bash // Gen 2 在流水线中部署后端与托管 npx ampx pipeline-deploy --branch main --app-id <你的APP_ID> `

手动部署的另一个方法：控制台里 Amplify 支持"不带 Git 部署"——你本地 npm run build 后把产物打成 zip 直接拖进控制台，或从 S3 桶拉取。适合一次性交付。

五、实战四：绑定自定义域名 + 免费 HTTPS

拿到 amplifyapp.com 地址只能算"能用"，要"能给别人看"，必须绑自己的域名。

情况 A：域名托管在 Route 53

在 Amplify 控制台左侧选 Hosting → Custom domains → Add domain，下拉里直接就能看到你的域名，选中后 Amplify 自动帮你写 DNS 记录（apex 和 www），无需手工操作。同时它会给每个已连接的分支自动创建子域名，例如连接 dev 分支会生成 dev.你的域名。

情况 B：域名在第三方注册商

同样在 Add domain 里输入域名，Amplify 会给出一组 CNAME 记录和验证记录，你去注册商后台照抄即可。注意 apex 域名（不带 www）在部分注册商处需要 CNAME Flattening，若注册商不支持，就把 apex 用 301 跳到 www。

HTTPS 是自动的：Amplify 会通过 Amazon Certificate Manager 为你签发证书，并且带泛域名支持——一张证书覆盖主域名 + 所有子域名，不用为每个子域名单独申请。这正是很多人从"自己搭 Nginx 配 Let's Encrypt"转向 Amplify 的直接原因。

顺带一个实用功能：任何分支部署都可以开启基础认证（Basic Auth），用户名密码保护，把预览链接发给客户时不用怕被搜索引擎或外人看到。

六、实战五：SSR 服务端渲染与重定向配置

Amplify Hosting 原生支持 Next.js、Nuxt.js、Astro.js、SvelteKit 的 SSR 部署，这意味着你可以把带服务端逻辑的应用直接托管上去，而不用租 EC2 + 装 Node。

SSR 部署的要点：

1. 框架版本要在 Amplify 支持范围内，构建配置里会多出 compute 相关阶段，照默认生成的配置走，不要手工删。 2. 服务端运行时要用到的环境变量，需要在控制台里配置到 SSR 环境变量（仅有 NEXT_PUBLIC_ 前缀的变量才会注入到浏览器端，服务端变量另配）。 3. SSR 会同时产生"请求数"和"请求时长（GB-小时）"两项计费，静态站没有这两项。所以 SSR 应用的成本模型和静态站完全不同，别用静态站的经验去估。

重定向与重写在控制台的 Rewrites and redirects 里配置，最常用的三条：

- 单页应用（SPA）路由回退：把 404 重写到 /index.html（200），解决刷新子路由白屏 - 旧地址 301 跳新地址：SEO 迁移必备 - 反向代理到外部 API：把 /api/* 重写到你的后端域名，规避跨域

七、价格对比表（2026 最新，官方参考价）

Amplify Hosting 的计费分三块：构建、存储、流量，SSR 应用再加 请求数与请求时长。下面是官方公布的参考价（美元，全球区域统一）：

| 计费项 | 计费单位 | 单价（无免费额度时） | 免费额度（含 AWS 免费套餐） | |--------|----------|----------------------|------------------------------| | 构建 - Standard 实例（8 GB 内存 / 4 vCPU） | 每分钟 | $0.01 / 分钟 | 每月 1,000 构建分钟 | | 构建 - Large 实例（16 GB / 8 vCPU） | 每分钟 | $0.025 / 分钟 | 无 | | 构建 - XLarge 实例（72 GB / 36 vCPU） | 每分钟 | $0.10 / 分钟 | 无 | | 数据存储（CDN 上的站点体积） | 每月每 GB | $0.023 / GB/月 | 每月 5 GB | | 数据传出（CDN 流量） | 每 GB | $0.15 / GB | 每月 15 GB | | SSR 请求数 | 每百万次 | $0.30 / 百万次 | 每月 50 万次 | | SSR 请求时长 | 每 GB-小时 | $0.20 / GB-小时 | 每月 100 GB-小时 | | Web 应用防火墙（WAF） | 每 App 每月 | $15 / 月/App + WAF 用量费 | 无 |

关于免费额度的口径要说明清楚：2025 年 7 月 15 日起 AWS 调整了免费套餐计划，新注册账号可以选择免费计划并获得最多 $200 的免费额度（可用于 Amplify 等合格服务），免费计划在账号创建后 6 个月内有效，额度需在 12 个月内用完。超过免费额度后按上表付费，存储费会持续产生直到你删除 App。

7.1 两个真实成本测算

场景一：小团队内部工具站（5 个开发者，300 日活）

- 每月构建：5 人 × 2 次提交/天 × 20 天 × 平均 3 分钟 = 600 构建分钟 → 600 × $0.01 = $6 - 每月流量：300 用户 × 1.5 KB 页面 × 30 天 ≈ 13.2 GB → 13.2 × $0.15 = $1.98 - 每月存储：25 KB 站点 × 200 次构建 ≈ 4.9 GB → 4.9 × $0.023 = $0.11 - 合计约 $8 / 月

场景二：面向 1 万日活的营销站（每月只更新 2 次）

- 构建：2 次 × 3 分钟 = 6 分钟 → $0.06（几乎可忽略） - 流量：10,000 用户 × 1.5 KB × 30 天 ≈ 439 GB → 439 × $0.15 = $65.92 - 存储：100 KB × 2 ≈ 0.19 GB → ≈ $0.004 - 合计约 $66 / 月，其中 99% 是流量费

结论：Amplify 的成本结构里，构建几乎不花钱，流量才是账单主角。 所以省钱的核心动作不是"少提交代码"，而是"把流量降下来"——这也是下节的内容。

八、省钱 5 招

1. 压缩构建分钟：缓存 node_modules、用 npm ci、把 lint/测试挪到 CI 而不是构建阶段。构建分钟是唯一"你能直接控制"的支出项。 2. 减小页面体积：开启 gzip/brotli、图片走 WebP/AVIF 并延迟加载、按路由分包。每省 1 KB × 1 万日活 × 30 天 ≈ 省 $0.43/月，粒度虽小但可叠加。 3. 静态优先：能用 SSG 就别用 SSR。SSR 会额外产生请求数和 GB-小时两项费用，纯静态站完全没有这两项。 4. 大流量站点换 S3+CloudFront：CloudFront 的流量单价是阶梯递减的，当月流量上到 TB 级，Amplify 的 $0.15/GB 就会明显贵于 CloudFront。流量越大越应该考虑迁移。 5. 给 App 设预算告警：用 AWS Budgets 设一个月度阈值，超 80% 就发邮件。流量型服务最怕的是被刷或被恶意引用，预算告警是最便宜的保险。

九、7 大坑（都是实战踩出来的）

1. 构建成功但页面 404 —— 99% 是 amplify.yml 里 artifacts.baseDirectory 填错，没指向真实产物目录。 2. 刷新子路由白屏 —— SPA 没配 404 回退规则，需要在 Rewrites and redirects 里把 404 重写到 /index.html（状态 200）。 3. 环境变量在浏览器里读不到 —— Vite 只暴露 VITE_ 前缀变量，Next.js 只暴露 NEXT_PUBLIC_ 前缀变量，改了变量名还要重新部署才生效。 4. 区域建完不能改 —— App 的服务区域在创建时锁定。想换区域只能新建 App 再迁数据，所以第一次就要选对。 5. 删了 App 还在扣存储费 —— 存储费按 CDN 上的站点体积持续计算，只有删除 App 才会停止。测试完记得清理。 6. 免费额度到期后账单突增 —— 免费计划只有 6 个月，到期后不主动升级会直接按量计费；建议在日历里设提醒提前评估。 7. 域名在第三方注册商时 HTTPS 卡住 —— 通常是 DNS 验证记录没生效或 CAA 记录冲突，先用 dig 确认 TXT/CNAME 已生效再重试。

常见问题 FAQ

Q: Amplify Hosting 和 S3+CloudFront 到底怎么选？ A: 看两个维度。要效率/要 SSR/要分支预览 → Amplify；纯静态 + 流量大 + 想省到极致 → S3+CloudFront。很多团队的实际选择是：开发期用 Amplify 快速迭代，流量涨起来后把静态产物迁到 S3+CloudFront 降本。

Q: 国内用户访问 Amplify 托管站快吗？ A: 取决于区域，和 AWS 被墙与否无关（AWS 国际版域名本身可访问）。主要服务国内用户优先选香港 ap-east-1，其次东京 ap-northeast-1。 延迟表现更接近"香港/东京节点的静态站"，而不是"中国大陆节点"。对延迟极敏感的业务，仍需自行做 CDN 加速或选国内云。

Q: 免费额度真的够用吗？ A: 个人项目、练手、小流量企业站基本够。额度含每月 1,000 构建分钟、5 GB 存储、15 GB 流量；超出后按量计费。注意免费计划只有 6 个月有效期，到期后要主动处理。

Q: Amplify 支持后端吗？ A: 支持。Amplify 可以配合 Cognito（认证）、AppSync（GraphQL 实时 API）、DynamoDB（数据库）、Lambda（函数）、S3（存储）搭出完整后端。这些服务各自独立计费、各有免费额度，Amplify 只是把它们串起来并自动生成前端调用代码。

Q: 可以只部署后端不用 Amplify Hosting 吗？ A: 可以。Amplify CLI 生成的后端资源本质就是标准 AWS 资源，你的前端完全可以放在别处（比如 S3+CloudFront）。Hosting 只是可选的一层。

Q: 构建超时或内存不够怎么办？ A: 默认用 Standard 实例（8 GB / 4 vCPU）。大型 monorepo 或 Next.js SSR 项目可以切到 Large（$0.025/分钟）甚至 XLarge（$0.10/分钟）实例，代价是构建单价上升——先用 Standard 试，真不够再升。

Q: 部署失败在哪里看日志？ A: Amplify 控制台的每个 App 下都有每个分支的 Build logs，能看到 Provision / Build / Deploy / Verify 四个阶段的完整输出。Verify 阶段失败通常是产物目录问题，Build 阶段失败通常是依赖或环境变量问题。

Q: 一个 App 能挂多个域名吗？ A: 可以。一个 App 支持绑定多个自定义域名与子域名，配合分支可以做出"主域名走生产、staging 子域名走预发"的完整结构，证书由 ACM 泛域名统一覆盖。

> ⚠️ 文中价格为 2026 年参考价，实际费用随区域和官方调价变动，请以 AWS 官网为准。

> 🚀 需要 AWS 国际版账号？通过 3.chengzicloud.cloud 获取最新注册教程与专属优惠，助你轻松上云。

延伸阅读：

- AWS S3 + CloudFront 静态网站托管实战：从 0 搭建全球加速站点 - AWS ACM 免费 SSL 证书实战：申请、DNS 验证与自动续期 - AWS Route 53 教程：域名注册、DNS 解析与故障转移实战 - AWS CodePipeline + CodeBuild CI/CD 实战：构建全自动发布流水线 - AWS Lambda 无服务器实战：从 0 搭建 API - AWS 免费套餐注册指南：避免被扣费的 5 个关键设置

> 本文由 3.chengzicloud.cloud 提供，点击访问首页了解更多