ポートフォリオサイトを作りたいなと思い、S3のWebサイトホスティングで作りました。
折角なので、CircleCiを活用して、GitHubにコードやファイルをpushするとS3へ自動デプロイされる構成としました。以下にその流れを書いていきます。
1. IAMの設定
CircleCIの環境に設定する、IAMユーザーを作成します。
先ずは、IAMの画面からS3へのアクセスポリシーを作成します。
今回はIAMの画面の「ポリシー」の画面から s3-auth という名前のポリシーを作成しました。ポリシーは以下の通り記載します。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:DeleteObject",
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::YOUR_BUCKET_NAME",
"arn:aws:s3:::YOUR_BUCKET_NAME/*"
]
}
]
}
ポリシーの作成が完了したら、ユーザーの追加を行います。アクセスの種類は「プログラムによるアクセス」のみを選択、アクセス権限は「既存のポリシーを直接アタッチ」の画面から先程作成した「s3-auth」を選択します。
2. S3アクセスポリシーの設定
次に、S3バケットのアクセスポリシーを設定します。
今回は以下3つのアクセス権限を記載しました。
- 管理者アカウント：バケット操作に対する全権限を付与する。
- パブリック（サイト訪問者）：S3へのGetObjectのみを許可。
- CircleCI用権限：PutObject, ListBucket, DeleteObjectのみを許可。
バケットを作成したら、[アクセス権限]>[バケットポリシー]からS3へのアクセスポリシーを設定します。
{
"Version": "2012-10-17",
"Id": "YOUR_ID",
"Statement": [
{
"Sid": "Admin",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::xxxxxx:user/xxxxxx（管理者ユーザーのarn）"
},
"Action": "s3:*",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
},
{
"Sid": "forPublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
},
{
"Sid": "forCircleCi",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::xxxxxx:user/xxxxxx(先程作成したCircleCI用IAMユーザーのarn)"
},
"Action": [
"s3:PutObject",
"s3:ListBucket",
"s3:DeleteObject"
],
"Resource": [
"arn:aws:s3:::YOUR_BUCKET_NAME",
"arn:aws:s3:::YOUR_BUCKET_NAME/*"
]
}
]
}
この際、[パブリックアクセス設定]の項目内の「新規のパブリックバケットポリシーをブロックする」にチェックが入っているとバケットポリシーを更新できないため、ご注意ください。
3. GitHubのリポジトリ作成
今回のプロジェクト用のリポジトリを作成します。
4. CircleCIの設定
CircleCIのユーザー登録とGitHub連携の設定を行います。設定が完了すると、管理画面の[AddProjects]を選択した際に、GitHubリポジトリ名の一覧が表示されるかと思います。今回作成したリポジトリ名の隣に表示されている[SetUp Project]ボタンを押します。
次に、該当のプロジェクトのSettingsの画面で、[Environment Variables]のメニューから、[Add Variable]で、CircleCI用に作成したIAMユーザーの AWS_ACCESS_KEY_ID と AWS_SECRET_ACCESS_KEY を登録します。
CircleCIのコンテナ上で、AWS CLIによるコマンドが走るようにするために、環境変数を設定しておく必要があります。
以上の作業が完了したところで、CircleCIでの自動デプロイ内容を記載したymlファイルを作成します。今回は、現在のプロジェクトのディレクトリ配下の .circleci/config.yml に以下の内容を記載しました。
version: 2
jobs:
build:
working_directory: ~/repo
environment:
- AWS_S3_BUCKET_NAME: YOUR_BUCKET_NAME
docker:
- image: innovatorjapan/awscli:latest
steps:
- checkout
- run:
name: Deploy to S3 if branch is Master.
command: |
if [ "${CIRCLE_BRANCH}" == "master" ]; then
aws s3 sync ~/repo s3://${AWS_S3_BUCKET_NAME}/ --exact-timestamps --delete
fi
引用：https://qiita.com/fkymnbkz/items/55998497620498f1a59d
5. GitHubのMasterへpush
ここまで準備が完了したら、後はGitHubのMasterへコードをPushするだけです。
これで自動デプロイ環境が完成したかと思います。デプロイが成功した場合、CicleCIの管理画面でSuccessと表示されます。