Firebase Hostingでデプロイ(deploy)する方法を解説【4ステップ】

Firebase プログラミング

こんにちは、はるです。

悩み顔1

Firebase Hostingでデプロイする方法を知りたい。Firebase Hosting Setup Completeが出てきて公式サイトを見てもよく分からなかったので、分かりやすく解説してほしい。

こんな悩みを解決していきます。

記事の内容

  • Firebase Hostingでデプロイする方法
  • Firebase Hosting Setup Completeが出てきた場合

私は3か月ぐらいfirebaseを使ってきまして、firebaseを使った「URLねんが」というサービスを作りました。
URLねんが

当時、Firebase Hostingでデプロイする方法がさっぱり分かりませんでした。
なので、ブログのサブドメインにFTPソフトを使って、いちいちファイルのアップロードをしていました、、、

ですが最近ようやく理解できたので、Firebase Hostingでデプロイする方法を解説していきます。

記事の内容

Firebase Hostingでデプロイする方法

以下の4ステップです。

  1. firebaseCLIのダウンロード
  2. 初期化する
  3. ローカル環境で見れるようにする
  4. デプロイして完全に公開する

前提として

「プロジェクトはあらかじめ作ってある」という前提のもと解説していきます。
プロジェクトを作っていない方はこちらからどうぞ。
Firebase コンソールからプロジェクトを作る

firebaseCLIのダウンロード

node.jsのnpmを使ってもダウンロードできますが、私はnode.jsを使ったことがないです。
なので、今回は「Firebase CLI バイナリ」を使っていきます。

Firebase CLI リファレンスからダウンロードします。
Firebase CLI リファレンス

ダウンロードする場所はどこでもよいのですが、立ち上げた後、cdコマンドを使ってデプロイしたいフォルダーに移動する必要があります。

よく分からない方は、デプロイしたいフォルダーにダウンロードしておくと楽ちんです。

例えば

デスクトップ > public222フォルダーの中に、デプロイしたいindex.htmlがあります。

そしたら、public222と同じ場所に「Firebase CLI バイナリ」をダウンロードすると、後で楽ちんです。
public222のフォルダー

初期化する

firebase-tools-instant-win.exeを立ち上げます。

public222と同じ場所にダウンロードした方はそのままで大丈夫です。
cdコマンドで移動する場合は、
cd 移動先のファイルパス

私はデスクトップにデプロイしたいフォルダーがあるので、
cd C:\Users\ユーザ名\Desktopと入力。

次に、初期化していきます。
firebase init hostingと入力。

進む準備はできていますか?

Are you ready to proceed? (Y/n) y

y

オプションを選択してください。(矢印キーを使用)

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

すでにプロジェクトを作ってあると思うので、Use an existing projectを選択してEnter。

このディレクトリのデフォルトのFirebaseプロジェクトを選択します。

Select a default Firebase project for this directory:
> test2-6d6cd (test2)

存在するプロジェクトが表示されるので、hostingしたいプロジェクトを選んでEnter。

パブリックディレクトリとして使用したいものは何ですか?

What do you want to use as your public directory? (public) public222

デプロイしたいファイルがあるフォルダー名にしましょう。

私はpublic222というフォルダーにデプロイしたいhtmlファイルがあるので、public222としています。

事前にpublicフォルダーを作ってあり、デプロイしたいファイルがあればそのままEnterで大丈夫です。

シングルページアプリとして設定する(すべてのURLを/index.htmlに書き換える)?

Configure as a single-page app (rewrite all urls to /index.html)? (y/N) n

私がデプロイしたいのは、アプリではないので、no

GitHub で自動ビルドとデプロイを設定する?

Set up automatic builds and deploys with GitHub? (y/N) n

今回は使わないので、no

ファイルpublic222/index.htmlは既に存在しています。上書きしますか?

+  Wrote public222/404.html
File public222/index.html already exists. Overwrite? (y/N) n

index.htmlが書き換えられてしまうので、no

+ Firebase initialization complete!となれば初期化は完了です。

ローカル環境で見れるようにする

ローカル環境で確認するには、
firebase emulators:startと入力。

+  hosting: Local server: http://localhost:5000

が出てくるので、
http://localhost:5000にアクセスするとindex.htmlが見れます。

処理が動き続けているので、Ctrl + c で処理を中止できます。

デプロイして完全に公開する

完全に公開するには、Ctrl + c で処理を中止した後、firebase deployと入力。

+ Deploy complete!が出たら完了です。
一番下に、

Hosting URL: https://○○○○.web.app

とあるので、Hosting URLにアクセスすれば見れるはずです。

Firebase Hosting Setup Completeが出てきた場合

FirebaseHostingSetupComplete
Firebase Hosting Setup Completeが出てくる原因は、2つ考えられます。

  1. index.htmlを初期化してしまった。
  2. 表示したいファイルがindex.htmlではない

「1」はどうしようもないですが、「2」の場合は、
https://○○○○.web.app/表示したいファイル名
でいけると思います。

仮にtest.htmlを表示したいときは、
https://○○○○.web.app/test.html
とすれば大丈夫です。

以上となります。
ご覧いただきありがとうございました。

関連

Firebase Authenticationの使い方を解説【FirebaseUI Auth】
【コピペOK】Firebase Storageで画像表示する方法を解説