CodePipelineとCodeCommitとS3でCD入門してみた

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から作業を行いました。

  1. CodeCommitのレポジトリの作成
  2. S3バケットの作成および静的サイトホスティングの設定
  3. CodePipelineのパイプライン作成

1. CodeCommitのレポジトリの設定

注意

CodeCommitではAWSの認証情報を利用するため、クロスアカウントアクセスを行なっている方は追加の設定が必要になります。方法は以下のブログをご参照ください。

AWS認証ヘルパー周りの話は以下のブログをご参照ください。

環境変数の設定

1
2
export REPOSITORY_NAME='MyDemoRepo'
export REPOSITORY_DESCRIPTION='My demonstration repository'

レポジトリの作成

1
2
3
4
5
6
7
8
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が出ますが、無視して大丈夫です。

1
git clone ${REPOSITORY_CLONE_URL}

クローン先へ移動

1
cd ${REPOSITORY_NAME}

サンプルサイトのファイルをDL

zipを解凍して削除

1
unzip sample-website.zip && rm sample-website.zip

リモートレポジトリにファイルをpush

1
git add -A
1
git commit -m "Added static website files"
1
git push

2. バケットの作成および静的サイトホスティングの設定

本項のコマンドはJAWS-UG CLI専門支部の手順書の一部を簡略化して作成しました。

【JAWS-UG CLI専門支部】 129 祝日スペシャル S3 + Route53 + CloudFrontで作るサーバレスWebサイト

環境変数の設定

S3_BUCKET_NAMEは下記のS3バケット命名規則を満たすように指定してください。日付やAWSアカウントIDを組み合わせると作りやすいです。

S3バケット命名規則

1
2
3
4
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'

バケットを作成

1
2
3
aws s3api create-bucket \
  --bucket ${S3_BUCKET_NAME} \
  --create-bucket-configuration "LocationConstraint=${AWS_DEFAULT_REGION}"

バケットポリシドキュメントを作成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  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}

ポリシを適応

1
2
3
aws s3api put-bucket-policy \
  --bucket ${S3_BUCKET_NAME} \
  --policy file://${FILE_S3_BUCKET_POLICY_DOC}

ウェブサイトホスティングを有効化

1
2
aws s3 website "s3://${S3_BUCKET_NAME}" \
  --index-document ${S3_DOC_INDEX}

ポリシドキュメントの削除

1
rm ${FILE_S3_BUCKET_POLICY_DOC}

確認

マネジメントコンソールからS3バケット一覧を確認すると、指定した名前で公開されているバケットが増えているはずです。

3. CodePipelineのパイプライン作成

パイプラインの作成

  • 左上の「パイプラインを作成する」をクリック

パイプラインの設定

  • パイプライン名にMyS3DeployPipeline
  • 「次に」をクリック

ソースステージを追加

  • ソースプロバイダーはAWS CodeCommit
  • リポジトリ名はMyDemoRepo （今回作成したもの）
  • ブランチ名はmaster
  • 「次に」をクリック

ビルドステージを追加

  • 「ビルドステージをスキップ」をクリック

デプロイステージを追加する

  • デプロイプロバイダーにAmazon S3
  • バケットは今回作成したものを選択
  • デプロイする前にファイルを抽出するにチェック
  • 「次に」をクリック

レビュー画面

  • 「パイプラインを作成する」をクリック
  • 実行が始まるので、完了まで待つ

サイトの確認

以下のコマンドで出力されるURLへブラウザでアクセスします。

1
echo "http://${S3_BUCKET_NAME}.s3-website-ap-northeast-1.amazonaws.com"

サイトが表示されました！

動かしてみる

index.htmlの変更

index.html の内容を任意のエディタで変更します。今回はh1タグ内のメッセージを「Hello Classmethod!」に変更しました。

変更分をリモートレポジトリへpush

1
git add .
1
git commit -m "changed message"
1
git push

しばらく待ってから、サイトをリロードしてみます。

無事メッセージが更新されました！

終わりに

S3に静的サイトをデプロイするパイプラインが出来ました。自動デプロイは気分いいですね。

なお、弊社では「GithubリポジトリにあるWebコンテンツをCodePipelineでS3にデプロイ展開し、CloudFrontで配信するAWS環境を一撃で作るCloudFormation Template」も公開しております。

興味を持たれた方はぜひ以下のブログをご覧ください。

CodePipelineのS3へのデプロイを使って、CloudFormation一撃で静的Webサイトの構築をやってみる

以上、何かのお役に立てれば幸いです。

PRAWSの技術支援ならクラスメソッド