Miwataru

主にスキル向上を目的に、ポートフォリオとしてタスク管理アプリ (Miwataru) を作成しました。

これはシングルページアプリケーション (SPA) として作成しており、フロントエンドには、TypeScript / React、バックエンドには、PHP / Laravel、インフラには、Vercel (静的サイト) / AWS Lambda (API) を使用しています。詳細は後述の開発環境 (フロントエンド)、開発環境 (バックエンド)、本番環境をご覧ください。

アプリケーションや実装過程の説明については、以下のリンクからアクセスできます。

アプリケーション: ~~https://www.miwataru.com/~~
フロントエンド実装過程: https://github.com/zuka-e/laravel-react-task-spa/blob/development/frontend/README.md
バックエンド実装過程: https://github.com/zuka-e/laravel-react-task-spa/blob/development/backend/README.md

※ 注釈
SPA開発におけるGitHubのリポジトリについて、フロントエンドとバックエンドを同一のリポジトリにする方法と別に作成する方法が考えられますが、今回は同じリポジトリ内で開発を行っています。

ただこの場合GitログやBranchが混同するため、例えばフロントエンド側での記録のみを確認する場合に邪魔になることがあり、その観点ではリポジトリを分割した方が良さそうです。

分割する場合、フロントエンドとバックエンド間に依存関係があると困りますが、今回の場合これは特に問題ありません。バックエンドのサーバーが動作していれば、APIリクエストの確認も行うことが可能です。また、適切なテスト環境が整っていればそれぞれ独自に開発を進めることもできるので、コード自体に相互依存関係はありません。機会があればリポジトリを分割する方法も試行しようと思います。

機能

認証
- ログイン / ログアウト
  - Cookie / セッション
- ユーザー登録 / 表示 (マイページ) / 更新 / 削除
- メールアドレス認証
  - 未認証ユーザー削除 (定期処理)
- ユーザーパスワード更新
- パスワードリセット
- ゲストユーザーログイン (認証済み)
- ゲストユーザー登録 (未認証、ランダムメールアドレス)
タスク (カード) 管理
- 作成 / 表示 / 更新 / 削除
- リスト (カードグループ) 作成 / 表示 / 更新 / 削除
- ボード (リストグループ) 作成 / 表示 / 更新 / 削除
- 絞り込み
- 並び替え
  - 選択型 (日付、昇順 / 降順)
  - ドラッグ&ドロップ型
  - 状態保持
- 検索
- ページネーション

開発環境 (フロントエンド)

フロントエンドの開発言語としてTypeScriptを使用し、ライブラリとして使用したのはReactです。またこれらを基本とした開発環境の構築にはCreate React App (CRA)を用いており、これによって、Reactを実行し結果を確認できるサーバーなどのReactの利用に必要な環境が簡単に用意できます。その他実行環境は以下のようになっています。(括弧内の数字はバージョン)

Create React App (4.0.3)
- Yarn (1.22.10)
- Node.js (16.6.1)
- TypeScript (4.2.4)
- React (17.0.2)

尚、動作確認のブラウザには、Chrome (Mac、Android) を使用しています。

開発環境 (バックエンド)

バックエンドの開発言語にはPHP、WebアプリケーションフレームワークにはLaravelを利用しました。開発環境の構築には、Laravelから公式に提供されているLaravel Sailを用いており、これを実行することで開発用のサーバーが起動し、データベースやセッションストアの他、メール送信まで行うことができる環境が整います。

Laravel Sailにデフォルトで用意されている環境はカスタマイズすることも可能ですが、今回は特に変更を行っておらず、構築した環境は以下のようなものです。

Docker for Mac (3.6.0)
Laravel Sail (1.4.7)
- PHP (8.0.5)
- Laravel (8.32.1)
- MySQL (8.0.23) - RDB
- Redis (6.0.10) - キャッシュ、セッションストア
- MailHog - メール送受信

本番環境

