问题
希望使用AWS 的CodeBuild+CodePipeline来构建前端工程的CI/CD工作流,这里只介绍CodeBuild使用。
前提
这里vuejs工程使用nodejs14版本,使用yarn进行打包构建的。
步骤
确定工作环境
根据前提条件需要使用nodejs14,来确定我们使用aws工作环境系统版本为Ubunttu 标准:5.0。
CodeBuild
注意这里选择的环境需要于nodejs版本对应。这里创建之后,会生成一个codebuild-dev-service-role的角色。这里最关键的还是Buildspec配置。
Buildspec
version: 0.2
phases:
install:
runtime-versions:
nodejs: 14
pre_build:
commands:
- echo Installing source NPM dependencies...
- yarn --version
- yarn install
build:
commands:
- echo Build started on `date`
- echo Compiling the Node.js code
- yarn build
post_build:
commands:
# 构建完成后同步到s3中
- aws s3 sync ./dist/ s3://dev-xxx/xxx/ --delete
# 过期CDN文件
- aws cloudfront create-invalidation --distribution-id XXXX --paths '/xxx/*'
artifacts:
files:
- '**/*'
base-directory: 'dist'
cache:
paths:
- '/root/.cache/yarn/**/*'
创建s3读写权限策略
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "ListObjectsInBucket",
"Effect": "Allow",
"Action": [
"s3:ListBucket"
],
"Resource": [
"arn:aws-cn:s3:::dev-xxx"
]
},
{
"Sid": "AllObjectActions",
"Effect": "Allow",
"Action": "s3:*Object",
"Resource": [
"arn:aws-cn:s3:::dev-xxx/*"
]
}
]
}
这个策略创建之后,将这个策略赋予给codebuild-dev-service-role角色即可。
创建cloudfront刷新权限策略
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": "cloudfront:CreateInvalidation",
"Resource": "arn:aws-cn:cloudfront::xxxxxxx:distribution/xxxxxxx"
}
]
}
这个cloudfront缓存刷新策略创建之后,赋予给codebuild-dev-service-role角色即可。
测试
总结
到目前为止vuejs使用codebuild构建后,发布到s3上面,然后刷新cloudfront的CI/CD工作流就基本完成了。还可以使用CodePipeline包装一下CodeBuild这个过程。