WEBサイトを無料で公開できるFirebaseの設定方法

先日、テストサーバーとしてfirebaseを利用したので、その設定方法について纏めています。記事が長くならないように、前提としてfirebaseがどういったものなのか、わかっている人向けです。firebaseとは？みたいな説明は、一旦飛ばします。

では早速始めます。

1.Node.jsをインストールする

まず、Node.jsをインストールしていない方は、下記サイトから「推奨版」を選択してダウンロードします。

Node.jsインストール

インストール後、きちんとインストールできているか、ターミナルorコマンドプロンプトで確認します。コマンドは下記。

npm -v

2. Firebase CLIのインストール

firebaseを使えるようにするためにFirebase CLIをインストールします。

npm install -g firebase-tools

インストールしたら、確認します。

firebase --version

3.Firebaseにログインする

ログインは、Firebaseのサイトからログインすることもでできますが、コマンドでログインしてみましょう。

firebase login

問題なくログインできるるとこのような画面が表示されます。

4.Firebaseプロジェクトを作成する

設定ができたらプロジェクトを作っていきましょう。まずFirebase Consoleにアクセスします。

Firebase Console

プロジェクトの追加をクリック

プロジェクト名を入力して続行をクリック

下記画面が出るまで続行（Google アナリティクスを有効にする推奨は、都合に応じて変更してください。)

既存のアカウントがあればそのプロジェクトを選択。なければ、新規アカウントを選択し「Firebaseを追加」をクリック。

5.ローカル環境の設定

つぎは、ローカル上での設定に映ります。ひとまず、Firebaseをいれるプロジェクトに移動しましょう。

cd xxxxxx //プロジェクト名

移動したら下記コマンドを入力

firebase init

すると様々な質問されるので、設定を行います。

Which Firebase CLI features do you want to set up for this folder? Press Space to select feature
s, then Enter to confirm your choices.

//ざっくり言うとこのフォルダでなにやるの？のを聞かれます。

firebase hostingを使いたいので下記を選択します。

Hosting: Configure and deploy Firebase Hosting sites

次に、デフォルトのフォルダを設定してくださいと言うようなメッセージが表示されるので、作成したプロジェクトフォルダを選択。

What do you want to use as your public directory?

//パブリックディレクトリとして何を使用したいですか？

と聞かれるので、なにも特になければEnterを押します。この場合「public」内ものが公開対象です。最後に下記質問がありますが、今回html/cssなどの静的ページを作成してテストサーバー用として使用したかったので、N(no)を選択しました。

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

Firebase initialization complete!と出れば完了です。

5.ローカル環境でwebサイトを表示

public内に表示させたいファイルを移動して、下記コマンド実装

firebase serve

問題なく完了するとhttps://localhost:5000がターミナルに表示されるので、クリックするとブラウザが立ち上がり、ローカル上での表示はこれで完了です。

6.無料枠で公開する

デプロイもローカル環境に表示させた要領でターミナルに下記コマンドを入力するだけ。

firebase deploy

同じようにurlが発行されるので、クリックすると公開されたサイトを確認できます。

以上で完了です。

まとめ

無料だと独自ドメインというわけには行かないですが、あまりに気にしなくて良い場合は、サクッとこれでサーバーにアップできるのでおすすめです。時と場合によっては、サーバーレス環境も手かもしれません。