作成したHTMLファイルをFirebaseで公開する

最近、Firebaseを使い始めた為、作成したHTMLファイルをFirebaseで公開するための、環境構築からdeployまでの流れを記録しておきたいと思います。

対象読者

• Firebaseを初めて使用する人
• HTMLファイルを作成したが、公開のやり方がわからない人
• Web制作、Web開発初心者の人

前提条件

• 既に公開用のHTMLファイルが作成されていること(SPAではないことを前提として手順を書いています)
• Node.jsがインストールされていること

Firebaseの設定

Firebaseプロジェクトの作成

Firebaseの公式ページを開く
※Firebaseのプロジェクト作成はGoogleアカウントで行います。
右上のアイコンを押すと、アカウントを変更できますので、プロジェクトを作成するアカウントでログインしてください。

使ってみるを選択

プロジェクトを作成を選択

適当なプロジェクト名をつけてください(このプロジェクト名が公開用のURLに含まれます)
今回は、test-projectという名前をつけています。
Firebaseの規約に同意しますの欄にチェックをつけ、続行を選択。

ここではGoogleアナリティクスの設定を行います。
他の分析ツールなどを特に使用しないのであれば、そのまま続行を選択してください。

適当なGoogleアナリティクスアカウントを選択、または作成し、プロジェクトを作成を選択してください。
数秒間待てば、プロジェクトが作成されます。

Firebaseの初期設定

ここからは、プロジェクト作成後のFirebase初期設定をしていきます。

Firebase CLIのインストール

まずは、Firebaseのツールをお使いのPCにインストールする必要があります。
Macであればターミナル、Windowsであれば、コマンドプロンプトなどを開き、以下のコードを入力してください。
※１度でも入力したことがある場合は、この操作は必要ないです。

npm install -g firebase-tools

Firebaseへログイン

次に、作成したプロジェクトのGoogleアカウントでFirebaseにログインします。

firebase login

Allow Firebase to collect CLI usage and error reporting information?というメッセージが出てくるので、そのままエンターをしてください。
Google認証の画面が出てくるので、プロジェクトを作成したアカウントでログインしてください。

↑の画面が出るので、そのまま続行を選択してください。

この画面が出たらログイン完了です。windowはそのまま閉じてください。

Firebase機能の設定

ここからは、Firebaseの機能の設定をしていきます。
今回は、Webサイトを公開するだけのため、Firebase Hostingの設定をします。
事前準備として、Firebase公開後のTOPページとなるHTMLは、ファイル名をindex.htmlとしてください。
次にpublicというディレクトリを作成し、その中に公開用のファイル群を全て入れてください。
私の場合は、testというディレクトリの中に、publicディレクトリを切り、その中にindex.htmlなどのファイル群を入れています。

そして、ターミナルorコマンドプロンプトを開き、公開用のディレクトリ(私の場合はtestディレクトリ)まで移動し、以下のコードを入力してください。

firebase init

↑の画面が出てきます。この画面では、Firebaseのどの機能を使うかを選択します。
矢印キーで上下に移動でき、スペースキーで選択や解除ができます。
今回はFirebase Hostingだけのため、Hostingを選択しエンターを押します。

次は、どのプロジェクトを使用するか聞いてきます。
1番上の、 Use an existing project でエンターをしてください。

先ほど作成したプロジェクトが出てくるため、そのままエンターしてください。

公開するディレクトリ名はpublicかと聞いてきます。
こちらはデフォルトでpublicになっているため、そのままエンターを押します。

公開するページはSPAかと聞いてきます。
今回はSPAではないため、そのままエンターをしてください。(デフォルトはNoとなっています)

GitHubと連携するかと聞いてきます。
今回はしないため、そのままエンターしてください。(デフォルトはNoとなっています)

public/index.htmlが既に存在しているが、このファイルを上書きするかと聞いてきます。
今回は既に作成しているHTMLファイルを使用するため、そのままエンターしてください。(デフォルトはNoとなっています)

↑の画面が出れば設定完了です。お疲れ様です。

Webサイトの公開

それではいよいよWebサイトを公開していきます。
設定完了画面が出た後、以下のコードを入力してください。

firebase deploy

↑の画面が出たらdeploy完了です。
Hosting URL:の部分に記述されているURLにアクセスしてみましょう。
自分が作成したWebページが表示されれば、公開完了です。

あとがき

今回は、作成したHTMLファイルをFirebaseで公開する手順を記述しました。
今後はFirebaseの他の機能の使い方や、SPAの公開なども記述していきたいと思います。