Firebase を使ってみよう【フロントエンドプロジェクトの作成とFirebase アプリとの連携編】

firebase

こんにちは。エンジニアの辻です。

前回は、Firebase CLI の導入とログインまで完了していました。
今回は、実際のフロントエンドプロジェクトを用意して、Firebase アプリと連携していきたいと思います。

具体的に何をするかと言うと、create-react-app コマンドを使って、React x TypeScript のプロジェクトを用意します。
そのプロジェクトと前回に作成した Firebase アプリを連携させます。

前々回でローカルに保存していた js ファイルが必要になるので、手元に用意しておきましょう。

フロントエンドプロジェクトと Firebase アプリの連携手順

今回、やることは以下の通りです。

  1. create-react-app コマンドで React x TypeScript のプロジェクトを作成
  2. Firebase 設定情報ファイルをプロジェクトに組み込む
  3. firebase init を実行

create-react-app コマンドで React x TypeScript のプロジェクトを作成

まずは、create-react-app コマンドでプロジェクトを作成しましょう。
ローカルに適当なディレクトリを用意します。
その後にターミナルを立ち上げて、作成したディレクトリに移動しましょう。

そして、以下のコマンドを実行します。

プロジェクトのインストールが完了後に、以下のコマンドを実行します。
(yarn start は npm start でも OK です。)

正しくプロジェクトが作成されていれば、http://localhost:3000/ でスタートページが表示されます。

Firebase 設定情報ファイルをプロジェクトに組み込む

次に、Firebase 設定情報ファイルをプロジェクトに組み込んでいきます。
先程作成した React x TypeScript プロジェクトのルート直下に .env ファイルを作成します。

.env ファイルを作成後、その中身に Firebase の設定情報を流しこみます。
前々回の記事で、ローカルに保存していた js ファイルから中身をコピペしていきます。

.env ファイルの内容

ちょっと寄り道。.env ファイルとは?

.env とは環境設定ファイルです。
.env に記述された変数はプログラムの中で環境変数として扱えます。
Node.js で利用する場合は process.env.変数名 で取得できます。

例えば上記の .env の REACT_APP_API_KEY を取得したい場合は、process.env.REACT_APP_API_KEY とします。
※ create-react-app で作成したプロジェクトで .env を利用する場合は、環境変数の前に REACT_APP_ をつける必要があります。
試しに /src/App.tsx を以下のように変更して、yarn start を実行してみましょう。
REACT_APP_API_KEY の内容がコンソールに出力されると思います。

今回は .env だけを用意しましたが、 .env.local や .env.production のように接尾辞を付与する事で、複数の環境変数ファイルを切り分ける事も可能です。

前々回の記事でも触れましたが、.env の内容は非常に重要な設定情報ですので、扱いにはお気をつけください。
ネット上にアップロードする…等の .env ファイルの内容を他人へ共有するような事は絶対にやめてください。

firebase init を実行

Firebase プロジェクトの初期化を行います。
ターミナルを起動して、先程作成した React x TypeScript プロジェクトのルートディレクトリに移動してください。
移動後に、以下のコマンドを実行します。

firebase init は Firebase プロジェクトの初期化コマンドです。
このコマンドを実行すると、カレントディレクトリで Firebase を扱えるようにセットアップしてくれます。

 

firebase init を実行すると、はじめに、「Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. 」と表示されます。
これは「Firebase の機能のうち、どれを使用しますか」と聞かれています。

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」を選択しましょう。
(※「Hosting: Set up GitHub Action deploys」ではありません。)
上下カーソルキーで対象項目に移動して、スペースキーを押下してチェックを入れてください。
チェックをいれた後はエンターキーを押下します。

 

次に「Please select an option:」と表示されます。
文字通り「オプションを選択してください。」って事ですね。
前々回で作成していたプロジェクトを扱いたいので、「Use an existing project」にカーソルを合わせて、エンターキーを押下しましょう。

すると、作成したプロジェクト名が表示されます。
上下カーソルキーを使って、前々回に作成したプロジェクトに移動して、エンターキーを押下します。

 

次に「What do you want to use as your public directory? (public) 」と表示されます。
これは「公開対象にしたいディレクトリは何ですか」と聞かれています。
今回は「build」と入力しましょう。
create-react-app では作成したプロジェクトをビルドすると、ルート直下に build ディレクトリが生成され、本番ファイル一式が格納されます。なので、build を指定しています。

 

次に「Configure as a single-page app (rewrite all urls to /index.html)? (y/N)」と表示されます。
これは「公開ページをシングルページアプリケーションとして設定しますか」と聞かれています。
N (No)を入力します。

 

最後に「Set up automatic builds and deploys with GitHub? (y/N) 」と表示されます。
これは「GitHub と連携して、自動ビルド・デプロイを設定しますか」と聞かれています。
GitHub との連携はしないので、N (No)を入力します。

 

ここまで来ると後は、Firebase-CLI がよしなにプロジェクトを初期化してくれます。
ターミナルに「Firebase initialization complete!」と表示されたら、初期化が完了した合図です。
ルート直下に .firebaserc / firebase.json が作成されていると思います。

firebase init 実行後のディレクトリ構成

まとめ

今回はここまでです。
お疲れ様でした。

次回は React x TypeScript のプロジェクトを編集してデプロイまでやっていきたいと思います。
では、また。



❏❏ TOPIC ❏❏ ------------------------------------------------------------

カスタム自由!フリーECサイトパッケージ
チャットボット導入サービス
WEBシステム開発・スマホアプリ開発はSRIAへ