TypeScript & React & Firebase で何かつくってみる2 環境構築2
それなりにいろいろつまづいたため, 環境構築だけで連載を2回も使うことになった.
firebase-tools のセットアップ
調べれば記事はたくさん見つかるが, やはり新旧混在しているため注意したい. 一つだけ紹介するが, 私自身はいくつかのサイトを見比べながら進めている.
基本的な流れは以下のようになる.
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 サービスのうちどれを使うか聞かれる.
? 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が表示されたので開いてみる.
うまくいったらしい.
なんとかここまでは来た.
この記事が気に入ったらサポートをしてみませんか?