安哉安哉！欲于AWS上建一网站，费甚微，且具GitHub自动部署之管，此诚此文所授，不烦言也.
其意简矣：取一成备之仓库（开源，MIT，末附链接），察其内情，改适己用。或为作品集，或为着陆页，或为静态文档，或为React、Vue、Vite、Astro之SPA。但能生HTML/CSS/JS，皆可。
未堕于码之前，且速谐三义。素谙其道者，可跃入实干之域.
AWS，此何物耶？
AWS乃亚马孙云服务。非购伺器，插电祈安，乃租“片片”之基设以用。自简（存一文件于S3）至繁（管集群Kubernetes，跨域之库，生成性之IA等）。
为静态网站宿主，吾辈将用四物：
- S3：对象存储。思之如云中一匣，置汝之文。
- CloudFront：全球CDN。散汝之站于AWS之边城，遍及寰宇，故东瀛之人与巴西之人，皆速取之。
- ACM：SSL证书之管理器。免费HTTPS，自动更新。
- IAM：谁可何为之控。权限、角色等。
而Cloudflare，非AWS，入为DNS之供。其免费计划已可解，无需购Route 53。
代码即设施（IaC），何用？
歌剧之要：非但点击AWS之控制台，乃于代码之文件中，述说其基建。其利有：
- 以Git版本之。
- 一令，即可升于任一境。
- 倘有毁折，可于diff中察之。
- 于基建，亦须校验代码，君知否。
所识之器：Terraform、Pulumi、CloudFormation（AWS所出）及AWS CDK。者何？
AWS CDK，何其便捷乎？
CDK者，云开发生成之器也。乃今之"新法"，用以构架AWS之基。非若往昔，撰巨制之YAML/JSON（纯云构架），今可书TypeScript、Python、Java、Go或C#。CDK译此为云构架之式，AWS施之。
優勢：君得自動補全、類型檢查、高階抽象（謂之「構造」）。非須為 CloudFront 配置 OAC、私有 S3 及桶策略二十項，僅需實例化一類，事畢矣。
茲示 CDK 堆栈之愚例：
export class MinhaStack extends Stack {
constructor(scope: Construct, id: string, props?: StackProps) {
super(scope, id, props);
const bucket = new s3.Bucket(this, 'MeuBucket', {
blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
encryption: s3.BucketEncryption.S3_MANAGED,
});
}
}
顷之，此即成S3私有，且启加密，无需点击何处。
吾辈所构之架构
其站之流，若此：
译曰：
- 用户访
seusite.com于浏览器。 - Cloudflare 解DNS，指 CloudFront。
- 云前境以HTTPS（证ACM）用OAC取S3私囊之文.
- S3恒不显于众。与之语者，惟云前境耳.
且于部署之侧：
- 汝推其支
main. - GitHub Actions以OIDC自AWS验（无定钥，更安）.
- 行
cdk deploy，为之s3 sync乃无效之缓存于 CloudFront。
美哉？欲置之运行。
仓库
诸项目在此，MIT 许可，可随意克隆：
github.com/markgerald/aws-cdk-static-site-starter
有英文之文档版本：inglês 及 português。此非赘述坦途之文也。
须知之备
诸事未举，先备此物：
- AWS之户（有免费之级，可戏玩而无费）。
- Node.js 22以上之安装。
- AWS CLI之配置（
aws configure）。 - Cloudflare之域，为DNS之权威。
若未尝安装Node/AWS CLI，此处有逐步教程在焉：本地安装。
欲設置Cloudflare，當如是：域界，DNS及SSL/TLS于Cloudflare请提供需要翻译的英文文本。
复制并配置.env
git clone https://github.com/markgerald/aws-cdk-static-site-starter.git
cd aws-cdk-static-site-starter
cp .env.example .env
启之.env无编辑者而调适之。此乃配置之要：
PROJECT_NAME=meu-site
DOMAIN_NAME=meusite.com
WWW_DOMAIN_NAME=www.meusite.com
AWS_ACCOUNT_ID=123456789012
AWS_REGION=eu-west-1
CERTIFICATE_REGION=us-east-1
ENABLE_SPA_FALLBACK=true
CREATE_GITHUB_OIDC_ROLE=false
GITHUB_OWNER=seuuser
GITHUB_REPO=seu-repo
GITHUB_BRANCH=main
GITHUB_OIDC_PROVIDER_ARN=
须注意二事：
-
CERTIFICATE_REGION须为us-east-1。CloudFront仅受此区域之ACM认证，此乃AWS之常例。 -
AWS_REGION可随心所欲。吾惯用eu-west-1，然sa-east-1(São Paulo) 事若一辙。
装置而为之引本
npm install
# Bootstrap nas duas regiões (cert e stack principal)
npx cdk bootstrap aws://123456789012/us-east-1
npx cdk bootstrap aws://123456789012/eu-west-1
引本者，犹“初设”也，CDK于户中所为。制资储之桶，授部署之职，此之属。一地一为之，后可忘之。
初之部署
npm run build
npm run build:site
npm test
npx cdk deploy --all --require-approval never
初时，ACM将暂悬以待DNS验证之效。此乃AWS需确认域名归属之故。彼示奇诡之CNAME，令尔抄录于Cloudflare。
往AWS控制台> ACM>地域us-east-1> 请呈上尔之证书。其示若此：
Name: _abc123.meusite.com
Value: _xyz789.acm-validations.aws
Type: CNAME
复此至 Cloudflare，DNS only (灰云，无代理)。少待片刻，ACM 标示 Issued，则部署自继。
验证之细要：教程 Cloudflare ACM 无仓库.
指域于 CloudFront
栈架既立，CDK 予输出若 d111111abcdef8.cloudfront.net。往 Cloudflare，创之：
Type Name Target
CNAME @ d111111abcdef8.cloudfront.net
CNAME www d111111abcdef8.cloudfront.net
始于 仅DNS。若欲启云flare橙代理，须用全模式（严苛）于SSL/TLS。慎勿用柔模式（致重定向循环）。
启浏览器，入https://meusite.com，当现例页于库。
适己之域
今至要者：如何置于此站无例可循.
此站文件之所在，website_src/。默认配置为React+Vite之简装。结构：
website_src/
├── favicon.svg
├── index.html
├── src/
│ └── (componentes React)
├── tsconfig.json
└── vite.config.ts
君有二选：
选项一：将全项目投于website_src/
。此法简明。尽删其内。website_src/ 汝之项目（Next导出，Astro，Vue，纯HTML，任其类）。调build:site于package.json，以行框架之构建。今其状若此：
"build:site": "vite build --config website_src/vite.config.ts"
若汝用Astro，则变为类此：
"build:site": "cd website_src && npm install && npm run build"
要紧者，在build最终须出website_dist/，盖此乃deploy上传至S3之所在。请设汝之framework输出，指向斯处：
// vite.config.ts
export default defineConfig({
build: {
outDir: '../website_dist',
},
});
选项二：作monorepo用
汝可别立一库以存其站，制其文，置之于website_dist/ 但仅部署之。若前端团队与基础设施团队相分离，则此法有益。
纯HTML乎？善。
若君之网站唯HTML/CSS/JS之静态内容，则悉置之website_dist/：
mkdir -p website_dist
cp -r meu-site-pronto/* website_dist/
，且禁SPA之备选（无客户端路由时，无需fallback至index.html）。
ENABLE_SPA_FALLBACK=false
部署此站
既配置且构建后：
npm run build:site
BUCKET_NAME=$(aws cloudformation describe-stacks \
--stack-name aws-cdk-static-site-starter-static-site \
--region eu-west-1 \
--query "Stacks[0].Outputs[?OutputKey=='WebsiteBucketName'].OutputValue" \
--output text)
DISTRIBUTION_ID=$(aws cloudformation describe-stacks \
--stack-name aws-cdk-static-site-starter-static-site \
--region eu-west-1 \
--query "Stacks[0].Outputs[?OutputKey=='CloudFrontDistributionId'].OutputValue" \
--output text)
aws s3 sync website_dist/ "s3://${BUCKET_NAME}" --delete --cache-control "public,max-age=300"
aws cloudfront create-invalidation --distribution-id "$DISTRIBUTION_ID" --paths "/*"
此create-invalidation旨在强制CloudFront索求新版本。无此，或可缓存旧版达时辰之久。
訣曰：可置此於脚本中，一气呵成而運之。
deploy-site.sh自動化乎，GitHub Actions之所能也。
手動之學，善矣。於產製之際，欲推於main，觀網站自更新。
此倉庫已備二工作流：
-
.github/workflows/ci.yml：於PR及push而運，建構測試合成，無AWS憑證。 -
.github/workflows/deploy.yml：主程序中推送，以OIDC为认证之途，行cdk deploy，同步并失效之。
OIDC乃巧思：非使君藏AWS_ACCESS_KEY_ID与AWS_SECRET_ACCESS_KEY于GitHub（其泄于日志），GitHub Actions但求AWS之临时凭证，此AWS信GitHub之OIDC供者。无固定密钥，无手动轮换。
欲立IAM角色，以OIDC之信，启之。.env：
CREATE_GITHUB_OIDC_ROLE=true
GITHUB_OWNER=seuuser
GITHUB_REPO=seu-repo
GITHUB_BRANCH=main
罗达npx cdk deploy自创之，复本其文。GithubActionsRoleArn乃益之如仓库变量无GitHub：
AWS_ROLE_ARN=arn:aws:iam::123456789012:role/...github-actions-deploy
偕诸他变量（与.env同键）：
AWS_ACCOUNT_ID=123456789012
AWS_REGION=eu-west-1
DOMAIN_NAME=meusite.com
WWW_DOMAIN_NAME=www.meusite.com
PROJECT_NAME=meu-site
CERTIFICATE_REGION=us-east-1
ENABLE_SPA_FALLBACK=true
CREATE_GITHUB_OIDC_ROLE=false
GITHUB_OWNER=seuuser
GITHUB_REPO=seu-repo
GITHUB_BRANCH=main
推于主，于动作中精于构建、部署、同步、失效。皆自动化之。
此戏之资几何？
于小站（月击数止数千），其费为月分分文吾失意矣，所恃者量耳。
- 美国计算机协会(ACM): 公共证书为CloudFront者无偿请提供需要翻译的英文文本。
- S3(亚马逊S3)蟒蛇存储请求。小站仅值数分钱。
- 云前哨：免費套餐月供慷慨（轉移1 TB + 10M請求）。超此之外，需付費。
- Cloudflare DNS：免費方案可解析。
或可增價者：
- CloudFront流量高（超免費套餐）。
- 頻繁廣泛之失效（
/*直接，日數次）。 - 启用WAF、日志、Lambda@Edge及CloudFront函数，无需顾虑。
故此，该项目有意为之，不主动关联诸事。若需，日后可自觉启用，明晓其费。
安，乃饭之佐
配置已备：
- S3配
BlockPublicAccess，未尝示人。 - 云前哨经 OAC (新式) 访 S3，非 OAI 旧式.
- HTTP 自动转 HTTPS.
- 流程用 OIDC，无长存密钥.
生产中，更部署角色之 AdministratorAccess 为权小之策。README 详述之.
及“尽删之”乎？
欲破此戏乎？先倾其桶（Bucket）尔。autoDeleteObjects他false为避免定制资源，故也。
BUCKET_NAME=$(aws cloudformation describe-stacks \
--stack-name aws-cdk-static-site-starter-static-site \
--region eu-west-1 \
--query "Stacks[0].Outputs[?OutputKey=='WebsiteBucketName'].OutputValue" \
--output text)
aws s3 rm "s3://${BUCKET_NAME}" --recursive
npx cdk destroy --all
勿忘亦当删云flare之CNAME也。
欲閉之，必先開之。
简述所发生之事：
- 尔习（或温习）AWS、IaC及CDK.
- 于AWS上置一静态之站，配HTTPS、全球CDN及Cloudflare之DNS.
- 以GitHub Actions设自动部署，佐以OIDC.
- 所费甚微.
此项目乃开源，藏于github.com/markgerald/aws-cdk-static-site-starter喜之，则留星。若见弊或有所陈，可送PR或启议题。
惑耶？下文注言，吾当答之。
善，言毕！👋