TypeScript & React & Firebase で何かつくってみる2 環境構築2

それなりにいろいろつまづいたため, 環境構築だけで連載を2回も使うことになった.

firebase-tools のセットアップ

調べれば記事はたくさん見つかるが, やはり新旧混在しているため注意したい. 一つだけ紹介するが, 私自身はいくつかのサイトを見比べながら進めている.

TypeScript+React+FirebaseでWebアプリを作ってみる(#1 動作確認) - syakoo's Lab

基本的な流れは以下のようになる.
1. Firebase 用ツールのインストール
2. ツールのアカウント連携
3. アプリプロジェクトに Firebase の情報を追加
4. アプリにライブラリを組み込んで開発
5. アプリをデプロイ

1,2 は最初に1回だけ, 他はアプリごとといったところか.
1,2,3 はそれぞれコマンド一つでできる.

$ npm -g install firebase-tools
$ npx firebase login
$ npx firebase init

が, 私は 3 でつまづいた.

=== Firestore Setup

Error: Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Firestore requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations

途中, Firestore という機能を選択したが, そこで「クラウドリソースがないよ」 というようなことを言われている. どうも先にクラウドの方で何かしておかないとダメらしい.

Firestore データベースの作成

Firestore というのは リアルタイムで使えるデータベースの一種らしい.

Firebaseコンソール(FirebaseのWebサイト) から Firebaseプロジェクトを開き, メニューから 開発>データベースを開く

「データベースの作成」をクリックしてウィザードをこなすとデータベースができる.

途中, ロケーションを聞かれる.

このロケーションは地理的な意味で使われているようだ. とりあえずは近い場所を選んでおけば良いだろう.
ここの説明 によれば東京のロケーションは asia-northeast1 らしい.

これでデータベースリソースとやらができたようだ.  ・・・空っぽだが.

アプリプロジェクトと Firebase の連携

再度  3. アプリプロジェクトに Firebase の情報を追加  を試す.

$  npx firebase init

いろいろ尋ねられる. 項目を説明する記事もいくつかあるが,どの記事もちょっとずつ内容が違う・・・. おおよそデフォルトで良さそうだ.

FirebaseとReact+TypeScriptの連携 - Qiita

途中で Firebase サービスのうちどれを使うか聞かれる.

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
 ( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
 ( ) Emulators: Set up local emulators for Firebase features

正直, 何をどう作るか決めてないうちから聞かれても困る.
全部チェックを入れておけばいい,という記事もあったが, またさっきのようにつまずくのも何だな・・・

・ Realtime Database は旧式で 今は Firestore を使えばいいらしい.
・ Hosting はまぁホスティングサービスのことだろう.
Firestore, Hosting だけチェックを入れる. きっと後で変えられるだろう.

最後あたりで 「index.html を上書きする? 」と聞かれる. 何を出してくるか気になったので 手元のファイルを一旦退避して上書きさせてみる.

正常に終わった.

Firebase連携の動作確認

index.html をわざわざ上書きしたんだし, なんか動くものになってるんだろう. ということでこのままデプロイを試してみる.

$ npx firebase deploy

最後にURLが表示されたので開いてみる.

うまくいったらしい.

なんとかここまでは来た.