[firebase] firebaseのデプロイでコケた話

4825 ワード
デプロイ Firebase 解決方法 デプロイ テキストリンク

手軽にWebサイトがアップロードできるサービスとして
Googleが提供するfirebaseが便利で使いやすくはありますが、
デプロイするのにハマったことがありますので共有記事を書きます。

結論から言うと
「firebase init」した際に本来ならデプロイするためのファイル一式が生成されるはずなのにコマンドが完了しても一向にファイルが生成されませんでした。

解決方法の前にfirebaseのデプロイ方法について
まとめておきますので、結論だけを知りたい方は一番最後までスクロールしてください。

firebaseデプロイ方法

firebaseのアカウント登録（無料）
https://firebase.google.com/

1.firebaseインストール＆ログイン&プロジェクト作成

npm install -g firebase-tools
firebase login

紐づけたいアカウントを選択

firebaseのコンソール（ページ右上にボタンがある）からプロジェクト新規作成

・アナリティクスを入れるか入れないかは任意選択可

2.firebaseファイルの生成＆初期設定

mkdir myApp（名前は適当に）
cd myApp
firebase init

「Hosting: Configure and deploy Firebase Hosting sites」を選択

 ◯ 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


■firebaseでプロジェクト作成済の場合
「Use an existing project」を選択 -> プロジェクト選択
■firebaseでプロジェクト未作成の場合は
「Create a new project」を選択

ここではすでにつくっているので
「Use an existing project」を選択

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 


? What do you want to use as your public directory? 
firebaseと紐づけるフォルダ名
※入力せずにエンターを押すと自動的にpublicフォルダになる(任意で変更可)

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 
firebaseにデプロイするファイル生成
もしすでにファイルがある場合はNに
なければ「y」にする

今回はファイルは何もないので「y」にする

生成ファイル一式
myApp
　|- public
　　　|- index.html(ここを編集する)
　|- firebaserc
　|- .gitignore
　|- firebase.json

3.index.htmlを編集する

public/index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>初めてのFirebase</title>
</head>
<body>
  Hello! Firebase!
</body>
</html>

4.デプロイ

firebase deploy

URLが生成されるのでこちらでアクセするとページが表示がされる
Hosting URL: https://xxxxxxxxxx.firebaseapp.com

ローカルで動かしたい場合

firebase serve

こちらで表示
http://localhost:5000

ハマったことと解決策

Macのホームディレクトリにfirebase.jsonが存在しているとfirebase initしても
ファイルが生成されなかった。
そのfirebase.jsonを削除したら無事ファイルが生成されてデプロイすることができました。
わかってみると簡単なことだったのに何時間もそれに費やしてしまいまじで辛かった。