Firebase Hosting 静的ファイルを公開する方法

Firebase で 静的ファイルを公開する

• Hosting を使ってみる | Firebase

Firebase の提供するサービスの1つに、静的ファイル（HTML、CSS、JavaScript など）をホスティングできる Hosting というものがあります。無料プランでもコンテンツを HTTPS で配信可能です。

Fibrase Hosting

• Hosting を使ってみる | Firebase

Hosting を使って、ファイルを公開する方法をまとめます。基本的には上記ページにあるとおりに勧めます。

Firebase CLI をインストールする

• Firebase CLI リファレンス | Firebase

プロジェクト(ファイル)のデプロイを行うためには、Firebase CLI を使う必要があります。まずは NPM でインストールします。

$ npm install -g firebase-tools

Loginする

Firebase CLI を利用するにあたって、まずはGoogleアカウントにログインする必要があります。firebase login コマンドを実行します。ブラウザが立ち上がり、認証を行うと成功と表示されます。

$ firebase login

Waiting for authentication...

+  Success! Logged in as xxxxx@gmail.com

以降の手順では、ログインしていないと次のようなエラーが発生します。ログインを忘れずに行います。

Error: Command requires authentication, please run firebase login

アプリを初期化する

適当なプロジェクトディレクトリを用意し、そこでプロジェクト初期化用のコマンドを実行します。

$ firebase init

このコマンドは、ディレクトリに Firebase用のプロジェクト設定ファイル諸々を作成するためのものです。成功すると次のように表示されます。

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  E:\work\hosting

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then  Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory: my-sample-project (my-sample-project-XXXXX)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

いくつかの入力を行う必要がありますが、いい感じに設定してください。以下設定内容の一部です。

生成する設定ファイルの選択

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then  Enter to confirm your choices.
 ( ) 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

Hosting にカーソルを合わせて Space で　Hosting にチェックを入れます。ほかにも使うサービスがあれば、合わせて選択することで設定ファイルをまとめて生成できるようです。今回は、Hosting だけに選択をいれて Enter を押します。

Firebase プロジェクトの選択

? Select a default Firebase project for this directory: my-sample-project

どのプロジェクトかを選択します。ここでは my-sample-project とうプロジェクトをFirebaseで作成しておき、それを選択しました。

公開するディレクトリの選択

? What do you want to use as your public directory? public

デプロイ時に公開されるディレクトリを入力します。デフォルト設定では public ディレクトリが公開されます。

SPAかどうか

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

公開するアプリケーションがSPA(シングルページアプリケーション)かどうかを選択します。SPAにするとすべてのURLが /index.html に上書きされます。

ファイルをデプロイする

設定した公開用ディレクトリ(ここでは /public) にデプロイするファイルを用意します。fire base deploy コマンドでデプロイが実行されます。

$ firebase deploy

=== Deploying to '<YOUR-FIREBASE-APP>'...

i  deploying hosting
i  hosting: preparing public directory for upload...
+  hosting: 1 files uploaded successfully

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/<YOUR-FIREBASE-APP>/overview
Hosting URL: https://<YOUR-FIREBASE-APP>.firebaseapp.com

\.firebaseapp.com にデプロイされたファイルが公開されています。確認してみましょう。

以上。