静的CMSのHexoではマークダウンで記事を書きhexo-cliのコマンドを使ってからHTMLに変換してサーバに配置します。この作業が結構手間だったので、codecommitに記事をコミットした後に、ビルドとEC2サーバへの配置をAWSのCodePipelineを使って自動化してみましたので、その時のメモです。
hexoで実際に作ってみたサイトはこちら
1. 構成について
HexoのブログはWindows端末のvscodeで書いており、GitはAWSのCodeCommitを利用しています。書いたブログはhexo-cliコマンドでビルドして静的コンテンツ(HTMLやCSS)を作り、EC2のnginxのドキュメントルート配下に配置して公開します。
この流れを自動化するために、vscodeからmasterブランチに変更をpushしたらCloudWatchイベントで検知しCodePipelineを実行します。
CodePipelineはCodeBuildを呼び出し、hexo-cliコマンドでビルドし、生成した静的コンテンツをS3に配置します。次にCodeDeployを呼び出しS3の資材をEC2に配置します。
2. 料金について
今回利用しているAWSサービスの料金は以下の通り。S3以外は無料で利用できましたが、S3も使用する容量は数MBレベルなので実質ほぼ無料でした。
| CodeCommit | 5ユーザまで無料 |
| CloudWatchイベント | カスタムイベントを除くすべてのイベントが無料 |
| CodePipeline | アクティブなパイプラインを1か月あたり1つ無料 |
| CodeBuild | build.general1.small（3GB, 2vCPU）の場合、1 か月あたりビルドを 100 分無料で使用可能 |
| CodeDeploay | EC2/Lambdaへのデプロイは無料 |
| S3 | 0.023$/GB |
3. 構築の流れ
3-1. CodeBuildでビルドプロジェクトを作成する
CodePipelineのビルドフェーズにCodeBuildを利用するため、先にCodeBuildでビルドプロジェクトを作成します。
AWSコンソールのサービスからCodeBuildを選択し「ビルドプロジェクトを作成する」を押します。
3-1-1. 送信元の設定
送信元の「ソースプロバイダ」には “AWS CodeCommit” を指定し、「リポジトリ」にビルド対象のリポジトリを選択します。
masterブランチをビルド対象とするため、「リファレンスタイプ」は “ブランチ” とし、「ブランチ」に “master” を選択します。
3-1-2. 環境の設定
「環境イメージ」は “マネージド型イメージ” を選択し、「オペレーティングシステム」は “Amazon Linux 2” を指定しました。「ランタイム」は “Standard” 、「イメージ」は “aws/codebuild/amazonlinux2-x86_64-standard:1.0″、「イメージのバージョン」は特に制約がなければ最新のものを選択します。
「サービスロール」は特に指定がなければ “新しいサービスロール” を選択します。
3-1-3. Buildspecの設定
Buildspec.ymlを作りビルド仕様を記述します。「ビルド仕様」で “buildspecファイルを使用する” を選択し、リポジトリのルートディレクトリ直下に “buildspec.yml” ファイルを作成します。hexoコードをビルドする定義（buildspec.yml）は以下のようにしました。
version: 0.2
phases:
install:
runtime-versions:
nodejs: 10
commands:
- npm install -g hexo-cli
- npm install
build:
commands:
- hexo generate
- zip -r public.zip public appspec.yml
artifacts:
files:
- public/**/*
- appspec.yml
3-1-4. アーティファクトの設定
アーティファクトはビルドした資材を格納する場所になります。buildspec.ymlのartifactsで指定したファイルが圧縮され格納されます。
今回はS3に配置するため、「タイプ」には “Amazon S3” を選択し、配置先のS3のバケット名を指定します（事前にS3バケットを作成する）。「名前」はS3に格納する圧縮ファイル名になります。出力アーティファクトを圧縮して配置する場合は「アーティファクトのパッケージ化」を “Zip” にします。
3-2. EC2にCodeDeploy用の設定を行う
3-2-1. EC2にタグをつける
EC2のインスタンス画面からデプロイ対象とするEC2インスタンスを選択し、「アクション」の “インスタンスの設定” -> “タグの追加／編集” を押しタグを追加します。キーと値は任意です。（後ほどCodeDeployで対象のEC2を選択する際に利用します）
3-2-2. CodeDeployエージェントをインストールする
CodeDeployでEC2にデプロイする場合、EC2にCodeDeployのエージェントをインストールする必要があります。EC2にSSHログインし以下のコマンドを実行してインストールします。
sudo yum update
sudo yum install ruby
sudo yum install wget
wget https://aws-codedeploy-us-east-2.s3.us-east-2.amazonaws.com/latest/install
chmod +x ./install
sudo ./install auto
sudo service codedeploy-agent status
3-2. CodeDeployでデプロイ設定を作成する
CodePipelineのデプロイフェーズにCodeDeployを利用するため、先にCodeDeployでデプロイ設定を作成します。
AWSコンソールのサービスから「CodeDeploy」を選択し「アプリケーション」と「デプロイグループ」を作成します。１つのアプリケーションに複数のデプロイグループがぶら下がるイメージになります。
3-2-1. アプリケーションの設定
CodeDeployから「アプリケーション」を選択し、「アプリケーションを作成」ボタンを押しアプリケーションを作成します。今回はEC2にデプロイするため「コンピューティングプラットフォーム」に “EC2/オンプレミス” を指定して「アプリケーションの作成」ボタンを押します。
3-2-2. デプロイグループの設定
作成したアプリケーションに「デプロイグループ」を作成するため、「デプロイグループの作成」ボタンを押します。
「サービスロール」には “AWSCodeDeployRole” をアタッチしたロールを作成し指定します。
「デプロイタイプ」には “インプレース” を指定します。
※デプロイにシステム停止が必要かつサイトは止めたくない場合は “Blue/Green” を利用します。
「環境設定」は “Amazon EC2 インスタンス” を選択し、タググループにEC2で作成したタグを指定します。
「デプロイ設定」は “CodeDeployDefault.AllAtOnce” を指定します。
「ロードバランシングを有効にする」も特に不要であったためチェックを外します。
3-2-3. appspec.ymlの追加
デプロイの仕様定義（配置先フォルダなど）をappspec.ymlに記述し、CodeBuildで作成した圧縮ファイル（アーティファクト）のルートディレクトリに配置します。
appspec.ymlファイルはリポジトリに一緒に格納し、buildspec.ymlでアーティファクトのルートディレクトリに配置するように定義しました。
appspec.ymlは以下のように定義しています。hexoのgenerateコマンドで生成した静的コンテンツ(publicディレクトリ以下の全てのファイル)をnginxのドキュメントルート以下に配置しています。
version: 0.0
os: linux
files:
- source: /public/
destination: /var/www/html/xxx
3-3. CodePipelineを作成する
最後にCodePipelineを作成し、CodeCommitの変更契機でCodeBuildとCodeDeployを実行していく設定を行います。
AWSコンソールのサービスからCodePipelineを選択し、「パイプラインを作成する」をクリックし作成していきます。
3-3-1. STEP1 パイプラインの設定を選択する
任意のパイプライン名を付け、サービスロールを選択します。特に使用したい既存のロールがなければ “新しいサービスロール” を選択。
高度な設定にある「アーティファクトストア」はビルド資材などを配置するS3バケットを指定します。特に既存のバケットを使いたいとかなければ “デフォルトのロケーション” を選択すれば自動的にS3バケットを作ってくれます。
「暗号化キー」は “デフォルトのAWSマネージド型キー” を選択。
3-3-2. STEP2 ソースステージを追加する
ビルド／デプロイ対象となるソースを指定します。ここではCodeCommitの変更を検知するための設定を行います。
「ソースプロバイダー」に “AWS CodeCommit” を選択し、監視対象の「リポジトリ名」と「ブランチ名」を指定します。
「検出オプション」は推奨の “Amazon CloudWatch Events” を選択します。これでCodeCommitの指定リポジトリ／ブランチの変更契機でCodePipelineを実行してくれるCloudWatchEventが作成されます。
3-3-3. STEP3 ビルドステージを追加する
次にソースコードをビルドする設定を行います。
事前に作成したCodeBuildを利用するため、「プロバイダーを構築する」で “AWS CodeBuild” を指定し、作成したCodeBuildを「リージョン」と「プロジェクト名」に設定します。
3-3-4. STEP4 デプロイステージを追加する
次にビルドした資材をデプロイする設定を行います。
事前に作成したCodeDeployを利用するため、「デプロイプロバイダー」に “AWS CodeDeploy” を指定し、作成したCodeDeployを「リージョン」と「アプリケーション名」「デプロイグループ」に設定します。
3-3-5. STEP5 レビュー
最後に確認を行い「パイプラインを作成する」ボタンを押して完成です。