当サイトは、一部記事に広告を含みます

[ 備忘 ] 初めてのアプリリリースで手間取ったことメモ📝|Next.js × Firebase × Netlify

前提:アプリ構成など

フロントエンド

  • Next.js
  • TypeScript – 型安全な開発

バックエンド・認証

  • Firebase Authentication – メールアドレス認証、Google認証
  • NextAuth.js – クライアント&サーバー統合型認証管理

データ管理

  • Firestore – 日記データ・ユーザー設定などの保存
  • Firebase Storage – 画像アップロード

その他

  • Netlify – デプロイ&ホスティング

大量のビルド時エラー

前回のデプロイ時も大変な目にあったのにすっかり忘れていました。。。

ドメイン取得やDNS設定等の準備も終わり、いざデプロイしたら帰ってくる大量のエラー・・・。

VSCodeでプラグインを導入したのと、適宜 npm run build をして対策します(反省)

firebase および storage の「ルール」

開発段階で本番同等のルールを設定しておくべし!

今回はデータベース作成時に「テストモード」を選んでしまっていたので、開発の段階ではゆるゆるルールだったことを失念していました。

公開時にルールの設定を行ったのですが、初めてだったこともあり結構手間取ってしまいちょっと大変だった。
でもその甲斐あってだいぶ理解できてきたのでよかったです!

ステージング環境の準備

公開時まで検討事項に入っておらず・・・。
公開した際、ローカルと異なる挙動をしたので確認しようとしたところ、

ローカル環境がおかしい
→「あ、諸々本番用にしちゃったんだ」
→「・・・ステージング必要では?」

という感じに気がつき、慌てて準備しました👇

今回の構成はこんな感じ:

ホスティングサーバ(Netlify)と Firebaseで、ステージング/本番用にプロジェクト作成。

  • 開発:develop ブランチを Netlify 開発サイトへデプロイ
  • 本番:main ブランチを Netlify 本番サイトへデプロイ

まとめ

今回公開作業での反省点は大きく分けるとこの3つかな?

次回の糧にします・・・💪

---

記事が気に入ったら、ぜひ応援いただけると更新がんばれます☕️

Buy Me A Coffee