AWSのCodePipelineを使ってHexo(静的CMS)コードのビルドとデプロイを自動化してみた


静的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レベルなので実質ほぼ無料でした。

CodeCommit5ユーザまで無料
CloudWatchイベントカスタムイベントを除くすべてのイベントが無料
CodePipelineアクティブなパイプラインを1か月あたり1つ無料
CodeBuildbuild.general1.small(3GB, 2vCPU)の場合、1 か月あたりビルドを 100 分無料で使用可能
CodeDeploayEC2/Lambdaへのデプロイは無料
S30.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」を選択し「アプリケーション」と「デプロイグループ」を作成します。1つのアプリケーションに複数のデプロイグループがぶら下がるイメージになります。

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 レビュー

最後に確認を行い「パイプラインを作成する」ボタンを押して完成です。

カテゴリーAWS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です