HAL EVENT WEEK

Twitter ライクな Web アプリ

作成動機

TypeScript React を用いたモダンフロントエンド
PHP Laravel を用いたモダンバックエンド構築
Infrastructure as Code によるインフラ構築

の 3 点を総合的に学ぶことを目的として、構築しました。

リンク

展示open in new window

リポジトリopen in new window

API 仕様open in new window

参考画像

実際の投稿画面 投稿画面 簡単なインフラ構成図 インフラ構成図 CI の様子 CIの様子

利用技術

成果物Twitter ライクな Web アプリケーション
エディタIntelliJ IDEA Ultimate / VSCode
バックエンドLaravel 9 + PHP 8.2.1 (sail 利用)
ミドルウェア等Redis
フロントエンドReact 18 + TypeScript 4.9.4
データベースMySQL 8.0
インフラAWS (IaC 利用、バックエンド) / Cloudflare (バックエンド, フロントエンド)
CI/CDGithub Actions(GitHub-hosted)
認証Session Auth

注力した点

バックエンド構築

PHP/Laravel を利用してバックエンドを構築します。

構築の際、以下のことを考慮して行います。

  • Web サーバー

    • laravel.test を魔改造して nginx + php-fpm コンテナの組み合わせで動くように
      • sail デフォルトの laravel.test はあくまで開発用で PHP ビルトインサーバーで動いており、並列リクエストをさばけないため。
      • CI で trivy による脆弱性スキャンを行う

  • CORS 設定

    • 無意味に*をつけないこと。開発中でも同じ

  • 使用するフレームワークのお作法に乗っ取った設計をすること。

    • 例えば、バリデーションは FormRequest に移譲する等、コントローラが賢くなりすぎないように
    • Eloquent なら必要になるまで query や select を避ける。型の恩恵を最大限受けよう。

  • テスタブルな実装をしよう

  • 可能ならスキーマ駆動でやっていきたい。

    • 型の恩恵を最大限受けよう

  • Linter 等の静的解析で防げるものは防ぎましょう

フロントエンド構築

Vite/React + TypeScript を利用しています。

主に以下のことを考えています。

  • 概念を増やしすぎない

    • 実装時に考慮すべき箇所が増えるため

  • いわゆる責務の分離を徹底する

    • 親子になるコンポーネントがあったとして、親が子の状態を知っているべきかどうか、など

  • テスタブルな実装をしよう

    • 例えばフック類をまとめたカスタムフック化して別ファイルに切り出すなど。
    • カスタムフックにコンポーネントを渡す際にuseHooks(props, Hoge)と渡して、useHooks の中で以下のようにして呼び出すようにしよう。コンポーネントのモックができてお得です。
    React.createElement(Hoge, {
  onClick: handleClick,
});

  • 可能ならスキーマ駆動で

    • 型の恩恵を最大限受けよう

  • Linter 等の静的解析で防げるものは防ぎましょう

インフラ構築

今回利用したのは AWS です。 以下のことを意識しています。

  • ロールやポリシーを適切に扱いましょう
  • 予算はしっかりと管理して、必要ならばアラートをかけましょう
  • メトリクスの監視をして異常があれば通知を出しましょう
  • IaC する場合は
    • tflint 等の静的解析で防げるものは防ぎましょう
    • tfstate を S3 に置く場合は、バージョニングを有効にしましょう。また、排他ロックもしましょう。