diff --git a/README.md b/README.md index 6de222a..09ee3b6 100644 --- a/README.md +++ b/README.md @@ -3,13 +3,128 @@ ## プロジェクト概要 本プロジェクトは、Project LINKS が提供する「モーダルシフト関連データ 自動車輸送統計調査」([データセットはこちら](https://www.geospatial.jp/ckan/dataset/links-modalshift-2024))を活用し、 -日本全国を舞台に“絵葉書”が移動する様子を楽しめる SNS サービスです。 +日本全国を舞台に"絵葉書"が移動する様子を楽しめる SNS サービスです。 ユーザーは、移動アルゴリズムによって絵葉書がどのように旅をするかを可視化し、他のユーザーと共有できます。 - Progate ハッカソン powered by AWS で作成 - バックエンド: FastAPI - フロントエンド: Next.js(PWA 対応) +## Tech Stack + +### Backend + +backend tech stack + +### Frontend + +frontend tech stack + +### Infrastructure + +infrastructure tech stack + +```mermaid +graph TB + %% Users and External Services + User[👤 User] + GitHub[📚 GitHub Repository] + + %% Frontend/Client + subgraph "Frontend (Client)" + Client[📱 React Client App] + Amplify[🚀 AWS Amplify] + end + + %% Core Infrastructure (Terraform) + subgraph "Core Infrastructure (Terraform)" + %% Authentication + Cognito[🔐 Amazon Cognito
User Authentication] + + %% Compute Layer + subgraph "Compute Layer" + ALB[⚖️ Application Load Balancer
with SSL Certificate] + ECS[🐳 ECS Fargate Cluster
Container Service] + EC2[🖥️ EC2 Auto Scaling Group
with IAM Instance Profile] + ECR[📦 ECR Repository
Container Images] + end + + %% Data Layer + subgraph "Data Storage" + DynamoDB[🗄️ DynamoDB
NoSQL Database] + S3[🪣 S3 Bucket
Static Files & Images] + end + + %% Lambda Functions + Lambda[⚡ Lambda Function
update-location
Cron: Every 5 minutes] + + %% Notification Services + SNS[📧 Amazon SNS
Push Notifications
with Firebase Integration] + + %% Location Services + Location[🗺️ Amazon Location Service
API Key for Maps] + + %% Monitoring & Logs + CloudWatch[📊 CloudWatch
Logs & Monitoring] + end + + %% CI/CD + subgraph "CI/CD Pipeline" + GitHubActions[🔄 GitHub Actions] + OIDC[🔑 OIDC Provider
for GitHub Actions] + end + + %% User Interactions + User --> Client + Client --> Amplify + + %% Amplify Services + Amplify --> Cognito + Amplify --> S3 + Amplify --> Location + Amplify -.-> DynamoDB + + %% Main Application Flow + Client --> ALB + ALB --> ECS + ECS --> DynamoDB + ECS --> S3 + ECS --> SNS + ECS --> CloudWatch + + %% Lambda Integration + Lambda --> DynamoDB + Lambda --> CloudWatch + CloudWatch -.->|Cron Trigger| Lambda + + %% Container Management + ECR --> ECS + EC2 --> ECS + + %% CI/CD Flow + GitHub --> GitHubActions + GitHubActions --> OIDC + OIDC --> ECR + GitHubActions --> ECS + + %% Styling + classDef user fill:#e1f5fe + classDef frontend fill:#f3e5f5 + classDef compute fill:#fff3e0 + classDef storage fill:#e8f5e8 + classDef serverless fill:#fff8e1 + classDef auth fill:#fce4ec + classDef cicd fill:#f1f8e9 + + class User user + class Client,Amplify frontend + class ALB,ECS,EC2,ECR compute + class DynamoDB,S3 storage + class Lambda,SNS,Location,CloudWatch serverless + class Cognito,OIDC auth + class GitHub,GitHubActions cicd +``` + ## セットアップ手順 ### 前提条件 diff --git a/aws-architecture.md b/aws-architecture.md new file mode 100644 index 0000000..081316e --- /dev/null +++ b/aws-architecture.md @@ -0,0 +1,133 @@ +# AWS Architecture Diagram + +```mermaid +graph TB + %% Users and External Services + User[👤 User] + GitHub[📚 GitHub Repository] + + %% Frontend/Client + subgraph "Frontend (Client)" + Client[📱 React Client App] + Amplify[🚀 AWS Amplify] + end + + %% Core Infrastructure (Terraform) + subgraph "Core Infrastructure (Terraform)" + %% Authentication + Cognito[🔐 Amazon Cognito
User Authentication] + + %% Compute Layer + subgraph "Compute Layer" + ALB[⚖️ Application Load Balancer
with SSL Certificate] + ECS[🐳 ECS Fargate Cluster
Container Service] + EC2[🖥️ EC2 Auto Scaling Group
with IAM Instance Profile] + ECR[📦 ECR Repository
Container Images] + end + + %% Data Layer + subgraph "Data Storage" + DynamoDB[🗄️ DynamoDB
NoSQL Database] + S3[🪣 S3 Bucket
Static Files & Images] + end + + %% Lambda Functions + Lambda[⚡ Lambda Function
update-location
Cron: Every 5 minutes] + + %% Notification Services + SNS[📧 Amazon SNS
Push Notifications
with Firebase Integration] + + %% Location Services + Location[🗺️ Amazon Location Service
API Key for Maps] + + %% Monitoring & Logs + CloudWatch[📊 CloudWatch
Logs & Monitoring] + end + + %% CI/CD + subgraph "CI/CD Pipeline" + GitHubActions[🔄 GitHub Actions] + OIDC[🔑 OIDC Provider
for GitHub Actions] + end + + %% User Interactions + User --> Client + Client --> Amplify + + %% Amplify Services + Amplify --> Cognito + Amplify --> S3 + Amplify --> Location + Amplify -.-> DynamoDB + + %% Main Application Flow + Client --> ALB + ALB --> ECS + ECS --> DynamoDB + ECS --> S3 + ECS --> SNS + ECS --> CloudWatch + + %% Lambda Integration + Lambda --> DynamoDB + Lambda --> CloudWatch + CloudWatch -.->|Cron Trigger| Lambda + + %% Container Management + ECR --> ECS + EC2 --> ECS + + %% CI/CD Flow + GitHub --> GitHubActions + GitHubActions --> OIDC + OIDC --> ECR + GitHubActions --> ECS + + %% Styling + classDef user fill:#e1f5fe + classDef frontend fill:#f3e5f5 + classDef compute fill:#fff3e0 + classDef storage fill:#e8f5e8 + classDef serverless fill:#fff8e1 + classDef auth fill:#fce4ec + classDef cicd fill:#f1f8e9 + + class User user + class Client,Amplify frontend + class ALB,ECS,EC2,ECR compute + class DynamoDB,S3 storage + class Lambda,SNS,Location,CloudWatch serverless + class Cognito,OIDC auth + class GitHub,GitHubActions cicd +``` + +## Architecture Overview + +このプロジェクトは以下の主要コンポーネントで構成されています: + +### Frontend Layer + +- **React Client**: メインのフロントエンドアプリケーション +- **AWS Amplify**: 認証、データ、ストレージ、位置情報サービスの統合 + +### Core Infrastructure (Terraform) + +- **ECS Fargate**: コンテナ化されたアプリケーションの実行 +- **Application Load Balancer**: SSL終端とトラフィック分散 +- **EC2 Auto Scaling**: 自動スケーリング機能付きインスタンス管理 +- **DynamoDB**: NoSQLデータベース +- **S3**: 静的ファイルと画像の保存 +- **Lambda**: 定期実行関数(5分間隔で位置情報更新) + +### Additional Services + +- **Amazon Cognito**: ユーザー認証とアクセス管理 +- **Amazon SNS**: Firebaseと連携したプッシュ通知 +- **Amazon Location Service**: 地図APIキーの管理 +- **CloudWatch**: ログとモニタリング + +### CI/CD Pipeline + +- **GitHub Actions**: 自動デプロイメント +- **OIDC Provider**: セキュアなAWSアクセス +- **ECR**: Dockerイメージのレジストリ diff --git a/client/app/profile/page.tsx b/client/app/profile/page.tsx index e57197e..fa16abc 100644 --- a/client/app/profile/page.tsx +++ b/client/app/profile/page.tsx @@ -20,6 +20,7 @@ import { import { getAuthToken, getAccessToken } from "@/src/utils/auth"; import { checkUserExists } from "@/src/utils/user"; import type { UserProfile } from "@/src/api/types.gen"; +import { PushNotificationManager } from "@/components/PushNotificationManager"; Amplify.configure(outputs); @@ -173,6 +174,11 @@ export default function ProfilePage() { + {/* Push Notification Settings */} + + {/* Actions */}