✨

Next.js + Firebase の開発環境を Docker で楽に構築する

2022/04/28に公開

Docker

Next.js と Firebase を使った Web 開発の環境を docker で構築したので記事に残します。

対象読者

Next.js + Firebase の環境構築を Docker で行いたい方

利用技術

フロント
- Next.js
- Recoil (React の状態管理)
- TypeScript
- MUI
バックエンド（Firebase）
- Firebase Authentication
- Firebase Firestore
- Firebase Cloud Functions (Node.js + TypeScript)
- Firebase Cloud Messaging
- Firebase Analytics
インフラ
- Vercel

上記技術を利用した理由

Next.js
→ React のフレームワークであり、簡単に高速な Web 開発が可能（主観）。CSR,SSR,ISR,SSG が可能で、私は Web 開発のフレームワークは基本的に Next.js 一択です。スマホアプリも必須で検討するなら React や Flutter もありかなと思いますが、next-pwa を導入すれば簡単に PWA 化が可能ですので、Next.js で良いかなと思います。
Recoil
→ React の状態管理。redux より学習コストが低いのと、やはり facebook が開発しているということが react と相性いいのではと思っています。最近 recoil 使ってる現場増えてますよね？（笑）
MUI
→ React の UI ライブラリ。Facebook 製。実際の開発現場でもよく使われているライブラリ。2021 年に v5 になってからはかなり使いやすくなったと思う。
Firebase
→ 手軽にバックエンド環境やアナリティクス環境を準備できるのが売り。
Vercel
→ git hub と連携するだけで CI/CD できるから開発に集中できる。世界中の CDN でのキャッシュも可能で、Next.js にとっては最高のインフラ環境であると思う。

ずらずらと書きましたが、一番の理由はやはり「楽に Web アプリを構築できるから！ 」です！（笑）
Next.js を使うと CSR、SSR、ISR、SSG といった様々なレンダリングが実現可能（SSG は特に高速なのでユーザビリティが◎）であり、next-pwa というライブラリを使えば簡単に PWA アプリが出来ちゃいます。
MUI はマテリアルデザインに準拠した強力な UI ライブラリであり、よくある使いやすい部品を簡単に構築できます。
また、Firebase を使えばログイン機能、データベースの構築、API（Cloud Functions）、通知機能、分析機能が手軽に導入できます。

個人で Web アプリを開発するとき、少ない予算で開発をしないといけないプロジェクトやスタートアップ企業など
様々な事例でこのようなアーキテクチャが導入されているのではと思います。

環境のイメージ図

開発環境と本番環境でのイメージ図になります。
開発環境を構築するというタイトルではありますが、本番環境の環境についても載せておきます。
本来であれば開発環境、ステージング環境、本番環境となると思いますが、今回は開発環境を整えるのが目的ですのでステージング環境は省きます。

この図のように、ローカルでは docker 上に next.js コンテナと firebase コンテナを立ち上げます。
firebase コンテナでは firebase emuators で cloud functions のみを実行します。

なぜ、Firebase Emulators 上で Authentication と Firestore を利用しないのか？
理由はそれぞれ以下の制限があるからです。

Authentication では Google 認証機能しか利用できず、その際のアカウントもランダムで作成されるダミーデータとなるので、実際のデータに近いテストがしづらいためです。
ただ、ユーザーがログインしたときに実される関数を functions で書きたいときは、emulators で authentication を立ち上げるのもありだと思います。
Firestore はFirebase 拡張機能を使わなければ emulators を使うのもありかと思いますが、Stripe の機能を拡張機能で実装したいケースなどを考えると、Firebase の環境上で Firestore を立ち上げるのが良いのかと思います。
- 例として、Stripe の拡張機能の１つは firebase authentication でユーザーが作成されたときに、そのユーザーに紐づく stripe アカウントを作成し、firestore 上の Customers コレクションに email, stripeId, stripeLink を格納する機能があります。開発するアプリの機能の中に Customers コレクションの中のドキュメントを使ってデータ処理を行う場合があるとなると、拡張機能が利用できる Firebase の環境上で Firestore を利用するのが良いかと思います。
  ※Firebase の拡張機能のソースコードは Github に公開されています。なので頑張ればローカルでも利用できるかもしれないですので、どうしても！という方は検討してみてください。

環境構築方法

この記事の本題である環境構築方法については下記リポジトリに記載しました。

Next.js, Firebase, Docker を使ったことある方なら、スムーズにいけば30分～1時間ほどで構築できると思います。
→ なるべく１コマンドで環境構築したいところでしたが、Firebase が IaC（Infrastructure as Code）対応していないので Firebase コンソールでのポチポチ作業が発生してしまうんです 😭
それでも良ければ、ぜひ参考にしていただければと思います。

苦労したところ

next.js firebase docker で構築する例が少なくて大変だったこと（私が Docker 慣れてなかったのもあると思う）
なのでこの環境と同じ構成でこれから構築しようと思っている方にはぜひ参考に慣れたら幸いです
docker のコンテナ間通信の方法が分からなかったこと。loccalhost でできない。
解決にはこちらの記事がとても参考になりました。
Playwright 　の導入が大変だった
Playwright を Docker で利用するには一筋縄では行きませんでした。単純に Next.js と同じコンテナで実行すればよいと思ってたのですが、Playwright が公式サイトで説明しているように Playwright が利用できるイメージを使う必要がありました。
一旦は e2e テストのサンプルコードが仮で実行できたので良しとしていますが、不具合が良く起きるので、まだ実験的に導入している段階となります。（もっとテストの知見を付けなければ！！）
sample コードの記載
いつも FirebaseAuth や Functions、Firestore の使い方を忘れるので sample ページを用意しています。
git clone 後に、Firebase の使い方のイメージが付ければ良いかなと。
その他いっぱいあったのですが、メモがどっか行ってしまったので省きます！！

まだ不完全なところ

firebase の firesore emulator が上手く作動しないこと（おそらく firebase-tools のバグ）
- Docker だとなぜか上手く行きません。Firestore がないですって言われる。
- 上記理由と Firebase の拡張機能を使うのを想定してローカルではなるべく Firestore は使わない方針を想定しています。
Firebase Storage も使いたかったが、今回の環境構築では利用していないです。
Firestore のセキュリティルールも作りたかった

次回！

Next.js + Firebaseの環境構築！ステージング環境と本番環境デプロイを自動化しよう！

みたいなタイトルで、今回の開発環境構築に加えてステージング環境構築、本番環境の構築及びデプロイについてGithubとVercelを絡めながら良い感じに自動化しする実装について上げたいと思います。

以上！
今回のお話が参考になりましたらぜひ良いねボタン👍をよろしくお願いいたします。

参考

https://firebase.google.com/