🍥

circle ciを使ってS3にVue成果物をデプロイする

2022/02/13に公開約2,100字

Githubに連動したパイプラインとして、Github Actions, Circle CI, CodePipelineあたりがあると思いますが、CodePipeline以外使ったことがない状態でした。

今回ちょうどVueを書いていたので、Circle CIを使ってS3にデプロイしてみました。

circle ciのconfigファイルを配置

.circleciディレクトリをVueプロジェクトのルートに作成し、その中にconfig.ymlを配置します。
config.ymlの記述に従ってcircle ciが動いてくれます。

config.ymlの中身
version: 2.1

orbs: 
  aws-s3: circleci/aws-s3@3.0.0

jobs:
  build:
    working_directory: ~/app
    docker:
      - image: circleci/node:14
    steps:
      - checkout
      - run:
          name: yarn install
          command: yarn install
      - run: 
          name: yarn build
          command: yarn build
      - persist_to_workspace:
          root: .
          paths:
            - .
      
  deploy:
    working_directory: ~/app
    docker:
      - image: circleci/node:14
    steps:
      - attach_workspace: 
          at: .
      - aws-s3/sync: 
          from: ./dist
          to: $BUCKET_URL

workflows:
  version: 2.1
  s3-deploy:
    jobs:
      - build:
          filters:
            branches:
              only: 
                - main
      - deploy:
          requires: 
            - build
          filters:
            branches:
              only: 
                - main

aws s3のorbを使っているので記述がスッキリしています。
※orbはライブラリみたいなものです。

$BUCKET_URLが環境変数になっていますし、その他aws cli用のアクセスキー/シークレットキーも環境変数に登録してあげる必要があります。

環境変数を登録

Project Settings > Environment Variablesから、以下の環境変数を登録してあげます。

AWS_ACCESS_KEY_ID
AWS_REGION
AWS_SECRET_ACCESS_KEY
BUCKET_URL

※BUCKET_URLの例: s3://your-backet-name

アクセスキーにアタッチすべき最低限必要なポリシーはこちらです。
S3FullAccessを渡しがちですが、いついかなる時も最小限で行く方がいいと思います。

IAMポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::your-backet-name/*",
                "arn:aws:s3:::your-backet-name"
            ]
        }
    ]
}

これで、mainブランチに動きがあるたびに自動でビルドが走り、S3にデプロイされます。

かかった時間はビルド&デプロイ含めて1分ちょいで、CodePipeline(CodeBuild, CodeDeploy)よりずいぶん早くて気持ちいいです!

Discussion

ログインするとコメントできます