Netlify CodeBuild でデプロイや

先日、弁護士ドットコム株式会社のコーポレートサイトをリニューアルしました。このサイトはアプリケーションで実現されていましたが、その主な目的はお問い合わせフォームの設置でした。弁護士ドットコムを始めとする事業系のプロダクトと違い、コーポレートサイトなどは決まったエンジニアやデザイナーの担当がつかず、文言などのちょっとした変更などにはその都度アサインがされます。だけど、それ以上のこととなるとなかなか優先度が上がらず、 OS やらなんやらがひたすら陳腐化が進み、余計に手が入れられなくなります。

そこで今回重い腰を上げ、基本的には見た目等には手を入れず、思い切ってアプリをやめて Netlify による静的ファイルホスティングにしてみました。 Forms setup | Netlify Docs を見ると Netlify でフォームの入力ができることがわかります。なんとスパムフィルターや通知設定 から Webhook が使えるので Slack への通知ができることもわかります。

今回やってみた基本的な構成は以下のようになっています。

＊ GitLab : 社内のプロジェクトのソースコードは基本的に GitLab で管理されています
＊ CodePipeline : CodeCommit と CodeBuild を使っています
　　＊ CodeCommit : GitLab に push すると CodeCommit にミラーリングされる設定を入れています
　　＊ CodeBuild : Node をランタイムとして用意し Netlify にデプロイしています
＊ Netlify : ホスティングとお問い合わせフォームに使用しています

GitLab

プロジェクトの Repository Settings に Mirroring repositories という項目があるので、 CodeCommit に関する設定をします。

CodePipeline

ソースステージとして CodeCommit を選びます（2020年4月時点ではソースステージとして GitLab は選べない）。また、ビルドステージとして CodeBuild を選びます。

CodeCommit

使用するブランチを選びます。開発時の Pipeline 用には development ブランチ、リリース時の Pipeline 用には release ブランチなど、開発のフローに合わせて選ぶと良いでしょう。
なお、 IAM で CodeCommit に読み書きするポリシーを付けた gitlab-mirror のようなユーザーを作り、 GitLab からミラーリングの設定にはこのユーザーの認証情報を使っています。

CodeBuild

CodeBuild では AWS が用意したイメージ、もしくは任意のイメージを使うことができます。CodeBuild に用意されている Docker イメージ を見るとプラットフォームとランタイムとがいろいろ用意されていることがわかります。余談になりますが、ランタイムの中に android なんかもあって Android アプリ開発のビルド環境にも使えるんだなと気づいて驚きました。今回は netlify-cli を入れたいので AmazonLinux2 と Node の組み合わせにしました。

コンテナ内ですることは buildspec に記述するのですが、CodeBuild のビルド仕様に関するリファレンス を見るといろいろと丁寧に書かれています。今回はフェーズとして install/pre_build/build の3つのフェーズを使いました。各フェーズの中で実行する処理を commands の中に書いていきます。一部実際の内容から変えている部分もあるのですが、具体的には以下のような感じです。

version: 0.2
phases:
 install:
   runtime-versions:
     nodejs: 12
 pre_build:
   commands:
     - npm install netlify-cli -g
 build:
   commands:
     - netlify link --id $API_ID
     - netlify deploy --prod --dir=public

netlify コマンドを実行しているところで API_ID という環境変数を使っていますが、こちらは Netlify のサイトごとに払い出されるもので CodePipeline から渡すことができます。また、 netlify deploy のドキュメントにある通り、 User settings の Personal access tokens から払い出される値を NETLIFY_AUTH_TOKEN という環境変数を設定しておくと認証が通ります。

ちなみに、もろもろの処理がどのディレクトリで行われているかということを確認するのに commands の中に pwd なんかを入れてみたりしましたが、 clone したソースコードのディレクトリに cd したところから始まるようです。

まとめ

というわけで、見た目やサイトの機能はほとんど変わらないのですが、アプリケーションをやめることができて管理コストが下がってほっとしています。

おまけ

ちなみにお問い合わせフォームへの入力は無料の Starter プランだと月に100件までとなっていますが、半分くらいになったところでメールで連絡がきます。もしこれで足りないようであれば、プランはそのままで Forms のアドオンを Level 0 から Level 1 にすることで月の上限を1,000件まで引き上げることができます。