こんにちは。virapture株式会社でCEOしながらラグナロク株式会社でもCKOとして働いている@mogmetです。
最近Splatoon3にハマっていて、ウデマエがようやくSになりました。よかったら一緒に遊んでください。
本日はtypescript環境でのぼくのかんがえたさいきょうのfirebase monorepoテンプレートを作ったので是非みなさんにご活用していただきたく筆を取らせていただきました。
是非使ってみてください。
対象ユーザ
本テンプレートは下記に当てはまれば非常に有能な逸品になっております。
- cloud functionsを使う
- firestoreを使う
- webでfirestoreを使う
- typescriptを使う
効能
本リポジトリからfirebaseを開発するようにすることで下記4点のメリットを得ることができます。
- clud funtionsとfirestoreのsecurity ruleのunit testを書く環境が整っているため品質を高めた開発が可能
- unit testはgithub actionsを使ったCIで品質を担保している
- develop/mainマージされた時に自動でデプロイされるようになっている
- yarn workspaceを用いることで、cloud functionsとwebで同じentityやロジックを使うことができる
インストール方法
早速ぼくのかんがえたさいきょうのfirebase monorepoテンプレートを自分のプロジェクトに持ってくる方法を紹介します。
（リポジトリにも記載あります。）
virapture/firebase-monorepo-templateにアクセスた後、「Use this template」を押下して自分のプロジェクトにコピーしてきます。
その後クローンして自分のPCで編集をしてきます。
ソース修正
IDEなどを使ってリポジトリ名を置換します。
virapture/firebase-monorepo-template → your-account/your-repository-name
firebase-monorepo-template → your-repository-name
次にfirebaseのproject idを置換します。
fir-monorepo-template-dev → your-firebase-dev-project-id
fir-monorepo-template-prd → your-firebase-prod-project-id
リポジトリ設定
次にCI/CDで使うsecretを設定します。
リポジトリの「settings」に移動します。
SecretsのActionsに移動します。
New repository secretボタンを押下します。
Nameに開発環境であれば「GOOGLE_APPLICATION_CREDENTIALS_DEV」、本番環境であれば「GOOGLE_APPLICATION_CREDENTIALS_PROD」を入力します。
SecretにはGoogleの認証のスタートガイド/サービス アカウントを作成するの手順で入手できるjsonファイルの中身を貼り付けます。
その後、「Add Secret」を押下します。
開発と本番環境２つとも用意しておきましょう。
cloud functions setup
cloud functionsでエラーをキャッチしてsentryに送るようにしています。 sentry用のDSN値を下記コマンドでセットしておきます。
$ firebase functions:secrets:set SENTRY_DSN
web setup
envディレクトリにあるファイルを使ってwebは初期化を行うようにしています。 dev.env / prod.env とファイルを準備しているのでそれぞれの環境ごとにclient側のfirebaseの値を入力してください。
使い方
最初にパッケージをインストールします。
$ yarn install
次に共通パッケージをビルドします。
$ yarn build:common
CloudFunctionsの開発であればemulatorを使ったunit testを実施します。
$ yarn test:functions
security ruleやwebのunit testは下記で実施できます。
$ yarn test:functions
packageの内容
packagesには役割ごとに4つのパッケージが配置されています。
それぞれについて紹介します。
common
全プロジェクトで共通で使いたいentityやロジックなどを配置します。
テンプレートとしてUser entityを配置しています。
このcommon配下の内容は下記のように別パッケージで呼び出すことができます。
import { User } from '@firebase-monorepo-template/common'
新しいファイルを追加した場合はindex.tsにそのファイルを追記するようにお願いします。
export * from './entities/user'
common配下のソースは編集したら必ず下記コマンドでビルドしてください。でないと他packageで呼び出しができません。
$ yarn build:common
common-test
テストで使う共通処理を配置しています。
common packageと同様に編集したらyarn build:commonを実行するの忘れないようにしてください。
よく使うファイルだけ解説しておきます。
testAdminRepository.ts
firebase-adminを使った初期化処理をまとめています。
テスト用のUserの初期化など、よく使うと思うのでここに書いたりしています。
cloud functionsでのunit testや、security ruleの初期化処理で使っています。
testClientRepository.ts
クライアントで初期化したりアクセスしたりするときの処理をまとめています。
security ruleやwebでのunit testで使います。
testProvider.ts
testAdminRepositoryとtestClientRepositoryの初期化と、jestでの初期化処理で使う処理をまとめてます。
functions
cloud functionsを配置します。
unit testはcommon-testのものを使ってテストを行っています。
jest.setup.tsを全テストでコールしているので初期化処理を省略化しています。
ちなみにデプロイの際にcommonパッケージをデプロイするためにpredeployとしてcommonパッケージを圧縮してデプロイするようにしています。
"cd packages/common && yarn pack --filename ../functions/common.tgz",
"cd packages/functions && yarn add ./common.tgz"
デプロイ中はpackage.jsonが少し書き換わるのでコミットしないように気をつけてください。
web
webプロジェクトを配置します。
reactでもvueでもおけるように素のtypescriptだけ置いてます。
また、security ruleのテストはこのpackageに記載しております。
まとめ
テンプレートから作るだけでunit testも完備してCI/CDまでできちゃうぼくのかんがえたさいきょうのfirebase monorepoテンプレートができちゃいました！
ただ、testの書き方はちょっと自我流な感じがあるので、もしこっちの書き方のほうがいんじゃね？！みたいなのがあれば是非PR待ってます！
最後に、ワンナイト人狼オンラインというゲームを作ってます！よかったら遊んでね！
他にもCameconやOffcha、問い合わせ対応が簡単にできるCSmart、フリーランスのコミュニティのNextFreelanceといったサービスも作ってるのでよかったら使ってね！
Next Freelanceというフリーランス
また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。
ラグナロクでもエンジニアやデザイナーのメンバーを募集しています！！楽しくぶち上げたい人はぜひお話ししましょう！！