フロントエンド、バックエンド、インフラ、全部触ってみたメモ
少し前に、知り合いがやっているサービスのローンチを手伝ったので、その時に自分がやったことをメモがてら書いてきます。
どういうことをやったか、どういう構成か、しか書くつもりがなく、なぜそうしたのかは書かないので、そういうのを求めている人はブラウザバック推奨です。（もうこの表現古い・・・？）
フロントエンド
とりあえずフロントエンドから箇条書きでそれっぽい単語を並べます。
- Next.js（TypeScript）
- styled-components
- Jest
- Cypress
- ESLint
- Prettier
- Atomic Design
- Clean Architecture
- Firebase Hosting
- Firebase Authentication
ひな形から作るところからやりました。（=npx create-next-app)
だいたいのアプリケーション設計をして、ADR書いてってこともしてます。
知り合いがNextとかReactとか使ったことないとのことだったので、実際のAPIをたたいて取得したデータを画面にデザイン付きで表示する、を知り合いが実装できるように何画面か作りました。（前にReact触ってた時にはReact Contextとかなかったので、今こうなってるんだとなってました。）
コンテンツ管理にMicroCMSを使っていてそのAPIとの連携部分や、それとは別に、下のほうで記述しますがバックエンドAPIがあるのでそれとのやりとりとか。
MicroCMSのAPIを使うやつはSSGで、バックエンドのAPIを使うやつはCSRで。
CI/CDはGitHub Actionsで構築しました。JestやCypressのActionsで動かしています。Jestの結果をPRにコメントする仕組みや、Cypress Cloudで確認できるようにしたりしてます。また、ESLintやPrettierを強制してたりもしました。
Firebase Hostingにデプロイしたりするのもやっています。
所感としては、FirebaseでもNext動くもんだなあと。本当はOn-demand ISRを使いたかったんですけど、まだ無理そうでした。
github.com
ちなみにNetx.js 13でやってたんですが、App Routerは使いませんでした。従来のやつです。
バックエンド
次はバックエンドです。
- Ruby on Rails
- Puma
- RuboCop
知り合いがRuby on Railsに詳しいので、ひな形を作ってくれました。
そこからAPIを何本かと、Firebase Authenticationを使っていたので、フロントエンドからくる認証情報を使って、そのトークンを検証するみたいなことを実装してます。
一応ちょっとしたDBのテーブル設計もやりました。
こちらもCI/CDはGitHub Actionsで構築しました。フロントエンド同様テスト結果もPRにコメントするようにしてます。RuboCopの強制もしてます。
バックエンドはAWS App Runnerを使って動かしてます（Dockerイメージを使って）。RubyのApp Runnerでめっちゃはまったんですが、それはまた今度・・・。
インフラ
続いてインフラ
- Terraform
- AWS
- App Runner
- Aurora Serverless
- ECR
- ECS
- Step Functions
- GCP
- Firebase Hosting
- Firebase Authentication
Terraformで記述できるものは全部Terraformで書いています。
上にあげたものに加えて基本的に必要なもの（たとえばIAMロール、VPC、サービスアカウントなど）も書いています。
また、Railsのmigrationを実行するためにECSのタスクをワンショットで動かす仕組みも構築してます。（なので基本的にDBの操作に対して、EC2のインスタンスを立ててとか、ローカルから繋いでみたいなことをしないようになってます。）
構成は全部自分が考えたものになってます。
