MkDocs 静的サイト CI/CD デプロイメントパイプライン(GitHub × CircleCI2.0 × Amazon S3)構築

## はじめに

![2019-05-31-21-13-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39442/3845729f-61a2-cb95-47ed-7ae2fa0a72d4.png)

GitHub に MkDocs のドキュメントを push したタイミングで CircleCI2.0 が走り静的ドキュメントを生成(`mkdocs build`)、AWS S3 に公開するまでの CI/CD パイプラインを構築します。

## 静的サイトをデプロイする Amazon S3 バケットを準備

1. S3 バケット作成

1. S3 Web サイトホスティング関連の設定

   - プロパティタブ
     ![2019-05-31-21-21-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39442/08cf8f9d-2cd2-1d92-085d-ca1096a25e64.png)

     - Static website hosting
       - ON
       - インデックスドキュメントとエラードキュメントを設定  
         ![2019-05-31-21-23-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39442/43778a58-e034-542c-3d64-ec840051bc12.png)


## Amazon S3 に PUT する用の CircleCI IAM ユーザーを作成

1. ポリシー作成

   ```json
   {
     "Version": "2012-10-17",
     "Statement": [
       {
         "Effect": "Allow",
         "Action": ["s3:PutObject", "s3:DeleteObject", "s3:ListBucket"],
         "Resource": ["arn:aws:s3:::{S3バケット名}"]
       }
     ]
   }
   ```

1. IAM CircleCI ユーザを追加、アクセスの種類：プログラムによるアクセス
1. アクセスキーとシークレットアクセスキーをメモる
1. ユーザーの ARN をメモる

## Amazon S3 バケットに CircleCI ユーザのアクセス権限を付ける

1. アクセス権限タブ

   - バケットポリシーを設定する

   ```json
   {
     "Version": "2012-10-17",
     "Statement": [
       {
         "Effect": "Allow",
         "Principal": "*",
         "Action": "s3:*",
         "Resource": "arn:aws:s3:::{S3バケット名}/*",
         "Condition": {
           "IpAddress": {
             "aws:SourceIp": [
               "XXX.XXX.XXX.XXX/32" ← S3に対してアクセスできるIPを指定
             ]
           }
         }
       },
       {
         "Sid": "forCircleCi",
         "Effect": "Allow",
         "Principal": {
           "AWS": "arn:aws:iam::{メモった ユーザーのARN}"
         },
         "Action": ["s3:PutObject", "s3:ListBucket", "s3:DeleteObject"],
         "Resource": [
           "arn:aws:s3:::{S3バケット名}"
         ]
       }
     ]
   }
   ```

## CircleCI 設定ファイル 準備

1. `.circleci/config.yml` ファイル を作成する

```yaml
version: 2
jobs:
  mkdocsbuild:
    docker:
      - image: circleci/python:3.7
    working_directory: ~/repo
    environment:
      - AWS_S3_BUCKET_NAME: { S3バケット名 }
    steps:
      - checkout
      - run:
          name: Install mkdocs
          command: sudo pip install mkdocs
      - run:
          name: mkdocs build
          command: sudo mkdocs build
      - run:
          name: Install awscli
          command: sudo pip install awscli
      - run:
          name: Deploy to S3
          command: aws s3 sync ~/repo/site s3://${AWS_S3_BUCKET_NAME}/ --exact-timestamps --delete # ← 削除ファイルも反映するように

workflows:
  version: 2
  mkdocs:
    jobs:
      - mkdocsbuild:
          filters: # ← masterブランチのみS3へUP
            branches:
              only:
                - master
```

## CircleCI プロジェクト設定

1. CircleCI dashboard へアクセス

1. CircleCI AWS アクセスキーとシークレットアクセスキーを環境変数として追加する。  
   アクセスキー ID を AWS_ACCESS_KEY_ID という変数、  
   シークレットアクセスキーを AWS_SECRET_ACCESS_KEY という変数に格納  
   ![2019-05-31-21-51-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39442/33e354c0-e5a5-5086-7238-71b521932ed9.png)

## これで GitHub に push すれば CircleCI が走り、S3 で静的ドキュメントが公開される