Circuit Xのリプレイス開発での技術選定（フロントエンド編）

2021年12月20日 12:35

はじめまして、こんにちは。フクロウラボでフロントエンド開発を中心におこなっています加藤と申します。

今回はフクロウラボで現在進行中のリプレイス開発について、フロントエンド事情をお届けしていきます。

サービスの説明

フクロウラボではアプリ向けのクローズド型アフィリエイトネットワーク「Circuit X」を運用しており、提供開始から7年ほどが経ちました。

7年という歳月のなかで、要件が変わったり、技術が古くなったりしてシステムにほころびが出てきており、リプレイス開発が急ピッチでおこなわれています。

現在の開発対象は、Circuit Xの管理画面。
広告主さま、メディアさま、そして社内ユーザーがそれぞれの用途で使っており、広告出稿やキャンペーン一覧、広告効果や収支のレポート、社内向けの運用にまつわる機能など、機能は多岐に渡ります。

既存システムはRuby on Railsで作られており、ブラウザでの表示もRailsが担っています。大半が slimとjQueryで書かれており、一部Vue.jsが使用されています。

画面の読み込みの遅さやデザインの統一感のなさ等、既存システムの問題が増え、保守開発も難航しておりリプレイスの機運が高まっておりました。

リプレイスするにあたり、すでに使われているVue.jsを使用する道もありましたが、GraphQLを使用する予定だったため、より相性のいいReact.js + TypeScriptを使用することにしました。

Next.jsを使用しています。

チームメンバーが自分以外はReact未経験だったので、ややこしいビルド周りやルーティングの最適化などに悩まずに済むようNext.jsを採用しました。

実際に開発を進めてみると、useEffectやカスタムフック周りで戸惑うことはありつつも、比較的スムーズに開発できていると思います。

Chakra UIを採用しました。

採用理由は以下の２点です。

前提として、デザイナーにデザインを作成してもらう時期、エンジニアのみでデザインを作成する時期が想定されたので、

という２点がありました。

候補としてMUIと、Tailwind CSS + Headless UIも挙がりましたが、MUIはスタイリングしづらく、Tailwind CSS + headless uiはデザイナー不在の場合にデザインに困りそうだったので落選しました。

現在は業務委託でデザイナーさんに入ってもらい、デザインをおねがいしています。
デザインの制限として、chakra ui標準のデザイントークンを使用してもらっており、今後デザイナーさんが不在になっても、ある程度デザイン性の担保になるかなと想定しています。

Next.jsのSSRをECSで配信、GraphQLサーバーはAWS AppSyncを使用しています。

Amplifyでの配信も考えられましたが、既存システムとの兼ね合いでALBのパスベースルーティングの必要があり、ALBのターゲットグループに指定できるECSを選ぶことになりました。

AppSyncからは、LambdaやRDS Proxyを用いて、既存システムが使用しているRDSから情報を取得しています。

リプレイスは画面単位でおこなっており、リプレイス済みの画面は/v2/***というパスで公開し、既存のパスは閉じてリダイレクトさせるようにしています。

まずブランチは以下の３種類あります。

main、stgがそれぞれ本番とステージング環境に紐付いており、開発時はstgからfeatureを切って作業しています。

CICDはcircleciでおこなっています。

小さな変更を早くデプロイすることを目標にしているのですが、stgを足したことでgithubフローのようなスピード感が出ていません。
stgにマージ後は自動でリリースPRを作成するようにして、多少の改善をおこなっていますが、もう少し詰めていきたい部分です。

Circuit X管理画面のリプレイス開発（フロントエンド）で使用している主な技術スタックについて紹介しました。まだ初期段階で粗い部分もありますが、なにかの参考になれば幸いです。

まだまだ課題は山積みでゴールは遠いですが、なるべく早く完成報告ができる日を夢見て精進を続けます。

（おわり）

この記事が気に入ったらサポートをしてみませんか？