AWS CI/CD之Vuejs（pnpm版）

问题

最近需要在AWS国际版上面部署一下前端web的CI/CD。之前介绍过在CodeBuild中使用yarn进行前端构建的文章，这次我们在CodeBuild中使用pnpm方式进行构建，同时把结合CodePipeline形成前端的CI/CD工作流。

1.创建前端部署s3桶

设置桶名称：如下图：

2.创建前端pnpm缓存桶

设置桶名称，如下图：

并依次创建好对应的文件夹，具体如下图：

创建root文件夹，如下图：

在root文件下面再创建一个.pnpm-store文件夹，具体结果如下：

3.创建刷新cloudfront自定义策略

打开IAM策略主页，准备创建刷新CDN自定义权限策略，如下图：

设置权限策略内容，如下图：

具体内容如下：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "CloudfrontCreateInvalidation",
            "Effect": "Allow",
            "Action": "cloudfront:CreateInvalidation",
            "Resource": "*"
        }
    ]
}

设置策略名称，如下图：

4.修改s3自定义策略

由于CodeBuild除了需要CDN刷新策略之外，还需要读写上述2个s3桶的权限。故按照上述方式设置s3上述2个桶水读写策略。创建自定义权限策略dev-codebuild-s3，设置内容如下：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "ListObjectsInBucket",
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::dev-xxx",
                "arn:aws:s3:::dev-pnpm-codebuild"
            ]
        },
        {
            "Sid": "AllObjectActions",
            "Effect": "Allow",
            "Action": "s3:*Object",
            "Resource": [
                "arn:aws:s3:::dev-xxx/*",
                "arn:aws:s3:::dev-pnpm-codebuild/*"
            ]
        }
    ]
}

5.创建codebuild构建vuejs工程

打开codebuild主页，开始创建新vuejs构建项目，如下图：

开始创建新项目如下图：

这里第7步，需要注意一下，因为我们的vuejs项目是使用nodejs18，这个nodejs18版本，影响着我们对镜像的选择，具体参考如下链接：

• 可用的运行时
  这里我们选择如下：
  
  设置buildspec内容如下：

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 18
  pre_build:
    commands:
      - echo Installing source PNPM dependencies...
      - node -v
      - npm --version
      - npm install -g pnpm
      - pnpm config set store-dir /root/.pnpm-store
      - pnpm i
  build:
    commands:
      - echo Build started on `date`
      - echo Compiling the Node.js code
      - pnpm run build:dev
  post_build:
    commands:
      # 同步部署s3桶
      - aws s3 sync ./dist/ s3://dev-xxx/xxx/ --delete
      # 失效cloudfront
      - aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_ID} --paths "/*"
artifacts:
  files:
    - '**/*'
  base-directory: 'dist'
cache:
  paths:
    - '/root/.pnpm-store/**/*'

具体设置如下图：

设置依赖缓存到s3中，如下图：

6.CodeBuild设置自定义权限策略

找到codebuild角色，设置上述之前2个自定义策略。打开角色，具体如下图：

添加自定义策略，如下图：

找到CloudfrontCreateInvalidation自定义策略，如下图：

按上述方式，继续添加dev-codebuild-s3自定义策略。最终该角色，有如下权限策略：

此时，可以手动进行codebuild构建调试。

7.创建codepipeline构建工作流

打开codepipeline主页，开始创建管道，如下图：

设置管道名称，如下图：

设置管道源，如下图：

设置管道的构建，如下图：

接下来，我们跳过部署，因为我们上一步的Codebuild的脚本post_build步骤里面，就包含部署动作，所以，我们可以跳过部署阶段，如下图：

跳过后，直接点击创建管道，如下图：

到此就完成了dev环境的CI/CD构建。

效果