この記事の内容

FirebaseでReactのSPAを作る際の開発環境構築手順を紹介します
CORS等のはまりどころ回避方法を解説します
create-react-appはちょっと触ったことがあるぐらいが想定です
Firebase自体の概要はここに書きました

開発環境整備手順

以下の手順はWindows10, VScode, WSLの環境で確認しています

準備

使うツールをインストールします

npm install -g create-react-app
npm install -g firebase-tools

firebase-toolsはfirebase管理用のコマンドラインツールです
create-react-appで初期化します
```
  create-react-app gallery-tech
```
- gallery-tech というディレクトリが作られ、その中がreact用に初期化されでいます
- ところどころで出てくるgallery-techは私がこれから作るアプリ名なのでスルーしてください
firebaeにログインし、プロジェクト追加します
- 「Firebase 向け Google アナリティクスのデータ共有にデフォルトの設定を使用する」はオフでもいいのですが、今回はオンにします
firebaseの初期化
- 初回の場合はfirebase loginでログインします
- gallery-techディレクトリでfirebase init --project gallery-techを実行します
- スペースキーを押すと選択できます。今回はFirestore,Functions,Hostingを選択します
- エンターを押すと対話形式でいろいろ設定項目を聞いてきます。次の2つ以外は基本的にデフォルトでOKです
  - publicディレクトリを何処にするか？という問いはbuildディレクトリにします。
    - 本番用にwebpackでコンパイルしたものはbuildディレクトリに配置されるためです。
    - create-react-appで作られたpublicディレクトリがあると思いますが、それは静的コンテンツ配置用です
      - コンパイルするとbuildにコピーされます
  - SPA用に設定するか、という問いもYesにします
- firestoreの有効化はブラウザで行います。firebaseのサイトに行きます
- 左のメニューからDatabaseを選択します。Firestoreの画面が出るので「データベースの作成」をクリックします
- ロックモード（アクセス全拒否）かテストモード（アクセス全許可）のどちらにするか聞かれます。今回はロックモードにします。

これで初期化完了です

動作確認

npm run startを実行し、reactのローカルデバッグ起動(webpack dev server)を試す
- ブラウザが起動してこのような画面が出れば成功です。　　　　　　　　　　　　
- 試しにsrc/App.jsのEdit <code>src/App.js</code> and save to reload.あたりを編集・保存すると、リアルタイムでブラウザの内容も変わっているのが確認できます
npm run buildを実行し、コンパイルしてみます。
firebase serveを実行し、firebaseのローカルデバッグサーバーを起動する
- firebase functionsの動作確認をするため、functions/index.jsを編集します。
- コメントにあるHelloWorldをそのまま使います。

firebase serveを実行します
- functions, hostingのデバッグ用ローカルサーバーが起動します
- コマンドの結果に出ているURLにアクセスすると結果が表示されます。
  - vscodeの機能で、ctrキーを押しながらURLをクリックすると、ブラウザで開いてくれます。
- 補足事項
  - firebase serveの結果で出てくるhttp://localhost:5000/はbuildディレクトリを見ています。ソースコードを編集してもビルドするまでは反映されません
  - ローカルのNodejsのバージョンがfirebaseでサポートされてないバージョンだと警告が出ます。きっちりしたい人はfirebaseにそろえるといいと思いますが、今回は面倒なのでそのままにします。
  - firestoreの方は残念ながらローカルのデバッグサーバーがないようです。
    - まだセキュリティルールを試せるローカルエミュレータがある程度です
    - 参考

終わったらCtr-Cでfirebase serveやnpm run startを終了させます

サーバーへデプロイ

firebase deployを実行します。完了すると次のような表示が出ます。
- 実際にURLにアクセスするとアプリがデプロイされているのが確認できます
- functionsはhttps://us-central1-gallery-tech.cloudfunctions.net/helloWorld
- hostingはhttps://gallery-tech.firebaseapp.com/

まだいろいろ足りていません。

