フロントエンドをサーバレスアーキテクチャへ移行した話

はじめに

FanTop事業本部エンジニアリングチームのテックリードを担当している菊地です。
今回はFanTopフロントエンドをサーバレスアーキテクチャへ移行した話についてご紹介します。

画像はFanTopオリジナルキャラクターの「あーちゃん」です。
FanTopのアプリ内でもNFTとして販売・配布されてたりします。

FanTopリリース直後の話

2021年の秋頃にFanTopがリリースされて以来1年半以上が経過していますが、当初は6か月という短期開発でプロトタイプから派生させてプロダクトを開発していました。短期間で開発するために社内外のスタッフが集まり、1つのプロダクトを集中して開発していました。

フロントエンドにおける課題

メディアドゥではシステム開発にあたっては基本的にAWSを使ってアーキテクチャを構築していますが、FanTopでは開発速度を最大化するために、社内外の様々なエンジニアが入り混じって複数のチームが平行して機能を開発していました。
チームはそれぞれ得意分野が異なり、中にはFirebaseに特化したチームもあったようで、AWSを使ってシステムを構成していたはずなのに一部のAPIにはFirebaseが使われていたり……。

そんなわけで、システム全体の構成が複雑化し、フロントエンドではデプロイ難易度がすこし高いという課題が発生していました。

当時のデプロイ作業では、手動でCDNのキャッシュ削除を行っていたり、環境変数を追加するたびに同じ設定を複数箇所にしていたりといった手動の作業が必要でした。そのためリリース粒度が大きくなってしまい、機能開発の完了からリリースまでのリードタイムもだんだん長くなっていたのです。

最終的にはリードタイムが1ヶ月超に長期化し、今度は修正の取りこぼしで手戻りも発生……。
そこでAWS上の構成を見直して、もっと早くデプロイできるようにしたいということで、改善に乗り出しました。

様々な対策を検討した結果、フロントエンドの実行環境を見直して、サーバーレスアーキテクチャへ移行できるのでは？という考えに至り、ECSで動いていたものをまるごとAmplify Hostingに移行することにしました。

サーバレスアーキテクチャ（Amplify Hosting）への移行

Amplify Hostingは本来静的なウェブページをホスティングするサービスだったのですが、後にNext.js SSR環境にもサポートが拡大されていました。

FanTopではフロントエンドを立てるためにECS上でNext.jsを動作させ、ほとんどのページでSSRを活用していました。これをAmplify hostingに切り替えることで、サーバレスアーキテクチャに移行できるのではないかということで技術検証を行い、実際に移行を開始。

フロントエンドは元々ECSで動いていて、外部からアクセスできるように公開するためにはCloudFrontやALBを立てる必要がありますが、Amplify Hostingにするとこれらが不要になりました。また、ビルドにはAWS CodeBuildを使ったワークフローを構築していましたが、これもAmplify Hostingの中でサイトをビルドすることができる機能があるため、それを利用することでシンプルになりました。

改善されたこと

その結果、全体のデプロイ作業がシンプルになり大幅に短縮され、約15分以上かかっていたデプロイ作業が5分程度になり、同時に、CDNのキャッシュを削除するといった手動の作業が不要になりました。

また、環境変数の更新もシンプルになり、これまではクライアントサイド・サーバサイドでそれぞれ用途に応じてECS・Dockerfile・CodeBuildに記述が必要だったものが一箇所に記述するだけで反映できるようになったのです。

その後、コードレビューなど開発上のワークフローも見直し、機能開発をした後すぐに本番環境にデプロイできるようになったことで、実装完了からリリースまでの時間が1ヶ月超かかっていたものを最長でも48時間程度までに短縮することができました。修正の取りこぼしや手戻りが起きづらく、起きたとしてもすぐに改修することができる開発体制を作ることができました。