Firebaseを使って静的なサイトの構築手順

Firebaseを使って静的なサイトの構築手順

firebaseを利用して、簡単サイトを制作して、デプロイするまでの手順です。

ローカル環境

  • OS  windows10 pro
  • node V10.16.3
  • npm 6.9.0

プロジェクト作成

こちらにアクセスして、コンソールへ移動をクリックします。

※googleアカウントが作成されているものとします。

「プロジェクトを作成」をクリックします。

任意のプロジェクト名を設定し、続行をクリックします。

今回はgoogleアナリティクスを無効にしたまま、プロジェクトを作成をクリックし、プロジェクトを作成します。

プロジェクト作成中の画面になります。

しばらくするとプロジェクトが作成されます。

firebase-toolsインストール

プロジェクトをローカルから操作するためにfirebase-toolsをインストールします。

ログインします。

ログインするためのURLが静止されるので、アクセスしてログインします

お持ちのgoogleアカウントで認証すると下記の画面が表示され、認証が完了します。

静的サイトの作成

下記のコマンドで静的サイトを構築します。

いくつか質問されるので、今回は下記のとおりに入力します。

yesと回答

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

サイトのディレクトリはpubicとして、SPAはYesを選択してます。

完了すると、firebase initを実行した階層に

が作成されます。

実行

下記のコマンドで一度実行してみます。

ブラウザから http://localhost:5000 にアクセスすると、下記の画面が表示されます。

デプロイ

最後にデプロイしてみます。

firebaseにアクセスしてプラットフォームにウェブを選択します。

javascriptが表示されるので、ローカルのpublic配下にあるindex.htmlに追加します。

index.htmlを下記のように編集します。

デプロイします

URLが表示されるので、アクセスします。

ブラウザよりアクセスすると下記の画面が表示されると思います。