オリンピック調査サイトを作った話

はじめに（作った理由）

1.オリンピックチケットを持っているのですが開催されるかされないかまだわからない状態で他のみんなはどんな気持ちなのかを知りたかった。

2.Netflixでドハマリしていたブレイキング・バッドを観終わって暇でした。

の理由で作ってみました。

おすすめ→ブレイキング・バッド
※ハマり過ぎに注意です。

作ったもの

作ったのも
※役目を終えて停止中

この記事を書いている時点では皆さん真剣なコメントを書いてくれています(最初の数コメントは私が書きましたが)

機能

・オリンピック開催に「賛成」「反対」「どちらでもいい」を投票できる。
・集計結果をひと目で確認できる。
・コメントを読める書き込める

のシンプルな3つです

技術スタック

フロントエンド
Vue.js
Vuetify
Chart.js

バックエンド
FastAPI
Boto3 - AWSのPython用SDK

DB
DynamoDB

インフラ
CloudFront - フロントのCDN
S3 - フロントの配置
ALB - バックエンドのルーティング
ECS - バックエンドの配置
Fargate - コンテナの実行環境

システム構成

おおまかに下記のような構成になっています。
SPAでサーバレス。
VueからのAPIをFastAPIが返すというような流れです。

フロントは、Vueをビルドして静的ファイルが生成できるので、それをそのままS3のWEBサイトホスティング機能を利用して公開しています。
ログイン機能を実装しないで複数回回答されないようにするにはどうしたらいいのかを考え、いろいろと案が浮かんだのですが一番手っ取り早いローカルストレージに回答ステータスを保存する方法で実装しました。(クリアされたらそこまでですが。。)

バックエンドは、FastAPI(Python3.8)を初めて利用してみました。
今まではFlaskは触った事はあるのですが、最近のPythonのAPI系はDjangoやFlaskよりもFastAPIのほうがイケている、ということでなんとなく利用してみましたが、良かったです。
ドキュメントも日本語が整っていました。
標準でSwaggerUIが使えて おー! ってなりました。
あと本番用のコンテナイメージが用意されているのもポイントかもしれないですね！

インフラは、始めてコンテナをデプロイしてみました。
ECSが思っていたよりも便利でよかったです。
マシンに「EC2」か「Fargate」を選べるのですが、せっかくなのでAWSのマネージドでサーバレスなFargateを使ってみました。(EC2よりも20%高いですが😀。　今のAWSアカウントは無料期間なので贅沢しました)
ローカルの開発用コンテナをイメージ化してほとんどそのままECRにプッシュして利用しています。
ECRへのプッシュの方法も丁寧に説明されているのでとても安心です。

UI/UX

私は元々インフラをやっており最近WEB業界に転職してプログラムをやるようになりました。
しかし、デザインに関してはまだあまりやったことがありませんでしたので誰でも簡単にいい感じのデザインをすることができるVuetifyに頼ることにしました。

Vuetifyとてもいいです。

グリッドシステムがあるのでモバイルへの対応も簡単です。

チャートにはChat.jsのvue用にラッパーされたvue-chartjsを利用しています。
少しだけ本家のChart.jsと仕様が違うので注意が必要です。

苦戦したところ

あえて言うなら「DynamoDB」です！！！！！！！！！！！！！

やっぱり検索(SQLでいうWHERE句)に弱いです。というよりまだなれていないので設計が甘いというのもあるかもしれませんが。。

今回でいうとコメントを表示する件数を絞るときなど、
DynamoDBではプライマリーキーとソートキーというクエリに利用するカラムのようなのを設定できるのですが、、
というのが問題でこの2つしか設定できません！！
GSIという機能を利用すると他のカラムでクエリ条件を絞ることもできますがこちらも5個までという制約があります。

例えば下記のようなテーブルからageが何歳以上何歳以下というような条件で絞り込みたいと思ってもできません。
一つのカラムには一つの条件しかクエリできません。
そのようなことをしたいと思ったらscanコマンドを利用して一旦テーブルからすべてのデータを取得して自前のコードで値を絞り込むなどしないといけません。
そのような要件が最初から決まっているのであればDynamoDBの選定は再度検討してもいいかもしれません。

userId	age	name	email
1	24	Olivia	[e-mail]
2	32	Emma	[e-mail]
3	18	Isabella	[e-mail]

感想

今回はとてもシンプルなサイトでしたがUI/UXを考えるのが純粋にとても楽しかったです。
基本的にFargateやDynamoDBなどAWSのマネージドサービスを利用して、ほんとに簡単に構築できるし保守運用のことをあまり考えずにすみサービス開発に専念できると感じました。
あとはAWSを久しぶりに触ったのですが、コンソールが新しくなっていて「あれはどこいった？」みたいなこと多かったです。。
AWSのアップデート恐るべしです。こまめに触ったりするか、IaCで構築できるようになってということですかね。。

最後までご覧いただきありがとうございました。
今後もこのようなちょっとしたものを作って皆さんに共有しいきたいと思います。