(教程) 静态网站部署2：如何更新

写于2021-5-12

这篇文章讲什么？

上篇文章 (教程) 静态网站部署: 使用S3+CloudFront
讲了如何进行初次部署。

这次讲怎么更新。

正文

1. 在代码根目录下创建一个文件叫 Makefile ，内容如下

# 文件部署到哪个 bucket
S3_BUCKET_NAME="test-static"

# CloudFront 里那个 distribution 的 id
CLOUDFRONT_DISTRIBUTION_ID="E2MMHBBY1OKGKP"

# 部署: 
# 把 dist/ 目录里的文件部署到 S3
# 并且触发 CloudFront 的 invalidation (CDN 的删除缓存) 
deploy:
    aws --version # 输出 aws cli 版本号
    aws sts get-caller-identity # 看下当前的身份
    aws iam get-user # 看下当前的身份
    yarn build # 生成生产环境的文件
    aws s3 sync ./dist/ "s3://${S3_BUCKET_NAME}" --acl "public-read" # 把文件复制到 s3 去
    # 最后一步 invalidation 不然 cloudfront 还是返回旧版本
    aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_DISTRIBUTION_ID} --paths '/*'

运行

make deploy

说明

• 这里用到了 aws cli，读者需要先安装 aws cli 并进行登录
• 如何登录？运行 aws configure 命令，并按提示填入 Key ID 和 Access Key
• 如果你已经登录过了，可以运行 cat ~/.aws/credentials 查看 Key ID 和 Access Key

流程解释

1. yarn build 生成文件夹 dist/
2. aws s3 sync 把文件复制到了 s3 的 bucket 里
3. aws cloudfront create-invalidation 让 CloudFront（其实就是个 CDN）进行文件删除，这样才会返回最新的文件，如果不运行这一步，访问网站得到的还是老文件。

另外：关于 AWS CodePipeline

看了下 CodePipeline 似乎可以用来做 S3 自动化部署，
但中国区没有 CodePipeline（截止至2021-5-12）
所以就不管了。
下一篇写 Github Actions

下一篇文章：(教程) 静态网站部署3：如何使用 Github Actions 自动化部署