Image Typo Lensの技術構成
はじめに
ちょっと前に、画像内のテキストの誤字脱字をチェックするImage Typo Lensをリリースしたので、技術構成を残しておこうと思います。
技術構成
アプリケーション
Next.js
言わずと知れた React ベースのフレームワークである Next.jsをクライアント側アプリケーション側に使用しています。
何も考えず、「新しい方がええやろ」感覚で App Router を選択し、開発を行いましたが、知見も少なく、エラーでハマった際に解決に苦労することが多かったです。
開発前に App Router を触って、自身の知識を蓄えてから採用するべきでした…。
tRPC
tRPCは TypeScript の RPC フレームワークで、サーバー側で定義した API の型をクライアント側でも使用できるようにするものです。
サーバー・クライアント間で API の型定義を共有することで、VS Code で開発している際にはインテリセンス等を効かせることができ、開発体験が向上しました。
参考記事
Express
サーバー側にはExpressを使用しています。
その他のサブ柱的なライブラリ等
- tailwindcss（クライアント側）
- Recoil（クライアント側）
- Jest（クライアント側・サーバー側）
- Prisma（サーバー側）
インフラ
AWS Amplify
クライアント側アプリケーションのホスティングにはAWS Amplifyを使用しています。
簡単にデプロイ＆ホスティング環境が作れるのは良いですね。
Render
Renderは Web アプリケーション、静的サイト、DB などを構築することができる PaaS です。
Ruby、Java、Node.js、PHP などさまざまな言語に対応しており、簡単＆高速に Web サービスを構築＆ホスティングすることができます。
Web Services
サーバー側アプリケーションはRenderのWeb Servicesを使用して、Docker 環境下で動かしています。
GitHub と連携することでデプロイも容易に行える点と、大きなアプリケーションでないため、管理コスト等のコスパを考えて選択しました。
PostgreSQL
DB はRenderのPostgreSQLサービスを使用しています。
サーバー側アプリケーションとのネットワークによる遅延を抑えるため＆管理コスト削減のために本サービスを選択しました。
認証
AWS Cognito
ユーザーの認証にはAWS Cognitoを使用し、Google アカウントでサインインできるようにしています。
決済機能
Stripe Checkout
決済機能にはStripe Checkoutを使用し、決済時に Stripe の決済ページに遷移して決済してもらうようにしています。
初めて Stripe のような決済代行サービスを使用した決済機能の導入を行いましたが、ドキュメントやテスト環境も充実しており、そこまで詰まることなく決済機能を実装＆導入することができました。
CI
CI にはGitHub Actionsを使用しています。
GitHub Actions では、テスト＆ビルドだけ行うようにし、デプロイは手動で行っています。
インフラ的に自動デプロイはできるのですが、リリース頻度が高くないことや プロジェクト＆ブランチの構造的な問題もあるため、特に自動デプロイは行っていません。
反省点
触ったことがない技術を詰め込みすぎない
個人開発ということで、勉強がてら触ったことがない新しめの技術を多く選択しましたが、新しめの技術は自身の経験値の低さ＋ネット上の知見の少なさにより、開発速度のペースダウンを招きました。
個人開発とはいえ、触ったことがない技術を多めに使用するのではなく、触った事がある技術 8 割、新しい技術 2 割くらいの割合で技術を採用するのがよさそうです。
サーバーコストを考えた技術選定を行う
今回はコストを考えず、インフラ周りは PaaS を使用して、できるだけ簡単にリリースすることを目指しました。
ただ、それなりの金額がかかってくるので、今後アプリを作る場合は無料枠が使えるサービスは利用していく等、できるだけサーバーの費用を考えた技術選定を目指したいです（GCP 使うと安くなるんですかね…。触ったことないので触ってみたい…。）。
おわりに
まだまだ改善箇所も多いサービスなので、今後もしっかりと保守運用していきたいです。
今後別のサービスを作る場合は、もっとスマートなシステム構成で作れるように勉強を行っていきたいと思います。
Discussion