Circle CIでAWS S3へのデプロイを自動化

GitHubへpushすると、自動でS3へのデプロイされるようにする

S3でホスティングしている静的サイトを更新するとき、いちいちAWSのコンソールを開いてファイルをアップロードするのはとてつもなく面倒なので、

上記の流れでgit pushをするとS3へ自動でデプロイされるようにした。

Circle CIに登録しよう

circleci.com

GitHubと連携する + プロジェクト作成

簡単に連携できるようになっているのでポチポチしてGitHub側でも連携を許可するだけ。さらに今回自動デプロイを行いたいリポジトリを「Add projects」から選択して情報を入力。

AWSの認証情報をCircleCIへ渡す

SECRET、ACCESS KEYをCircle CI側に渡す必要があります。安全上権限は最小限のものにしておきましょう。

下の画面で言うと、「metronome」などのプロジェクト名の右にある歯車からそのプロジェクトの設定に飛びます。

f:id:oimo23:20181102230033p:plain

その後下の方にある「AWS permissions」から情報を入力します。

便利なDocker imageを使おう

innovater japanさんがとても便利なdocker imageを配布してくださっているので使います。
自分でもっと細かく設定したい人は自分でイメージを作ってください。

使い方としてはリポジトリのルートに.circleciディレクトリを作成→中にconfig.ymlを配置。

「example.com」は自分のバケットネームに合わせましょう。
以下の例ではMasterブランチにpushがあった場合、s3へデプロイという設定になります。

version: 2
jobs:
  build:
    working_directory: ~/example
    environment:
      - AWS_S3_BUCKET_NAME: example.com
    docker:
      - image: innovatorjapan/awscli:latest
    steps:
      - checkout
      - run:
          name: Deploy to Mainplace if branch is Master.
          command: |
            if [ "${CIRCLE_BRANCH}" == "master" ]; then
              aws s3 sync ./public_html s3://example.com/metronome/ --exact-timestamps
            fi
      - run:
          name: Deploy to Developplace if branch is Develop.
          command: |
            if [ "${CIRCLE_BRANCH}" == "develop" ]; then
              aws s3 sync ./public_html s3://example.com/develop/ --exact-timestamps
            fi

こんな感じの「config.yml」ファイルをおきます。

この例だと、リポジトリの内の「public_html」ディレクトリ内のファイルをデプロイします。

masterブランチにpushされた場合は「example.com」というバケットの「metronome」ディレクトリ以下にデプロイ、 developブランチだと「develop」ディレクトリ以下にデプロイされるという感じです。

この設定ファイルの細かいところは各自の用途・環境に合わせてください。

おわり

以上で、Cricle CIを利用して GitHub→s3 への自動デプロイが完了です。
steps: の部分でテストを入れることも出来ますね。後は好みでカスタマイズしましょう。

Imomemo

色々とやっていきたい