vuejs工程在使用AWS CodeBuild进行构建

最新推荐文章于 2023-03-08 22:28:41 发布

亚林瓜子

最新推荐文章于 2023-03-08 22:28:41 发布

阅读量771

点赞数

文章标签： vue.js aws 前端

欢迎流通功德无量

本文链接：https://blog.csdn.net/fxtxz2/article/details/127265483

版权

问题

希望使用AWS 的CodeBuild+CodePipeline来构建前端工程的CI/CD工作流，这里只介绍CodeBuild使用。

前提

这里vuejs工程使用nodejs14版本，使用yarn进行打包构建的。

步骤

确定工作环境

根据前提条件需要使用nodejs14，来确定我们使用aws工作环境系统版本为Ubunttu 标准：5.0。
aws镜像选择

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"
        }
    ]
}