はじめに
この度、転職とスキル向上を目的に個人サービス(Football League)をリリースしました。
ITに関する学習は約1年ほど、その内の半年でサービスの開発をしました！
まだまだ修正箇所はあるものの、ひとまず形にはなったのでサービスの使用技術や開発過程を共有したいと思います。
私自身、独学で学習してきたのでそういった方々にとって少しでも参考になれば幸いです。
自己紹介
商業高校卒(サッカー部⚽️)
25歳
青森住み🍏
職業はトマト農家です🍅
どのようなサービスか
本サービスは、欧州5大リーグのサッカーの試合結果やチーム情報などを閲覧することができるWebサイトです。
ただ情報を閲覧できるだけでは面白みがないので、お気に入りのチームやリーグを追加することもできます。
なぜ作ろうと思ったか
私自身、小学生の頃から社会人になった現在までサッカーをやっています。
サッカーだけではなく、スポーツをやっている人であればなにかしらの情報サイトやアプリは使ったことがあると思います。
しかし、意外と自分が興味のあるチームや試合などの情報に特化したサービスは少ないと感じました。膨大な情報からすぐに興味のある情報へ辿り着けるようなサービスがあったらいいなと思いました。
特に、世界で一番注目されている欧州5大リーグに特化したサービスがあまり見当たらなかったので、これは自分で作ってみようと思い開発に至りました。
主要な使用技術
フロントエンド
- TypeScript (5.1.6)
- React (18.2.0)
- React Router Dom (6.14.1)
- Axios (1.1.2)
- React Hook Form (7.45.4)
- React Tooltip (5.18.0)
- React Card Flip (1.2.0)
- Tailwind CSS (3.3.2)
- Material-UI (5.14.6)
バックエンド
- PHP(8.0.2)
- Laravel(9.19)
- Laravel Sanctum(3.0)
- Laravel Fortify(1.17)
- Socialite(5.9)
- Guzzle(7.2)
コンテナサービス
バッチ
- AWS Lambda
- Python (3.11) - Lambdaランタイム
ストレージ
- Amazon Simple Storage Service (Amazon S3)
インフラどうする...
クラウド自体触ったこともなかったので理解するためにAWSの認定資格をいくつか取得しました。
今思えば本当に取得しておいて良かったと思います。そういえばあのサービスとこのサービスを組み合わせれば良かったんだよなみたいな感じで、アーキテクチャを構成する上で非常に役立ちました。
保有資格
| 資格名 | 取得月 |
|---|---|
| AWS Certified Cloud Practitioner (CLF-C01） | 2023年4月 |
| AWS Certified Solutions Architect Associate (SAA-C03） | 2023年4月 |
| AWS Certified SysOps Administrator Associate (SOA-C02） | 2023年4月 |
| AWS Certified Developer Associate (DVA-C02） | 2023年5月 |
| AWS Certified Solutions Architect Professional (SAP-C02) | 2023年12月 |
| AWS Certified DevOps Engineer Professional (DOP-C02) | 2023年12月 |
| AWS Certified Advanced Networking Specialty (ANS-C01) | 2024年1月 |
インフラ構成図
色々と調べた上で最もベーシックな構成にしました。
本来冗長化することが望ましいがコスト面を考慮して最低限のリソースに抑えています。(RDS高すぎた)
こだわりポイント
運用上、バッチでDBのデータを最新化する必要があるためバッチ処理を実装しています。
バッチの構成リソースはEventBridgeでデータ更新用のLambda実行をスケジューリングすることにしました。
(ここに至るまでもそもそもバッチとは、、みたいなところから調べました)
LambdaはRDSと通信が必要なので同じプライベートサブネットに置いています。
しかし、これだとLambdaがインターネットと通信ができなくなってしまうので、パブリックサブネットにNAT gatewayを配置してインターネット通信をできるようにしています。
バッチのログはCloudWatch Logsで収集しているので、今後はLambda,SNSなどを使用してSlackへの通知なども実装してみたい
その他
環境変数の管理
Lambdaで使用する環境変数はSSMのParameter Storeで管理しています。
APIキーやパスワードなどの秘匿情報に関してはKMSを使用してシークレットとして管理しています。
メンテナンスページ
EC2でメンテナンス時には、ALBでメンテナンスページを表示するようにしています。
CloudFrontやS3を使用しなくても固定レスポンスを返せるのはかなり便利だと思います。
ただ何かと制限もあるので、カスタマイズするなら他の方法が良さそう？
ざっくりと画面紹介
ログイン画面
入力時バリデーション
新規登録画面
登録後の認証確認通知
ホーム画面
試合詳細画面
試合の統計情報をゲージバーを使用して視覚的にわかりやすくしました。
各チームのフォーメーションを見やすく表示し、カーソルを合わせると選手の写真を確認することができます。
順位表画面
お気に入り追加
検索時にスケルトンローディングを実装しユーザーの待ち時間を直感的に短くしています。
お気に入りはサイドバーから確認可能
チーム詳細画面
リーグ詳細画面
選手詳細画面
設計の大切さを知る
作るものが具体的に決まり、プロジェクトに取り組む前に設計を行おうと思いました。しかし、設計といっても、最初の一歩を踏み出すのに苦戦しました。
最初はある程度、論理設計や画面設計、API設計などをして開発に取り掛かりましたが、設計がガバガバだったせいで何度も手戻りが発生し開発どころではなくなってしまいました。
コードを書きながらその都度修正していけばなんとかなるだろうみたいな感じで設計を軽く考えていたのが原因。
設計の重要性
この経験から、設計の重要性を痛感しました。設計はプロジェクトの土台であり、しっかりとした基盤があればコードの修正や変更にも柔軟に対応できます。しかし、ガバガバな設計ではプロジェクトが進行するにつれて構造が崩れ、修正が難しくなることがわかりました。
詳細な検討が必要
単なるアイデアや概念だけでなく、具体的な機能や要件、データベースの設計など、細部にわたって検討する必要があります。APIのエンドポイントやデータの流れ、UIなど、開発に入るだけでも考えなければいけないことが沢山あることがわかりました。
設計で使用したツール
Google スプレッドシート
draw.io - インフラの構成図やER図の作成に使用
Notion - 簡単なメモなど
ER図
実装機能
- 認証系
- ログイン/Googleログイン
- ログアウト
- 新規登録
- 認証メール
- パスワードリセット
- パスワード変更
- アカウント削除
- お気に入り機能
- チームのお気に入り追加
- リーグのお気に入り追加
- お気に入りから削除
- 検索
- ページネーション
- お問い合わせ
開発で使用したツール
Postman
本サービスはSPAなのでLaravelはAPI化して使用しています。
APIのレスポンスの確認などをブラウザでいちいち行うのは面倒ですし、さっと確認したい時があります。そこで、PostmanというAPI開発ツールを使用しました。
PostmanはAPI開発のために使用されるツールで、APIの任意のエンドポイントにHTTPリクエストを送り、レスポンスを受信することができます。
API単体で動作を確認できるので、かなり便利。
(Laravel Sanctumを使用しているのでCSRFトークンを初期化するコードを書かなければいけなかったのですが、少し苦戦)
Sequel Ace
データベース管理ツールは何種類かあるのですが、有名なSequel Aceを使用しました。
Mac用MySQL GUIクライアントアプリで簡単にDBの確認や操作を行うことができます。
感想
ここまで読んでいただきありがとうございます。
フロントエンドやバックエンド、インフラの技術的な内容は別途記事にしたいと思います。
今回、人生で初めて個人サービスを開発、リリースすることができました。
これまでは、ToDoアプリなどを開発したことはありますが、今回は設計からインフラまでの一連の流れを経験できたのは非常に充実感がありました。
まだ改善点などやるべきことが残っていますが、ひとまず形になったことが嬉しいです。
私自身、最初は全くの未経験で、何から手をつけて良いのか戸惑うこともありました。開発を進めていく中で、少しずつですが出来ることも多くなり、開発のペースも上がっていった印象です。
AWSのインフラをコードで管理したり、CI/CDの実装などやりたいことは沢山あるので、これからも技術力の向上に向けて頑張りたいと思います。