Sota Tech Blog.

Next.js + Firebaseを利用したハンズオン - 環境構築編投稿日: 2023年 5月7日

第一回

※何かあれば一番下のコメント欄からコメントしてほしい。バグ、説明不足、知見不足なんでも大丈夫！！
今日Firebase functionsってなんだ？ってなった。ということで、Firebaseを学んでいきたい。
せっかくなので前回作ったJestの学習用を利用したい。
前回の記事のリンクかこちらのリンクをクリックしてもらえれば使用することができる。
前回の記事を参照してもらえたらわかるがJestを追加しただけなのでそれ以外は一切いじっていない状態である。

完成リポジトリ

このリンクから確認できる

環境構築

$ cd ~/Desktop/ && mkdir learning && cd learning && git clone https://github.com/sasaki-sota/try-nextjs-jest.git && mv try-nextjs-jest/ try-nextjs-firebase && cd try-nextjs-firebase && npm i && npm run dev

もちろん個別に分けてコマンド実行しても大丈夫！
ただ、Nodeの実行環境がインストールされていることとMac PCが対象ということはご容赦いただきたい。
この長ったらしいコマンドは学習用のフォルダを作って前回の自分のGItのリポジトリをクローンしてFirebase用に命名変更してパッケージをインストールして開発サーバーを立ち上げている。

このリンクで昨日と同じこの画面が立ち上がるはず。

Firebaseの導入

プロジェクトの作成

Firebaseの公式ページ
このリンクからFirebaseのプロジェクトを作成していく

プロジェクト名の作成

ここのプロジェクト名はなんでも大丈夫だけど、リポジトリ名と被らせたほうがわかりやすいと思う！

アナリティクスの設定

長期的に利用していくなら有効にして、今回のハンズオンのような場合だったら無効が最適だと個人的には考えている。
ちなみに自分は無効にする。

作成されるとこんな感じで表示される。

Next.jsでFirebaseを利用できるように準備する

今回はフロントエンドで利用するのでWeb版を選択する。

アプリ名の登録

ここのニックネームの部分に関してもどういう名前でもいいが自分は今回はリポジトリ名と同じにする。
またHostingの設定に関しては、デプロイする予定があるなら有効にすればいいと思う。
基本的にチェック作るところは後からでも設定することが出来る部分が多いのであまり気にしなくて平気だと個人的には思う。

SDKの追加

先ほどの名前を登録できたらSDKが発行されるのでありがたく利用させていただく。
ターミナルの方で

$ npm install firebase　&& touch firebase.ts

Firebaseのパッケージをイントールするが少し時間がかかると思う。

.env.local

NEXT_PUBLIC_FIREBASE_API_KEY="Describe apikey here"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="Describe authDomain here"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="Describe projectId here"
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="Describe storageBucket here"
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="Describe messagingSenderId here"
NEXT_PUBLIC_FIREBASE_APP_ID="Describe appId here"

envファイルはGitignoreというファイルによってプッシュされるのが無効化されているため、APIキー防止のためにローカル環境のみとする

firebase.ts

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

これでWebアプリで使用するFirebaseの初期化が完了となる

エミュレーターの設定

エミュレーターとは

公式ドキュメント
Firebaseの各それぞれのサービスが正確に再現されるように構築された開発環境のことである。
難しく言っているが要するに本番環境のデータに影響を与えることなく、それぞれのサービスにローカルで直接接続し、QAテストやユニットテストを実行することが出来るツールである。
現状では以下のプラットフォームにてサポートされている。

構築をする

まず、最初に大事なこととしてNode.jsのバージョン14.8以上、JavaのJDKバージョン11以上が必須であり、エミュレーターはこの二つに依存して起動する。
また、Firebaseコマンドが必要なのでリンクからそれぞれのOSに合わせて構築してほしい。
ちなみに自分はNode.js18であり、Macのため

$ npm install -g firebase-tools

このコマンドを利用することで構築することができた。
また、バージョンアップなどもこのコマンドでできるので便利である。
おそらく全てのOSでNodeのバージョンに問題がなければ上のコマンドでインストールすることが出来ると思う。
コマンドがインストールすることが出来たら

$ firebase login
i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.


? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:

上のようにするとYesを選択するとFirebaseからGoogleの認証ページにリダイレクトすると思うのでそこの部分でFirebaseにログインしているアカウントを利用できれば成功できると思う。

無事に作成されていることを確認するため

$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬─────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID          │ Project Number │ Resource Location ID │
├──────────────────────┼─────────────────────┼────────────────┼──────────────────────┤
│ try-nextjs-firebase  │ try-nextjs-firebase │ 8536234976     │ [Not specified]      │
└──────────────────────┴─────────────────────┴────────────────┴──────────────────────┘


1 project(s) total.

と入力し自分が靴ったものが無事にあれば問題ない。

それぞれのサービスの初期設定

実際にFirebaseのコンソール画面に行って各種サービスの設定をする。

Firestore

ここの部分からテストモードで開始するを選択し、日本に住んでいるならasia-northeast1または2を選んでおけば問題ないと思う。
設定が終了し、この画面になれば完了である。

Storage

これも以下の部分から始めるをクリックする。

こちらもテスト用のモードを利用し、ロケーションはFirestoreのものが設定されていると思うので大丈夫。

上記の画面になれば設定完了である。

初期化をする

$ firebase init

そのままだが上記のコマンドで初期化する。
最強のGUIを表示してくれるので今回利用する範囲のものを選択してほしい。
自分はFirestoreのOnsnapshotを利用するのとGithubアクションはいらないと思っているのでそれ以外のところにチェックした。
また、後で記述するがFunctionsとHostingが現状はまだ必要なさそうなので、FirestoreとStorageを利用した際に使いたい。
そしてその機能の拡張サービスとしてFunctionsの方は利用していきたい。
スペースキーで選択、矢印キーで移動になっている。

セットアップに関しても以下のようにして既にある先ほど作ったプロジェクトを利用するのがいいと思う。
FirestoreとStorageのセットアップの部分はそのままエンターを押してもらって構わない。
もし何か躓きそうな部分があったら下の部分から連絡してほしい。
次にエミュレーターの方のセットアップだが現状は以下のようにする。
AuthenticationとFirestoreとStorageのみとする。
理由は上記と一緒になっている。

それ以降のポート周りの設定は以下のような感じになっている。

ここまで無事に出来ていれば、エミュレーターの作成完了である。
本当にここまで環境構築大変だったと思いますがお疲れ様です👍

実際に起動させる

$ firebase emulators:start

とエミュレーターを走れせると

とローカルのそれぞれのポートで作成されていることが確認することができる。
また実際にこのリンクを踏んで確認してもらって

こんな感じになっていたらもう完璧！！

ここまで

後で追記するFunctionsやHostingなども初期化の部分で追加するだけなので簡単に進めることができる。
また次はFirestoreについて触れることができればと思っている。
散々言いますが何かあればコメントください🙇

匿名でコメント

brew install java11