エンジニアリングブログのCI環境をCodePipeline・CodeBuildに移行しました。

はじめまして、みんなのウェディング 横山です。

ご覧いただいてる通り、みんなのウェディングではエンジニアリングブログを運営しています。今回、エンジニアリングブログのCI環境をCodePipeline&CodeBuildへ移行したので概要をお伝えします。

エンジニアリングブログは何を使って構築されているのか。

middleman という静的サイト構築用のフレームワークを利用しています。 middlemanでは記事の追加・修正後、HTMLファイルを再生成するためにビルド作業を行う必要があります。 みんなのウェディングのエンジニアリングブログでは、記事の追加・修正はマスターブランチへ変更をマージすることで行っています。こうすることで、マスターへのマージをトリガーにビルド作業および生成されたHTMLファイルのデプロイを自動で行うことができます。

ビルド&デプロイ自動化の仕組み

これまでは、CircleCIでビルドし、GitHub Pagesにデプロイしていました。 今回、AWSのマネージドサービスであるCodePipeline&CodeBuildでビルドし、S3バケットにデプロイするようにしました。 また、HTTPS化するためS3バケットの前段にCloudFrontを配置しています。CircleCIからCodePipeline&CodeBuildに変更した理由は2点あります。

  • 新しいサービスを検証してみたかった。
  • GitHub Pagesだと記事が反映されないことがあったため、S3にホスティング先を変える必要があり、どうせならHTTPS化も含めて全てAWSのサービスで完結する形にしたかった。

デプロイの流れは以下の図の通りです。

  1. マスターブランチに記事をマージ
  2. マージをトリガーにCodePipelineが動作
  3. CodePipelineに設定したCodeBuildが動作
  4. CodeBuildによって記事のビルド&S3バケットへのデプロイを実行
  5. ユーザからアクセスがあった際に、CloudFrontがバケットの内容をエッジロケーションにキャッシュ

CodeBuildの設定

プロジェクトを作成します。ソースにはブログ用レポジトリを指定します。レポジトリのルートディレクトリには、buildで行いたいコマンド(HTMLファイルのビルドとS3へのアップロード)を記載したbuildspec.ymlを置いておきます。また、デプロイ作業の際にS3へのアクセス権が必要になるので、権限を持ったユーザを作成し、環境変数にアクセスキー、シークレットアクセスキーを設定します。

# buildspec.yml
version: 0.1

phases:
  build:
    commands:
      - bundle install && bundle exec middleman build && bundle exec middleman s3_sync --force

CodePipelineの設定

パイプラインを作成し、Sourceとしてブログ用レポジトリのマスターブランチを指定します。 Buildには作成したプロジェクトを指定します。

CloudFrontの設定

HTTPS化するための証明書はACMで作成しました。 ディストリビューションに作成した証明書を設定し、クライアントとの通信をHTTPS化しています。また、Route53にエイリアスターゲットとしてディストリビューションのドメイン名を指定したエイリアスレコードを追加することでCloudFront経由でS3のコンテンツを配信するようにしています。

まとめ

AWSのマネージドサービスを利用することで非常に簡単にCI環境の移行、HTTPS化を行うことができました。 移行にかかった時間はわずか半日程度でした。 今後も、自社環境で使えそうな新機能は随時、利用していきたいと思います。


みんなのウェディングでは一緒に働く仲間を募集中です。
サービスの成長に携わっていきたい方や、0からサービスを作りたい、チームでサービスをもっと成長させてみたいエンジニアやデザイナーの方は、ぜひお気軽に遊びに来て下さい!
たまに人狼ゲームやボードゲーム会もやってます🐺