この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
AWS Loft好きなKyoです。CLIも好きです。
CI/CDに入門するためにS3への静的サイトのデプロイパイプラインを作ってみました。なお、今回は自動デプロイのみなので、CI/CDではなくCDですね。
参考にしたのは、以下の公式チュートリアルです。
Tutorial: Create a Pipeline That Uses Amazon S3 as a Deployment Provider
環境
- macOS Mojave 10.14.6
- aws-cli/1.16.232 Python/3.7.3 Darwin/18.7.0 botocore/1.12.222
構築してみた
大きく3種類の作業が必要となります。1,2についてはCLIから作業を行いました。
- CodeCommitのレポジトリの作成
- S3バケットの作成および静的サイトホスティングの設定
- CodePipelineのパイプライン作成
1. CodeCommitのレポジトリの設定
注意
CodeCommitではAWSの認証情報を利用するため、クロスアカウントアクセスを行なっている方は追加の設定が必要になります。方法は以下のブログをご参照ください。
AWS認証ヘルパー周りの話は以下のブログをご参照ください。
環境変数の設定
export REPOSITORY_NAME='MyDemoRepo'
export REPOSITORY_DESCRIPTION='My demonstration repository'
レポジトリの作成
REPOSITORY_CLONE_URL=$( \
aws codecommit create-repository \
--repository-name ${REPOSITORY_NAME} \
--repository-description "${REPOSITORY_DESCRIPTION}" \
--query repositoryMetadata.cloneUrlHttp \
--output text
) \
&& echo ${REPOSITORY_CLONE_URL}
レポジトリのクローン
任意のディレクトリにてレポジトリをクローンします。中身が空なのでwarningが出ますが、無視して大丈夫です。
git clone ${REPOSITORY_CLONE_URL}
クローン先へ移動
cd ${REPOSITORY_NAME}
サンプルサイトのファイルをDL
curl https://docs.aws.amazon.com/en_pv/codepipeline/latest/userguide/samples/sample-website.zip > sample-website.zip
zipを解凍して削除
unzip sample-website.zip && rm sample-website.zip
リモートレポジトリにファイルをpush
git add -A
git commit -m "Added static website files"
git push
2. バケットの作成および静的サイトホスティングの設定
本項のコマンドはJAWS-UG CLI専門支部の手順書の一部を簡略化して作成しました。
【JAWS-UG CLI専門支部】 129 祝日スペシャル S3 + Route53 + CloudFrontで作るサーバレスWebサイト
環境変数の設定
S3_BUCKET_NAME
は下記のS3バケット命名規則を満たすように指定してください。日付やAWSアカウントIDを組み合わせると作りやすいです。
export AWS_DEFAULT_REGION='ap-northeast-1'
export S3_BUCKET_NAME='バケット名'
export FILE_S3_BUCKET_POLICY_DOC='policy.json'
export S3_DOC_INDEX='index.html'
バケットを作成
aws s3api create-bucket \
--bucket ${S3_BUCKET_NAME} \
--create-bucket-configuration "LocationConstraint=${AWS_DEFAULT_REGION}"
バケットポリシドキュメントを作成
cat << EOF > ${FILE_S3_BUCKET_POLICY_DOC}
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"AddPerm",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::${S3_BUCKET_NAME}/*"]
}
]
}
EOF
cat ${FILE_S3_BUCKET_POLICY_DOC}
ポリシを適応
aws s3api put-bucket-policy \
--bucket ${S3_BUCKET_NAME} \
--policy file://${FILE_S3_BUCKET_POLICY_DOC}
ウェブサイトホスティングを有効化
aws s3 website "s3://${S3_BUCKET_NAME}" \
--index-document ${S3_DOC_INDEX}
ポリシドキュメントの削除
rm ${FILE_S3_BUCKET_POLICY_DOC}
確認
マネジメントコンソールからS3バケット一覧を確認すると、指定した名前で公開されているバケットが増えているはずです。
3. CodePipelineのパイプライン作成
パイプラインの作成
- 左上の「パイプラインを作成する」をクリック
パイプラインの設定
- パイプライン名に
MyS3DeployPipeline
- 「次に」をクリック
ソースステージを追加
- ソースプロバイダーは
AWS CodeCommit
- リポジトリ名は
MyDemoRepo
(今回作成したもの) - ブランチ名は
master
- 「次に」をクリック
ビルドステージを追加
- 「ビルドステージをスキップ」をクリック
デプロイステージを追加する
- デプロイプロバイダーに
Amazon S3
- バケットは今回作成したものを選択
- デプロイする前にファイルを抽出するにチェック
- 「次に」をクリック
レビュー画面
- 「パイプラインを作成する」をクリック
- 実行が始まるので、完了まで待つ
サイトの確認
以下のコマンドで出力されるURLへブラウザでアクセスします。
echo "http://${S3_BUCKET_NAME}.s3-website-ap-northeast-1.amazonaws.com"
サイトが表示されました!
動かしてみる
index.htmlの変更
index.html
の内容を任意のエディタで変更します。今回はh1タグ内のメッセージを「Hello Classmethod!」に変更しました。
変更分をリモートレポジトリへpush
git add .
git commit -m "changed message"
git push
しばらく待ってから、サイトをリロードしてみます。
無事メッセージが更新されました!
終わりに
S3に静的サイトをデプロイするパイプラインが出来ました。自動デプロイは気分いいですね。
なお、弊社では「GithubリポジトリにあるWebコンテンツをCodePipelineでS3にデプロイ展開し、CloudFrontで配信するAWS環境を一撃で作るCloudFormation Template」も公開しております。
興味を持たれた方はぜひ以下のブログをご覧ください。
CodePipelineのS3へのデプロイを使って、CloudFormation一撃で静的Webサイトの構築をやってみる
以上、何かのお役に立てれば幸いです。