Zenn
🛠️

フロントエンドのプレビュー環境を高速で構築する

2024/02/18に公開
AWS
frontend
tech

はじめに

皆さんはPRのレビュー用とかでフロントエンドのプレビュー環境をAWSに構築するとき、どのような構成にしてますか。
私はよくCloudFront + S3で構築しているのですが、この構成だとCloudFrontだと構築完了までにこうこう5～7分ぐらいとS3バケットへのオブジェクトアップロードでそれなりに時間がかかってしまいます。
そこで今回、S3バケットへのオブジェクトアップロードだけで済むような構成を考えてみました。

概要図

どのように実現するか

CloudFrontのなくすため、storage-gateway（ghcr.io/takenoko-gohan/storage-gateway）というサーバーを作成しました。
これは、リクエストのHostヘッダーをもとにS3バケットからオブジェクトを取得し返すものです。（例えばヘッダーの値がfoo.example.comだった場合、S3バケットfoo.example.comからパスのオブジェクトを参照する感じ）
あとはCloudFrontのようにデフォルトオブジェクト、オブジェクトが存在しないときに返すオブジェクトを環境変数で指定できるようにしてます。
また、CloudFront標準の機能ではないがGatsby.jsなどでも利用しやすいようにサブディレクトリのデフォルトオブジェクトも指定できるようにしてます。（例: https//foo.example.com/subdirの場合、s3://foo.example.com/subdir/index.htmlを参照する）

事前準備

事前の準備として、ALBと上記のstorage-gatewayを用意しておく必要があります。
ALBには、使用したいドメインのワイルドカード証明書（プレビュー環境のドメインでfoo.preview.example.com、bar.preview.example.comを使いたい場合は*.preview.example.comという証明書）をアタッチとRoute53にAレコード（ALBのエイリアス）を作成します。

storage-gatewayの起動には環境変数GW_ALLOW_DOMAINSで許可するドメインを設定（カンマ区切り、ワイルドカード可）する必要があります。（例: *.preview.example.com）
storage-gatewayターゲットグループは、以下のように設定します。

設定 値 備考
プロトコル HTTP
ポート 8000 環境変数でstorage-gatewayのポートを指定していない場合
ヘルスチェックポート 8080 環境変数でstorage-gatewayのポートを指定していない場合
ヘルスチェックパス /health

フロントエンドのデプロイ

あとは、プレビュー環境のドメイン名のS3バケットを作成しファイルを作成したS3バケットにアップロードすればプレビュー環境のデプロイが完了です。

例）PRごとにプレビュー環境の作成する場合

この構成の長所/短所

  • 長所
    • S3バケットにファイルをアップロードするだけなので期待した通り、プレビュー環境の構築時間は短くなる
    • 副次的であるが、ALBで認証設定をすることでOpenIDConnect（google認証とか）が利用できる
  • 短所
    • ALB + FargateになるのでAWSの費用がCloudFrontよりかかってしまう
      • 細かい構成にもよるが、月3000円～はかかりそう

Discussion