作ったサービス
株式情報の確認や、コメントの投稿ができるサイトを作りました！
機能はまだこれからも追加予定ですが、ひとまず、フォロー・いいね・タグなどの基本的なSNS機能とチャートや財務情報の確認機能を備えています！(株式データのAPIにはYahoo FinanceのAPIを使用)
スマホも対応しています。
技術構成
フロントエンド Next.js（CSSはビルトインのCSS Modulesを利用 Vercelにデプロイ)
バックエンド Nest.js(ORMにPRISMA2を使用 DBはPostgresql AWSにデプロイ)
Next.jsについて
Routing周りの設定や、ディレクトリー構成、CSS Modulesのサポートなど、Reactでプロジェクトをスタートする最初のしんどいスタートがこれで解決して最高でした。ReactやNext.jsというと基本的にはWebアプリケーションのフロントエンドの構築に使われることが多いと思いますが、Next.jsは静的サイトの出力もサポートしているので、これまでGulpなどのタスクランナーで構築されていたホームページ制作のスターターテンプレートの代替としても十分採用できるものだと思いました。CSS Modulesでコンポーネント毎にスコープを切ってCSSを書くことができるので、これまでBEMなどを使用してクラス名が長くなりすぎて悩んだりしていましたが（俗に言うエレメント地獄）、それらに煩わされることももうありません（しかしBEMの基本的な考え方は依然として有用だと思っています）！
そして、Next.jsで最も強力だと思ったのが、Vercelとの組み合わせで稼働することができるISR(Incremental Static Regeneration)です。
この機能によって、SSRなどで処理すると際限なく大きくなってしまうAPIへのデータのリクエスト回数を減らしつつ、ハイパフォーマンスにページを配信することができたりしました。ISRは革命といってもいいのではないでしょうか。コンテンツの追加のたびにアプリケーションのBuildを丸ごとしなければならなかったこれまでのSSGの問題も解決しているため、これまでCMSの王座を守り続けてきたWordPressなどの牙城を遂に崩すことができるんじゃないかというポテンシャルも感じます。
Nest.js＋Prisma2
最初、バックエンドはRailsのAPIモードで開発していたのですが、フロントエンドでJSを書いてからRubyに頭を切り替えるコンテキストスイッチが煩わしく、そしてAPIモードとはいえRailsはAPIサーバーを建てるだけの用途に使うには『しっくりこない感』が強くありました。
そして、TypeScript製のNode.jsフレームワークとして近年話題になってきていたNest.jsを採用したのですが、これが大当たりでした！
最初こそ、見慣れないTypeScriptのデコレーターや、Module,Contoroller,Service と責務を切り分けて機能を実装するデザインパターン？に親しむのに時間を要しましたが、レールに乗ると、最高の生産性と『しっくり感』を得ることができました。
VSCODEのTypeScriptの静的型チェックのおかげでデバッグの手間が体感で半分以上減ったり、依存関係のあるモジュールを自動でインポートしてくれたりで、感動の開発体験でした。
ORMとしてはPrisma2を採用したのですが、こちらも大当たりでした。
自分はバックエンドの知見がWordPressとRailsが少しできるくらいしかなかったので、多対多のリレーションなどのDB操作をRailsなしでやることに不安を感じていたのですが、結果からいうと、Prisma2によってリレーションを定義したり欲しいデータを取ってくるのはRailsよりももっと簡単になりました。
こちらについては、公式ドキュメントとそれに付随するexampleが非常に充実していますので、興味のある方はぜひ、チェックなさってください。
フォロー・フォロワーやカテゴリー・タグ などのよくある実装がほとんどexampleに入っています。
ペインポイントになりがちなJWTの認証の実装も、@nestjs/jwt @nestjs/passport passport passport-jwt などのパッケージを利用することでサクっと実装できましたし、今回はREST APIでつくりましたが、将来的にGraphQLでAPIを構築したくなったときなども、Nest.jsはサポートが充実していそうです。そしてAWSにデプロイするときもNestのサーバーはNode.jsさえインストールすれば動きますので、NginxやPumaなどの設定をしなければならないRailsに比べてはるかに簡単だと思いました。
とにかく、RailsからNest.js＋Prismaの構成に切り替えることで、言語の切り替えによるストレスがなくなり、そしてRailよりもさらに簡単に無駄なく開発ができるようになったので、『正しいレールに乗っている感』が強くありました。
インフラ構成
インフラ構成につきましては、下記の構成図にて省略させていただきます。
AWSではじめるインフラ構築入門 安全で堅牢な本番環境のつくり方
という本に非常に助けられました。ありがとうございました。
