インフラ構成設計書
| Qiita用ブラッシュアップ | 未着手 |
|---|---|
| ステータス | 完了 |
| 作成日時 | |
| 最終更新日時 |
1. はじめに（目的）
本定義書では、まるっとMonegerにおける開発環境および本番環境のインフラについて定義したものである。
2. システム全体の構成
開発環境
開発環境はWindows Hyper-Vを使用したlinux(Ubuntu)仮想環境にて、docker docker-composeで作成したコンテナを利用する。
| コンテナ名 | 使用イメージ | ポート | 用途 |
|---|---|---|---|
| frontend | node:18 | 5173:5173 | Reactプロジェクトを動かす |
| backend | php:8.2-fpm | 9000 | Laravel アプリケーションサービスを動かす |
| db | mysql:8.0 | 3306:3306 | Laravel アプリケーションサービスで接続するDB |
| phpmyadmin | phpmyadmin/phpmyadmin | 8080:80 | DBテーブルやデータを容易に確認できるようにする |
| nginx | nginx:stable-alpine | 80:80 | リバースプロキシとして動作し、フロントエンドまたはAPIリクエストを適切なコンテナに転送する |
version: '3.8'
services:
nginx:
image: nginx:stable-alpine
ports:
- "80:80"
volumes:
- ./nginx/default.conf:/etc/nginx/conf.d/default.conf
- ./frontend/dist:/usr/share/nginx/html
depends_on:
- frontend
- backend
networks:
- app-network
backend:
container_name: backend
build:
context: ./
dockerfile: ./backend/Dockerfile
volumes:
- ./backend:/var/www
environment:
- DB_CONNECTION=mysql
- DB_HOST=mysql
- DB_PORT=3306
- DB_DATABASE=myapp
- DB_USERNAME=root
- DB_PASSWORD=secret
expose:
- "9000"
depends_on:
- mysql
networks:
- app-network
frontend:
build:
context: ./
dockerfile: ./frontend/Dockerfile
volumes:
- ./frontend:/app
# - /app/node_modules
working_dir: /app
command: ["npm", "run", "dev"]
ports:
- "5173:5173"
networks:
- app-network
mysql:
image: mysql:8.0
ports:
- "3306:3306"
environment:
MYSQL_DATABASE: myapp
MYSQL_ROOT_PASSWORD: secret
volumes:
- mysql-data:/var/lib/mysql
networks:
- app-network
phpmyadmin:
image: phpmyadmin/phpmyadmin
restart: always
ports:
- "8080:80"
environment:
PMA_HOST: mysql
PMA_PORT: 3306
networks:
- app-network
volumes:
mysql-data:
networks:
app-network:
driver: bridge
本番環境
本番環境はAWSを利用したデプロイを想定。
バックアップとリストアに強いクロスリージョン構成。プライマリサイトにTokyo region、DRサイトにCanada regionを利用する。
各サービスの役割
| サービス名 | 役割 |
|---|---|
| Route 53 | クライアントからのリクエストをAWSクラウド内のVPCに案内する また、死活監視によりTokyo regionに異常を感知した場合、Canada regionへとルートを切り替える |
| Application Load Balancer | ECSへルーティングする |
| CloudFront | S3へルーティングする |
| S3 | Reactアプリの静的ファイル（HTML/CSS/JS）をホスティング |
| ECS + Fargate | nginxにパスが渡され、nginxがLaravelにリクエストを渡し、Laravelはルートに応じた処理を行う |
| RDS | Laravelアプリケーションサービスで使用するDB(MySQL) |
| Cognito | 本システムの認証を担う |
| ACM | SSL証明書の発行 |
| AWS backup | RDSのバックアップをCanada regionへと送るために使用 |
4. ドメイン・サブドメインの設計
| 種別 | ドメイン名 | 用途 |
|---|---|---|
| メインドメイン | moneger.net | 管理用のドメイン Route53で管理 |
| サブドメイン | www.moneger.net | Cloud Frontへとルーティングする |
| api.moneger.net | ALBへとルーティングする |
⚠️
ドメインは未取得(2025/06/11現在)
5. 認証方式
開発環境
本番環境での認証をAWS Cognitoを想定しているため、開発環境ではユーザーIDを1に固定。Cognito使用時のコードはコメントアウトにて追記。
本番環境
Cognitoを利用したJWTトークンベース認証を想定している。
ログイン
| 処理実行場所 | 手順 |
|---|---|
| フロントエンド | ①Cognitoへログインリクエストをし、トークンを得る |
| ②バックエンドにトークンを送る | |
| バックエンド | ③初回通信時であれば、ミドルウェアで送付されたトークンからsubを取得し、usersテーブルのsubカラムに挿入する |
| ④初回通信時以外は、ミドルウェアで送られてきたトークンから、ユーザー情報の照会を行う | |
| ⑤cookieにトークンを保持するよう、ログインAPIのレスポンスで設定する。その際セキュリティ設定（6.セキュリティポリシーに記載）を行う | |
| フロントエンド | ⑥以後の通信は、axiosでwithCredentials設定を行い、Cookieに保存されたトークンを自動送信する構成とする |
ログアウト
| 処理実行場所 | 手順 |
|---|---|
| フロントエンド | ①ログアウト処理をバックエンドに送る |
| バックエンド | ②cookieに保持されているトークンを削除するよう、ログアウトAPIのレスポンスでSet-Cookieヘッダーを返す |
6. セキュリティポリシー
CORS
- Laravelのcors.phpにて、以下の設定を行い不要な接続をさせない
CSRF＆XSS
- 今回はAWS Cognitoを使用したトークンベース認証を行う
- トークンはCookieに保管するが、XSS対策としてHttpOnly属性を付け、CSRF対策としてSameSite属性をStrictにして、盗聴対策としてSecure属性を付け、トークンを使用した攻撃の対策を行う
- ReactではdangerouslySetInnerHTMLの使用を禁止する
- バックエンドでバリデーションチェックを行い、不正なスクリプトの実行を防ぐ
HTTPS
- Cloud Front、Application Load BalancerともにACMを利用してSSL証明書を発行し、通信内容が暗号化されるHTTPS通信を行う
7. 今後の拡張性や懸念点
拡張性
- AWSを利用しているため、メモリやCPUのスペックを容易に変更することが可能
- フロントエンドとバックエンドを分離しているため、個別に拡張可能
懸念点
- アクセスを処理するAWSのサービスを利用しているため、アクセス数によって想定以上の費用がかかる可能性がある。対策としてAWS Budgetsを利用し、予算以上の費用が掛かってしまっている場合は気づくことが出来るようにする