functionsのFQDNとHostingのFQDNが異なるため、CORSで失敗します

fetch("https://us-central1-gallery-tech.cloudfunctions.net/helloWorld")を実行した例
functions側でCORS許可する方法もありますが、今回はHostingのリライトを使用します

firebase.json

...
"rewrites": [
      {
        "source": "/api/**",
        "function": "api"
      },
      {
        "source": "**",
        "function": "/index.html"
      }
    ]

functions/index.js

exports.api = functions.https.onRequest((request, response) => {
    response.send(request.path);
});

hostingのFQDNに対し、/api/のパスでアクセスしてきたものはfunctionsのapi関数の結果を返すようにします
- /api/配下のパスが何であっても、呼び出されるfunctionsの関数はapi関数です
functions側では、request.pathでどのようなパスでアクセスしてきたかを取得できます。
- これを用いてapi関数の中で分岐を書けば、パスによって呼び出される関数を変えることができます
- 例えば、hostingに/api/helloWorldでアクセスした場合、functionsのrequest.pathは/api/helloWorldです
これで、クライアント側のjavascriptでfetch("/api/helloWorld")とすればfunctionsのapi関数が呼び出せます
- ブラウザから見ると同一オリジンになるため、CORSのエラーは起きません

webpack dev serverがローカルのfunctionsを呼び出せない

このままだと、ローカルデバッグでfunctionsとの連携がテストできません
- webpack dev serverはhttp://localhost:3000/で待ち受けています
- firebaseのhostingはhttp://localhost:5000で待ち受けています。
  - 上で解説したfunctionsへのリライトをこのポートで行います
- webpack dev server側で開いたサイトのfetch("/api/helloWorld")というコードはhttp://localhost:3000/api/helloWorldを呼び出すのでエラーになります
そのため、次のproxy設定がpackage.jsonに必要です。（紛らわしい名前ですが、よく企業にあるhttp proxyとは無関係の設定です）

package.json

{
  ...
  "proxy": "http://localhost:5000",
  "scripts": {
  ...
}

http://localhost:3000/へのアクセスでファイルがない場合、http://localhost:5000に飛ばしてくれます

firestoreのテストデータはどうするか

ローカルで開発してるときに本番データにアクセスさせたくないですよね
- （個人開発なら別に気にしなくてもいいかもしれません）
現状はfirebaseのプロジェクト自体を分けるぐらいしかなさそうです
そこで、アクセス先のfirestoreを開発(ローカル)と本番で切り替える仕組みが必要になります

functionsのアクセス先firestore切り替え

環境設定で切り替えます

functionsサーバー側の環境設定はfirebase cliで行います
- 確認コマンドfirebase functions:config:get
- 設定コマンドfirebase functions:config:set service.stage=production"
  - service.stageにproductionを指定します。変数は必ず.が1つ必要です
functionsのコード内からはfunctions.config().service.stageで値を取得できます
ローカル実行のfunctionsサーバーの環境設定はfunctions/.runtimeconfig.jsonに書きます
- firebase functions:config:get > functions/.runtimeconfig.jsonを実行して、できたファイルを編集します
上記の環境設定方法を使って、アクセス先firestoreのアクセス設定を切り替えてやればいいでしょう

hostingのアクセス先firestore切り替え

create-react-appの機能を使います。

.envファイルとprocess.envで切り替えられます。npm run buildとnpm run startの時で格納される値を変えられます
ここに解説があります

実際にアプリを書いていく解説は次回からします

Firebase+Reactの開発環境構築とはまりどころ解説

この記事の内容

開発環境整備手順

準備

動作確認

サーバーへデプロイ

まだいろいろ足りていません。

functionsのFQDNとHostingのFQDNが異なるため、CORSで失敗します

webpack dev serverがローカルのfunctionsを呼び出せない

firestoreのテストデータはどうするか

functionsのアクセス先firestore切り替え

hostingのアクセス先firestore切り替え