firebaseまとめ

2021-3-9

Hostingまでの流れです。

必要なもの

Node
Firebaseのアカウント

Firebase-toolsのインストール


npm install -g firebase-tools

これでfirebase -vとターミナル(or cmd)で入力してfirebaseのバージョンが出力されれば成功です。

プロジェクトの作成


firebase init
○Hosting // ここでスペース & エンター
Create a new project //　エンター
project-name // プロジェクト名がすでに存在していると失敗します。firebase init からやり直し
What do you want to use as your public directory? (public) //ここはdistにしておくと便利
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) //Vue,React,AngularなどSPAならy
Set up automatic builds and deploys with GitHub? // Githubにプッシュするとデプロイしてくれる→連帯画面に飛ぶので今回はn

project-name ここにはアドレスに入れたいidを入れてください。
https://project-name.web.appというアドレスになります。


firebase projects:list

このコマンドで作成できたかどうか確認できます Project Display Nameに今作成したIDがあるか確認してみてください。

リソースの場所を指定する


firebase projects:list

結果で出てくるResource Location IDが設定されていなければ設定できます。
一度設定すると修正できません。
設定ファイルなどをexportして新たにプロジェクトを作成するしかないです。

場所一覧

国	リージョン名	都市名
北アメリカ	us-west2	ロサンゼルス
	us-west3	ソルトレイクシティ
	us-west4	ラスベガス
	northamerica-northeast1	モントリオール
	us-east1	サウスカロライナ
	us-east4	北バージニア
南アメリカ	southamerica-east1	サンパウロ
ヨーロッパ	europe-west2	ロンドン
	europe-west3	フランクフルト
	europe-west6	チューリッヒ
アジア	asia-south1	ムンバイ
	asia-southeast2	ジャカルタ
	asia-south2	香港
	asia-northeast1	東京
	asia-northeast2	大阪
	asia-northeast3	ソウル
オーストラリア	australia-southeast1	シドニー

設定する

Firebaseのコンソール
プロジェクトの設定、デフォルトのGCPリソースロケーションから設定できます。

プロジェクトIDを確認する


firebase projects:list

テストプレビュー

すでにfirebaseのデプロイ前までの処理が完了していれば、
本番環境にアップロードする前にテストできます。


firebase hosting:channel:deploy preview_name

preview_nameはv1やversion1などなんでも大丈夫です。


firebase  hosting:channel:list

このコマンドで作成したテストのIDやリンクが確認できます。

テストを消す


firebase hosting:channel:delete channel-id

再度デプロイする


firebase hosting:channel:deploy channel-id

テストのリンクを開く


firebase hosting:channel:open channel-id

Firestoreを追加する


firebase projects:addfirebase project-id

project-idはプロジェクトIDを確認するで確認できます。

Firebaseを移行する


firebase use project-id