プロジェクトを作成してHTML公開 - Firebaseで遊ぼう！

Firebaseを使って遊ぶ記事です。スクリーンショット満載でやった気になれます。

概要

Firebaseのホスティング機能を使用した Hello World です。
ホスティング用のHTMLを作成してプロイします。

ゴール

Firebaseにプロジェクトを作成してHTMLを公開します。

必要なもの

• 作業時間：30分
• 費用：無料
• googleアカウント

作業手順

Firebaseプロジェクトの作成

https://firebase.google.com をブラウザで表示して、「使ってみる」ボタンを押下します。

「プロジェクトの作成」を押下します。

「プロジェクト名」に任意のプロジェクト名を入力して「Firebaseの規約に同意します」と「自身の取引、ビジネス～」の2つのチェックボックスをオンにして「続行」を押下します。

プロジェクト名はFirebase全体でユニークである必要があります。Gmailのメールアドレス等と同じですね。

「このプロジェクトでGoogleアナリティクスを有効にする」をオンにして「続行」を押下します。

「新しいGoogleアナリティクスアカウント名」を入力して「保存」を押下します。
ここではFirebaseプロジェクト名と同じ名前が使用できます。

「Googleアナリティクスデータ共有～」と「Googleアナリティクス利用規約～」の2つのチェックボックスをオンにして「プロジェクトを作成」を押下します。

プロジェクトの作成完了までしばらく待ちます。私が試したときは1分ぐらいでした。

プロジェクトが完成したら「続行」を押下します。

プロジェクトのダッシュボード画面に遷移します。これで、作成作業はすべて完了です。

ホスティングの作成とデプロイ

プロジェクトダッシュボードのメニューから「Hosting」を選択します。

Hostingメニューに遷移するので「始める」を押下します。

Hostingのセットアップ画面に遷移するので指示に従って操作を続けます。
まずは、コマンドプロンプトを表示してfirebase-toolsをインストールします。

セットアップに使用するフォルダを作成して、カレントディレクトリにします。

mkdir firebase_helloworld
cd firebase_helloworld

以下のコマンドを実行して firebase-tools のインストールを始めます。

npm install -g firebase-tools

インストールが完了したらブラウザのセットアップ画面に戻ります。

「Firebase Javascript SDKをウェブアプリを～」のチェックボックスをオンにして「次へ」を押下します。

次のような画面となるので、再びコマンドプロンプト画面に切り替えます。

以下を実行してgoogleアカウントへのログインを開始します。

firebase login

Firebaseによる情報収集の許可を求められるためエンターキーを押下します。（Yを入力してもOKです）

自動的にブラウザが起動するので（起動済みの場合はタブ追加）、Googleにログインするアカウントを選択します。

説明画面が表示されるので「次へ」を押下します。

FirebaseCLIが要求するアクセスを求められるため「許可」を押下します。

以下の画面が表示されれば権限付与は完了です。

セットアップ画面に戻って次の手順を確認します。再びコマンド実行のためコマンドプロンプト画面に切り替えます。

以下を実行してホスティング用に初期化します。処理続行を聞かれるのでエンターキーを押下します。（Yを入力してもOKです）

firebase init

作成対象のプロジェクトの種類が聞かれるので「Hosting: Configure files for～」を選択します。

firebaseプロジェクトの設定について聞かれるので「Use an existing～」を選択します。

先ほど作成したプロジェクトが表示されるのでエンターキーを押下します。（スクショではsway-hello-worldが表示されています）

ディレクトリの作成有無を聞かれるのでエンターキーを押下します。

シングルページアプリか聞かれるので「N」を入力します。

GitHubとの連携について聞かれるので「N」を入力します。

これで初期設定は完了です。

フォルダ内にファイルが生成されていることを確認します。

publicフォルダにはHTMLが作成されているので表示して確認します。

Firebase Hostingセットアップ完了のHTMLであることが確認できます。

セットアップ画面に戻って「次へ」を押下します。

ウェブアプリの名前を入力して「登録して続行」を押下します。

「Firebase SDKの追加」は「npmを使用する」のまま「次へ」を押下します。
コマンドの実行が記載されていますが、このタイミングで実行する必要はありません。（実行しても問題ありません）

以下の内容が表示されます。再びコマンド実行のためコマンドプロンプト画面に切り替えます。

コマンドプロンプトで以下を実行してデプロイを開始します。

firebase deploy

デプロイが完了する以下のような画面となります。

セットアップ画面に戻って「コンソールに進む」を押下します。

ダッシュボードでアプリがデプロイされていることを確認できます。
「ドメイン」にあるURLをクリックするとデプロイしたHTMLを表示することができます。

以下のような画面となり、ローカルで確認したHTMLがデプロイされていることが確認できます。
以上でHostingのデプロイが完了です。

まとめ

スクリーンショットは多いのですが、少ない手順でHTMLのデプロイが行えました。
ローカルでHTMLを修正して「firebase depoly」コマンドでデプロイする。というのがFirebase Hostingでの基本の流れとなります。