静的WebサイトをCodePipelineとCodeCommitをつかって自動デプロイしてみた

はじめに

こんにちは、久住です。

静的WebコンテンツをS3で公開する際、「誤った資材を公開しない」、「バージョン管理を適切にしたい」、「承認プロセスをはさみたい」等、考慮事項が増えてくると思います。 今回はCodeCommitとCodePipelineを使った承認プロセスをはさんだ自動デプロイを試してみました。

構成

静的Webコンテンツ構成は一般的なCloudfront -> S3の構成にしています。 CloudfrontとS3間の通信はHTTPSとしたかったのでS3の静的Webサイトホスティングは無効にしています。

本構成は下記の流れをイメージしています。

• エンジニアがローカルリポジトリで作業し、CodeCommitにpush（もしくはbranchからマージ）
• CodePipelineが検知してSNSで管理者に通知、承認レビュー
• 承認OKとなったらS3にデプロイ

 

Cloudfront / S3の作成

本エントリーのメインではないので省略させていただきますが、Cloudfront->S3の静的Webサイト構成を作成します。セキュアにする場合はCloudfrontにWAFを挟んだり、Cloudfront - S3間でOAIを設定することをおすすめします。

CodeCommitの作成

「バージョン管理を適切にしたい」という目的を実現するために、静的Webコンテンツのソースコードを管理するリポジトリをCodeCommitに作成します。

CodeCommitへのSSH/HTTPSでのローカル端末からのアクセスについては公式ドキュメントをご参照ください。

Linux, macOS, or Unix 上で AWS CodeCommit リポジトリに SSH 接続するために必要なセットアップ手順

CodePipelineの作成

「誤った資材を公開しない」、「承認プロセスをはさみたい」という目的を実現するために、CodePipelineを利用して承認プロセス・自動デプロイ機能を作成します。

自動デプロイ機能の設定

自動デプロイ機能はCodeCommitにコードがpushされたことをCloudwatchEventが検知して、S3へソースコードをデプロイしてくれます。

ソースステージの作成

ソースプロバイダを設定項目があるので、CodeCommitを選択します。ブランチを指定することが出来るのでstg環境、本番環境と分けてCI/CDパイプラインを作成することも可能です。

検出オプションにAmazon CloudWatch Eventsを選択することでCodeCommitの変更を検知し、CodePipelineを走らせることが可能です。

ビルドステージ

今回は静的Webなので、ビルドはしません。ビルドステージはスキップします。

デプロイステージ

デプロイプロバイダーはS3を選択し、静的Webサイトほホスティングするバケットを指定します。

承認プロセスの設定

SNSの設定

承認依頼時にメール通知するために利用するSNSを設定します。SNSをCodePipelineから呼び出すため、承認プロセスにおいてSNSを利用する場合はCodePipelineのサービスロールにSNSアクセス権限を追加する必要があります。

SNSトピックはサブスクリプションにメールアドレスをエンドポイントとして設定します。

承認用ステージの設定

承認プロセスはソースステージとデプロイステージの間に承認用のステージを追加します。

アクションプロバイダーをManual approval、SNSトピックを先程作成したトピックのARNを選択します。レビュー用URLはオプションですが、別にSTG環境等でレビュー出来るページがあればレビュー時に確認可能です。

以上で設定は完了です。

やってみた

それではローカルリポジトリ上でソースコードに変更を加えて自動デプロイを試してみます。

1. コードpush

ローカルリポジトリからCodeCommitにpushするとCodePipeline上のソースステージのステータスが下記の通り進行中に変化します。

続いて承認ステージのステータスが保留中となり、レビュー待ちになります。

、

2. 承認レビュー

上記の保留中ステータスになると、SNSトピックで指定したメールアドレス宛に下記のメールが通知されます。

awsコンソールのリンクを押すとS3にデプロイする承認が行えます。

3. デプロイ

レビューをして、承認すると、デプロイを実行します。S3への静的コンテンツ配置だけでテストページでしたので一瞬で終わってしまいました。

さいごに

ステージング環境用のブランチを切って、もう一つCodepipelineを作成することでステージング環境／本番環境のコード管理・自動デプロイ環境をきれいにまとめることができそうです。

また、複雑な設定も必要なくアプリケーション構築もいらないので、CI/CDの触り部分を体感するにはもってこいの構成ではないかと感じました！