はじめてのFirebase Hosting

この記事は公開されてから半年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Firebase(https://firebase.google.com)はGoogleが提供しているモバイルおよびウェブアプリケーション向けの開発プラットフォームです。サーバーの管理の必要がなく、開発者はアプリケーションの開発に専念することができます。Firebaseには様々なサービスがあります。本記事では、ウェブアプリケーションをホスティングできるFirebase Hostingの利用法を紹介します。

目次

  1. Firebaseプロジェクトを作成する
  2. Firebase CLIをインストールする
  3. プロジェクトを初期化する
  4. Firebaseプロジェクトをローカルでテストしてみる
  5. 本番サイトにデプロイをする
  6. Firebaseプロジェクトを削除する
  7. さいごに

対象読者

  • Firebase Hostingを初めて利用する開発者
  • Firebase Hostingの雰囲気を知りたい開発マネージャ、営業担当者

検証環境

  • Firebase Sparkプラン
  • MacOS Mojave 10.14.6

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

はじめにFirebaseのプロジェクトをFirebaseコンソールから作成します。ブラウザから以下のURLにアクセスしてください。
Firebaseコンソールからプロジェクトを追加します。”プロジェクトを追加”をクリックします。
プロジェクト名を入力して”続行”をクリックします。
Googleアナリティクスを有効にするかの確認画面に移ります。デフォルトでは有効になっています。”続行”をクリックしてください。
 既存のGoogleアナリティクスアカウントを選択するか新規作成をする画面に移ります。Googleアナリティクスに利用するアカウントを選択もしくは新規作成をします。アカウントの設定が完了したら、”プロジェクトを作成”をクリックします。
プロジェクトの作成が完了するまで、しばらく時間がかかります。
お疲れ様でした。以上でFirebaseプロジェクトの作成は完了です。次はFirebaseの操作に必要なFirebase CLIのインストールを行います。

Firebase CLIをインストールする

Firebase CLIはFirebaseを操作するためのコマンドラインインターフェースです。Firebase CLIをインストールするにはNode.jsとnpmが必要です。本記事では、Node.jsのバージョン管理ツールであるnvmを利用してNode.jsをインストールします。

1. nvmのインストール

はじめにnvmをインストールします。ターミナルを開いて、以下のコマンドを実行してください。
 nvmのインストールが完了したら、ターミナルからログアウトしてターミナルを開き直してください。

2. nodeのインストール

ターミナルを開き直したら、nvmコマンドでNode.jsのインストールを行います。今回はNode.jsのバージョン10の最新版をインストールしてみます。
インストールが完了したらバージョンを確認しておきましょう。

3. Firebase CLIのインストール

npmコマンドでFirebase CLIをインストールします。-gオプションを利用してグローバルインストールをしています。

4. Firebaseにログインする

ターミナルからFirebaseを操作するために、Firebaseにログインします。Firebaseにログインするにはfirebase loginコマンドを実行します。
ログインコマンドを実行するとCLIの使用状況やエラーレポートをFirebaseが収集することを許可するかの質問が表示されます。
許可をする場合はy、許可をしない場合はnを入力してください。入力後、ブラウザにFirebaseアクセス認証の画面が表示されます。認証が完了するとターミナル上に完了メッセージが表示されます。

5. 認証を確認する

Firebaseへのログインができているかをプロジェクトの一覧を表示して確認してみます。プロジェクトの一覧を表示するにはfirebase projects:listコマンドを実行します。

プロジェクトを初期化する

Firebaseのログイン設定を行ったローカル環境にプロジェクトディレクトリを作って、Firebase用に初期化をします。

1. プロジェクトディレクトリを作成する

任意のディレクトリにプロジェクト用のディレクトリを作成します。今回は”fbHostingTest”というディレクトリを作成しました。

2. firebase initコマンドを実行する

作成したプロジェクトディレクトリに移動してFirebaseの初期化を行います。Firebaseの初期化を行いにはfirebase initコマンドを実行します。

3. Hostingを選択する

カーソルキーで”Hosting”に移動して、スペースキーを押して選択状態にします。
リターンキーを押すと、Firebaseプロジェクトの選択画面に移ります。

4. Firebaseプロジェクトを選択する

接続するFirebaseプロジェクトを選択します。
今回は事前に作成しておいたFirebaseプロジェクトを利用するので、このままリターンキーを押します。作成済みのFirebaseプロジェクトが表示されるので、利用するプロジェクトを選択してリターンキーを押してください。
リターンキーを押すと、公開ディレクトリの選択画面に移ります。

5. 公開ディレクトリを設定する

外部公開するルートディレクトリを指定します。
デフォルトはpublicです。今回はpublicのままにするので、このままリターンキーを押します。リターンキーを押すと、サイトの構成を選択する画面に移ります。

6. シングルページアプリケーションか選択する

サイトの構成がシングルページ(1ページ)アプリケーションか通常ページのアプリケーションかの選択をします。
シングルページアプリケーションの場合はyを押します。シングルページにした場合、自動的にリライト設定が行われ、複数のURLで同一のページが表示されるようになります。今回は通常の静的ページを想定しているので、nを押します。
Firebaseによりファイルが作成され、ローカルのプロジェクトディレクトリに追加されます。
以上でFirebaseの初期化は完了です。お疲れ様でした。

Firebaseプロジェクトをローカルでテストしてみる

Firebaseの初期化が完了するとローカルの公開ディレクトリにデフォルトのindex.htmlが作成されます。Firebaseのサービスにデプロイする前にローカルの環境で実行テストをしてみましょう。
ローカル環境でFirebase Hostingのテストを行うにはローカルのプロジェクトディレクトリでfirebase serveコマンドを実行します。今回はHosting機能しか利用していないので、–onlyオプションでhostingだけを指定しておきます。
※serverではなくserveなのでスペルミスに注意してください。
ブラウザからhttp://localhost:5000にアクセスしてみましょう。以下の画面が表示されれば成功です。
確認が終わったら、Control + cでローカルのテスト環境を停止しておきましょう。

本番サイトにデプロイをする

ローカル環境での確認に問題がなければ、本番サイトにデプロイをしてみましょう。Firebaseのサービスにデプロイをするにはfirebase deployコマンドを実行します。
ブラウザからHosting URL:に表示されているURLにアクセスしてみましょう。ローカルで確認した画面と同じものが表示されていれば成功です。
Firebaseコンソールからもデプロイ状況を確認しておきましょう。Firebaeコンソールの、”開発”→”Hosting”からドメインやデプロイの状態を確認することができます。

Firebaseプロジェクトを削除する

最後に検証用に作成したFirebaseプロジェクトを削除しておきましょう。プロジェクトの削除はFirebaseコンソールから行います。コンソールから削除対象のプロジェクトを選択して、歯車のアイコンをクリックします。
歯車のアイコンをクリックして表示された”プロジェクトの設定”をクリックします。
”Settings”画面が表示されます。”全般”タブの一番下に”プロジェクトを削除”があります。
”プロジェクトを削除”を押すと、削除の確認画面が表示されます。
チェックボックスを全てチェックすることで、削除ボタンを押せるようになります。削除ボタンを押すと削除が完了します。

さいごに

本記事ではGoogleが提供しているモバイルおよびウェブアプリケーション向けの開発プラットフォームであるFirebase Hostingの利用方法を紹介しました。Firebaseを利用することでサーバーの管理の必要がなくなり、開発者はアプリケーションの開発に専念することができます。サーバーの構築、運用の手間を省くことでアプリケーションの品質向上やアイデア創出に時間をかけることが可能になりました。Firebaseなど外部に委託できる部分は上手に利用して、より新しく便利なサービスを生み出していくことに時間をかけていきたいですね。
スカイアーチ ファンタジー研究室

スカイアーチ ファンタジー研究室

EasyDoggie