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

プログラミング

こんにちは、はるです。

悩み顔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で画像表示する方法を解説

  • hatebu
  • Pocket
  • LINE
  • コピー