「Muddy Web #9 - 泥臭いフロントエンドの現場」に参加してきました

• 2024/8/27
• https://cyberagent.connpass.com/event/325969/

FastlyとfalcoでNode.jsレスなWebサーバーの構築: IPTV版ABEMAアプリのインフラ刷新

• Tadahiro Noguchi (@nodaguti)さん
• https://speakerdeck.com/nodaguti/building-web-server-using-fastly-and-falco-without-node-dot-js-for-iptv-abema-app

IPTV版ABEMA

• ABEMAをテレビで見ることができる
  • Linuxを搭載していてWebベースのもの
  • Androidを搭載してAndroid技術で作るもの
• IPTV
  • IP技術でビデオコンテンツをテレビへ提供する技術

インフラ構成

• もともとはhtmlをNodeサーバからcss/jsはCloudStorage
  • NodeやCloudStorageが露出している
  • gzip化されてない
  • Nodeサーバの物理的な位置
• CDNを導入
  • htmlは事前に静的ビルドできたのでNodeサーバなくせた
  • 動的部分はCDNのエッジでファイル出し分け
  • CloudStorageはCDNからしかアクセスできないように制御
  • CDNでgzip/br圧縮できた

Fastlyとfalco

• Fastly
  • Web版で使ってた
  • VCLでエッジにロジックおける
  • ロジックのテストどうするか
    • ローカルではNode環境で
• falco
  • Fastly VCLの開発補助ツール
  • Linter/Formatter/テストなどなど
  • simulatorでローカルで動かすことも
    • バックエンド差し替えてCloudStorageには向かないようにできる
  • vscode拡張にも組み込まれてる

コードメトリクス計測による課題可視化と品質確保

• Masatoshi Morita(@texdeath)さん

コードメトリクス

• チームの具体的な品質指標がほしかった
  • FEチーム/BEチーム行き来しながら開発することも
  • ルールを固めてスピードを落とすのは避けたかった
• 技術選定
  • octocov
    • GitHub Actionsに特化
    • 特定の用途しか使えなさそう
  • SonarCube
    • ダッシュボードがあって分析できそう
    • カスタマイズの敷居が高い
      • 環境の構築とか
  • ESLint
    • 導入が手軽で拡張性が高かった
• ESLintのルール
  • 循環的複雑度を重点的にチェック
  • jsonにレポートを出力して修正すべき箇所をまとめる

Amebaチョイス立ち上げの裏側 ~ 依存システムとの闘い ~

• Daichi Igarashiさん

Amebaチョイス

• 商品を比較するメディア
• 商品情報のCMSと記事情報のCMSがある
  • 記事用のCMSはhtmlが返ってくる
  • Reactで扱いづらい
• それぞれアクセスするサーバがある
  • React/ExpressとNext

マイグレーションコード自作して File-Based Routing に自動移行！！ ~250 ページの歴史的経緯を添えて~

• Rei Katoさん

TanStack Routerへの移行

• 管理画面の話
• SPAでSSRしていない
  • GCSからhtml/css/js返してる
• 250ページある
• ロール管理が複雑
• ReactRouterのv5使ってた
  • 型がつかないのが大変
• TanStack Routerに移行
  • ファイルベースのルーティングに
  • 既存のファイルを読み込んでディレクトリを生成していく
  • jscodeshiftでAST見て頑張った
• 状態管理ライブラリの混在
  • Unstated/Recoil/TanStack Query
  • Unstatedを使ってるところはコンポーネントの構造が違うから地道に分岐