電波祭ホームページ2024
2024/11 令和6年度 香川高等専門学校 電波祭
ユーザーが自身のオーガナイゼーションを設定し、情報を公開できる文化祭ホームページ。
ユーザーの送信情報をAI検証し、不正な投稿は自動的にブロックします。
搭載した機能
お知らせ
権限を持ったユーザーが投稿でき、オーガナイゼーションごとに管理されるお知らせページ。
・常時画面上部へ表示される重要なお知らせ機能を搭載
・画像も同時に投稿可能
模擬店情報
模擬店の名前や場所、団体名をリストで確認できる模擬店情報ページ。
・メニュー情報の追加が可能
・画像も追加可能
イベント情報
文化祭で開催するイベントを開催順に表示するイベント情報ページ。
・イベントの開始状況を視覚的に表示
オーガナイゼーション
組織ごとに公開情報を管理するオーガナイゼーションページ。
複数ユーザーでのアカウント共有を防ぎ、ホームページの不正利用を防止します。
・オーガナイゼーションごとに権限をオーナーが申請
・ユーザーごとにオーナーが権限を付与
・ユーザーは複数のオーガナイゼーションへアクセス可能
・オーガナイゼーションを複数ユーザーで使用
AI自動検証
今回のプロダクトでは学校のオフィシャルページだということで、ユーザーが送信したコンテンツには悪意のあるものが含まれる可能性があることから、コンテンツの検証が必要だという制約がありました。
この制約を達成するために、本プロダクトでは生成AIを用い、ユーザーの投稿を自動的に検証する機構を作成しました。
実装した機構
この機構には、AWS LambdaやAmazon Bedrock、Amazon SQSを用いてDjangoの処理サーバーから分離させて、実装しました。
この際にVPCプライベートサブネットに設置したRDSへDjangoを経由せずにアクセスする必要があり、VPC内でのLambdaの扱いに苦労しました。
感想
今回の開発では、初めてNext.jsをメインに作りました。
今まではDjangoのレンダーを使うことが多かったので、コンポーネント化がなかなか掴めずに苦戦しました。
また、SSRで実装したかったのですが、CSRメインで実装してしまったので、今後はSSRで実装できるように勉強したいです。
今回もインフラの部分に力を入れて設計しました。
文化祭期間中にサーバーがダウンしたりせずに、運用できて良かったです。
使用技術
Next.js
Tailwind CSS
Django
Nginx
gunicorn
Python
PostgreSQL
Claude
Docker
GitHub
インフラストラクチャ
VPC
Amplify
ECS
Fargate
ECR
Lambda
RDS
Bedrock
SES
SQS
SNS
CodePipeline
CodeBuild
Route 53
ALB