Zenn
🧭

CircleCI ブランチ毎に異なるAWS S3バケットへデプロイする

2023/02/12に公開
AWS
CircleCI
CI
静的ホスティング
tech

サマリ

当初やりたかったこととしては、『Github -> CircleCI -> AWS』 の流れで、静的資材をビルド&デプロイするフローを構築することでした。

最初はプレビュー環境を準備していなかったのですが、本番公開した後はプレビュー環境へとデプロイする必要が出てきました。

つまり、mainとdevelopブランチでそれぞれ別の環境へデプロイするワークフローを設定する必要がありました。

この記事では、mainとdevelopブランチでそれぞれ別の環境へデプロイするCercleCIワークフローの設定方法について説明します。

作成したConfig.yml

取り急ぎ時間がない方のために、自分が作成したワークフローを載せておきます。

※前提として、本番環境の環境変数は「Project Setting」配下に設定し、プレビュー環境の環境変数は「Organization Setting」配下に設定しました。

version: 2

jobs:
  ci:
    docker:
      - image: cimg/node:lts
    steps:
      - checkout

      - restore_cache:
          keys:
            - node-v1-{{ checksum "package-lock.json" }}

      - run:
          name: Install dependencies
          command: npm ci

      - save_cache:
          key: node-v1-{{ checksum "package-lock.json" }}
          paths:
            - ~/.npm

      - run: # Install the AWS CLI if it is not already included in the docker image
          name: Install awscli
          command: |
            sudo apt update
            sudo apt install python3-pip
            sudo pip3 install awscli

      - run: # Deploy to S3 using the sync command
          name: Deploy to S3
          command: |
            export NODE_OPTIONS=--openssl-legacy-provider && npm run generate
            aws s3 sync ./dist s3://$BUCKET_NM --delete

      - run: # Clears the CloudFront cache so new requests will receive the latest version of the app
          name: Invalidate CloudFront distribution
          command: |
            aws cloudfront create-invalidation \
              --distribution-id $CLOUD_FRONT_DIST_ID \
              --path "/*"

workflows:
  version: 2
  ci-for-develop:
    jobs:
      - ci:
          context: preview-context
          filters:
            branches:
              only:
                - develop
  ci-for-production:
    jobs:
      - ci:
          filters:
            branches:
              only:
                - main

解説

まず、実行したいjob（ex. ビルド, デプロイ など）を記載します。

この際、CircleCI上に設定した環境変数と同じ名前を呼び出します。
（今回の例では、BUCKET_NMとCLOUD_FRONT_DIST_IDが該当します）

version: 2

jobs:
  ci:
    docker:
      - image: cimg/node:lts
    steps:
      - checkout

      - restore_cache:
          keys:
            - node-v1-{{ checksum "package-lock.json" }}

      - run:
          name: Install dependencies
          command: npm ci

      - save_cache:
          key: node-v1-{{ checksum "package-lock.json" }}
          paths:
            - ~/.npm

      - run: # Install the AWS CLI if it is not already included in the docker image
          name: Install awscli
          command: |
            sudo apt update
            sudo apt install python3-pip
            sudo pip3 install awscli

      - run: # Deploy to S3 using the sync command
          name: Deploy to S3
          command: |
            export NODE_OPTIONS=--openssl-legacy-provider && npm run generate
            aws s3 sync ./dist s3://$BUCKET_NM --delete

      - run: # Clears the CloudFront cache so new requests will receive the latest version of the app
          name: Invalidate CloudFront distribution
          command: |
            aws cloudfront create-invalidation \
              --distribution-id $CLOUD_FRONT_DIST_ID \
              --path "/*"

次に、設定したjobを実行する条件を設定します。

workflows:
  version: 2
  ci-for-develop: // CircleCI上で表示されるworkflow名を設定します。任意の名前をつけられます
    jobs:
      - ci: // 実行したいjob名を記載します
          context: preview-context // Organization Settingで設定したコンテキスト名を記載します
          filters:
            branches:
              only:
                - develop // 実行したいブランチ名を記載します
  ci-for-production:
    jobs:
      - ci: // 実行したいjob名を記載します
          filters:
            branches:
              only:
                - main // 実行したいブランチ名を記載します

以上で、developとmainで異なるAWSの環境へビルド & デプロイができます。
どなたかの参考になれば幸いです。

参考サイト

CircleCI 公式ドキュメント

Discussion