フロントエンド側で生成された静的ファイルのホスティングサービスとして、Vercelを選択しました。一方、バックエンドで作成したAPIは、AWS Lambdaで実行しています。そこで使用したサービスと用途については以下に列挙した通りです。

Vercel - 静的ファイルホスティング
CloudFormation - AWSリソース構成
Certificate Manager - SSL/TLS 証明書発行 (API用カスタムドメイン)
API Gateway - API (Lamdba) アクセス
Lamdba - サーバレスコンピューティング (Laravelアプリ実行)
VPC - 仮想ネットワーク構成
VPC Endpoint - VPC内外プライベート接続
RDS (MariaDB 10.4.13) - RDB
DynamoDB - キャッシュ、セッションストア
S3 - アセットストア
Amazon SES (SMTPインターフェイス) - カスタムドメインメール送信
IAM (ユーザー、ロール、ポリシー) - アクセス管理
Systems Manager (パラメータストア) - 機密情報保管
CloudWatch (ログ, イベント) - ログ管理、Lamdba関数トリガー (Cron)

インフラ構成図

アプリケーションの基本的な処理の流れとしては以下の通りです。

ユーザーは、VercelにデプロイされたURLからアプリケーションにアクセス
APIの機能が必要な場合は、API Gatewayに向かってリクエストを送信
API Gatewayによって呼ばれたLambdaが以下のような処理を実行
1. Cookieの付与、DynamoDBによるセッション管理
2. データベースからデータの取得や更新
3. 必要に応じてユーザーにメールを送信
4. ログをCloudWatchに保存

これを表しているのが以下の図です。

上記で触れていないポイントについて簡潔に説明していきます。

まず図の上部のCloudFormationについて、これは設定ファイルに基づいてAWSリソースの構成が役割です。このとき例えばパスワードなどの秘匿情報が必要となるので、Systems Managerのパラメータストアという機能を用いてその値を安全に扱っています。

次に、Certificate Managerについて、これはカスタムドメインに対するSSL/TLS 証明書の発行を行っています。ここで設定するドメインはブラウザのURL欄に表示されるものではなくそのサブドメインです。ユーザーが直接アクセスするメインのドメインはVercelによって設定を行います。

次に、Lamdbaについて、まず前提として通常LambdaをVPC内に設置しませんが、ここではVPCと共に構成しています。これはRDSとの接続を行うためです。RDSはVPC内に設置されているので、アクセスするためにはパブリックアクセスを有効にするかまたはVPCから行う必要があります。後者の方がセキュリティの観点で優れているため、VPC内でLamdbaを利用しています。

一方、LambdaはDynamoDB及びSESにも接続していますが、これらはRDSとは異なりVPC外のリソースです。通常アクセスするためには、Lambdaのロールに適切なポリシーをアタッチするのですが、VPC Lambdaはインターネットに接続不可能という問題があり、これだけではまだVPCの外に存在するリソースにアクセスできません。そこで、間にEndpointを挟むことでその問題を解決することが可能です。

最後に図の下部に位置しているLambdaについて、これは先述のものとは異なり、APIリクエストによって実行されるのではなくイベントをトリガーとして起動します。ここではスケジュールをイベントとし、指定した時間になると事前に設定した関数を実行する仕組みになっています。

以上が今回構成したインフラの概要です。

参考：
Environment variables - Bref # Secrets
Custom domain names - Bref
Using a database - Bref # Accessing the internet
Cron functions on AWS Lambda - Bref

ER図

Laravelでは初めから様々なマイグレーションファイルが用意されています。それらを含めて自動的に生成されたER図は以下のようになりました。

上記の図の内、今回のAPIのために作成したのはusersと繋がっている部分です。タスクをtask_cards (カード) という最小単位で扱い、それらの集合がtask_lists (リスト) となり、task_board (ボード) は複数のリストを持つという関係になっており、またそれぞれがusersに所属しています。

尚、ER図の作成には、MySQL Workbenchというツールを用いています。