はじめてのFirebase Hosting

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

はじめに

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

対象読者

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

検証環境

Firebase Sparkプラン
MacOS Mojave 10.14.6

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

はじめにFirebaseのプロジェクトをFirebaseコンソールから作成します。ブラウザから以下のURLにアクセスしてください。

https://console.firebase.google.com

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をインストールします。ターミナルを開いて、以下のコマンドを実行してください。

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

1	$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh \| bash

nvmのインストールが完了したら、ターミナルからログアウトしてターミナルを開き直してください。

2. nodeのインストール

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

$ nvm install 10

1	$ nvm install 10

インストールが完了したらバージョンを確認しておきましょう。

$ node -v
v10.16.3

1 2	$ node -v v10.16.3

3. Firebase CLIのインストール

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

$ npm install -g firebase-tools

1	$ npm install -g firebase-tools

4. Firebaseにログインする

ターミナルからFirebaseを操作するために、Firebaseにログインします。Firebaseにログインするにはfirebase loginコマンドを実行します。

$ firebase login

1	$ firebase login

ログインコマンドを実行するとCLIの使用状況やエラーレポートをFirebaseが収集することを許可するかの質問が表示されます。

? Allow Firebase to collect CLI usage and error reporting information?

1	? Allow Firebase to collect CLI usage and error reporting information?

許可をする場合はy、許可をしない場合はnを入力してください。入力後、ブラウザにFirebaseアクセス認証の画面が表示されます。認証が完了するとターミナル上に完了メッセージが表示されます。

✔  Success! Logged in as &lt;your_account_name&gt;

1	Success! Logged in as <your_account_name>

5. 認証を確認する

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

$ firebase projects:list
✔ Preparing the list of your Firebase projects
┌──────────────────────┬──────────────────────┬──────────────────────┐
│ Project Display Name │ Project ID           │ Resource Location ID │
├──────────────────────┼──────────────────────┼──────────────────────┤
│ HostingTest          │ hostingtest-xxxxx    │ [Not specified]      │
├──────────────────────┼──────────────────────┼──────────────────────┤
│ XXXXX                │ XXXXX                │ [Not specified]      │
└──────────────────────┴──────────────────────┴──────────────────────┘

２ project(s) total.

$ firebase projects:list

Preparing the list of your Firebase projects

┌──────────────────────┬──────────────────────┬──────────────────────┐

│ Project Display Name │ Project ID │ Resource Location ID │

├──────────────────────┼──────────────────────┼──────────────────────┤

│ HostingTest │ hostingtest-xxxxx │ [Not specified] │

│ XXXXX │ XXXXX │ [Not specified] │

└──────────────────────┴──────────────────────┴──────────────────────┘

２ project(s) total.

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

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

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

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

$ mkdir fbHostingTest

1	$ mkdir fbHostingTest

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

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

$ cd fbHostingTest
$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/XXXXX/Projects/fbHostingTest

? Which Firebase CLI features do you want to set up for this folder? Press Space
to select features, then Enter to confirm your choices. (Press &lt;space&gt; to selec
t, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection)
❯◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
◯ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules

$ cd fbHostingTest

$ firebase init

######## #### ######## ######## ######## ### ###### ########

## ## ## ## ## ## ## ## ## ## ##

###### ## ######## ###### ######## ######### ###### ######

## ## ## ## ## ## ## ## ## ## ##

## #### ## ## ######## ######## ## ## ###### ########

You're about to initialize a Firebase project in this directory:

/Users/XXXXX/Projects/fbHostingTest

? Which Firebase CLI features do you want to set up for this folder? Press Space

to select features, then Enter to confirm your choices. (Press <space> to selec

t, <a> to toggle all, <i> to invert selection)

❯◯ Database: Deploy Firebase Realtime Database Rules

◯ Firestore: Deploy rules and create indexes for Firestore

◯ Functions: Configure and deploy Cloud Functions

◯ Hosting: Configure and deploy Firebase Hosting sites

◯ Storage: Deploy Cloud Storage security rules

3. Hostingを選択する

カーソルキーで”Hosting”に移動して、スペースキーを押して選択状態にします。

◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules

◯ Functions: Configure and deploy Cloud Functions

❯◉ Hosting: Configure and deploy Firebase Hosting sites

◯ Storage: Deploy Cloud Storage security rules

リターンキーを押すと、Firebaseプロジェクトの選択画面に移ります。

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

接続するFirebaseプロジェクトを選択します。

? Please select an option: (Use arrow keys)
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

? Please select an option: (Use arrow keys)

❯ Use an existing project

Create a new project

Add Firebase to an existing Google Cloud Platform project

Don't set up a default project

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

? Select a default Firebase project for this directory:
  XXXXX (XXXXX)
❯ hostingtest-XXXX (HostingTest)

? Select a default Firebase project for this directory:

XXXXX (XXXXX)

❯ hostingtest-XXXX (HostingTest)

リターンキーを押すと、公開ディレクトリの選択画面に移ります。

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

外部公開するルートディレクトリを指定します。

? What do you want to use as your public directory? (public)

1	? What do you want to use as your public directory? (public)

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

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

サイトの構成がシングルページ(1ページ)アプリケーションか通常ページのアプリケーションかの選択をします。

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

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

シングルページアプリケーションの場合はyを押します。シングルページにした場合、自動的にリライト設定が行われ、複数のURLで同一のページが表示されるようになります。今回は通常の静的ページを想定しているので、nを押します。

Firebaseによりファイルが作成され、ローカルのプロジェクトディレクトリに追加されます。

✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

Wrote public/404.html

Wrote public/index.html

i Writing configuration info to firebase.json...

i Writing project information to .firebaserc...

i Writing gitignore file to .gitignore...

Firebase initialization complete!

以上でFirebaseの初期化は完了です。お疲れ様でした。

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

Firebaseの初期化が完了するとローカルの公開ディレクトリにデフォルトのindex.htmlが作成されます。Firebaseのサービスにデプロイする前にローカルの環境で実行テストをしてみましょう。

ローカル環境でFirebase Hostingのテストを行うにはローカルのプロジェクトディレクトリでfirebase serveコマンドを実行します。今回はHosting機能しか利用していないので、--onlyオプションでhostingだけを指定しておきます。

※serverではなくserveなのでスペルミスに注意してください。

$ firebase serve --only hosting
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000

$ firebase serve --only hosting

i hosting: Serving hosting files from: public

hosting: Local server: http://localhost:5000

ブラウザからhttp://localhost:5000にアクセスしてみましょう。以下の画面が表示されれば成功です。

確認が終わったら、Control + cでローカルのテスト環境を停止しておきましょう。

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

ローカル環境での確認に問題がなければ、本番サイトにデプロイをしてみましょう。Firebaseのサービスにデプロイをするにはfirebase deployコマンドを実行します。

$ firebase deploy

=== Deploying to ‘hostingtest-XXXX'...

i  deploying hosting
i  hosting[hostingtest-XXXX]: beginning deploy...
i  hosting[hostingtest-XXXX]: found 2 files in public
✔  hosting[hostingtest-XXXX]: file upload complete
i  hosting[hostingtest-XXXX]: finalizing version...
✔  hosting[hostingtest-XXXX]: version finalized
i  hosting[hostingtest-XXXX]: releasing new version...
✔  hosting[hostingtest-XXXX]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/hostingtest-XXXX/overview
Hosting URL: https://hostingtest-XXXX.firebaseapp.com

$ firebase deploy

=== Deploying to ‘hostingtest-XXXX'...

i deploying hosting

i hosting[hostingtest-XXXX]: beginning deploy...

i hosting[hostingtest-XXXX]: found 2 files in public

hosting[hostingtest-XXXX]: file upload complete

i hosting[hostingtest-XXXX]: finalizing version...

hosting[hostingtest-XXXX]: version finalized

i hosting[hostingtest-XXXX]: releasing new version...

hosting[hostingtest-XXXX]: release complete

Deploy complete!

Project Console: https://console.firebase.google.com/project/hostingtest-XXXX/overview

Hosting URL: https://hostingtest-XXXX.firebaseapp.com

ブラウザからHosting URL:に表示されているURLにアクセスしてみましょう。ローカルで確認した画面と同じものが表示されていれば成功です。

Firebaseコンソールからもデプロイ状況を確認しておきましょう。Firebaeコンソールの、”開発”→”Hosting”からドメインやデプロイの状態を確認することができます。

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

最後に検証用に作成したFirebaseプロジェクトを削除しておきましょう。プロジェクトの削除はFirebaseコンソールから行います。コンソールから削除対象のプロジェクトを選択して、歯車のアイコンをクリックします。

歯車のアイコンをクリックして表示された”プロジェクトの設定”をクリックします。

”Settings”画面が表示されます。”全般”タブの一番下に”プロジェクトを削除”があります。

”プロジェクトを削除”を押すと、削除の確認画面が表示されます。

チェックボックスを全てチェックすることで、削除ボタンを押せるようになります。削除ボタンを押すと削除が完了します。

さいごに

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

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

AWS・クラウドのMSP スカイアーチネットワークス株式会社

AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。

投稿者プロフィール

スカイブロガー

はじめに

目次

対象読者

検証環境

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

Firebase CLIをインストールする

1. nvmのインストール

2. nodeのインストール

3. Firebase CLIのインストール

4. Firebaseにログインする

5. 認証を確認する

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

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

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

3. Hostingを選択する

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

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

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

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

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

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

さいごに

投稿者プロフィール

最新の投稿

サービス

インフォメーション

企業情報

会社Facebook

はじめに

目次

対象読者

検証環境

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

Firebase CLIをインストールする

1. nvmのインストール

2. nodeのインストール

3. Firebase CLIのインストール

4. Firebaseにログインする

5. 認証を確認する

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

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

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

3. Hostingを選択する

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

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

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

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

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

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

さいごに

投稿者プロフィール

最新の投稿

RECOMMENDこちらの記事も人気です。

SkyHopper用簡易インストーラでSkyHopperのインストール①

AndroidWear Huawei Watchの簡易レビュー

OutSystems Platform －視覚的なビジュアルモデリング言語－

AWSセミナーレポート『建設/建築業界のDX動向をアップデート』建築業界…

Google Express利用してみました

PHPのDoctrineでSQLが乱発される事象について

LambdaでAWS Systems Manager パラメータストア（…

Vimで複数のファイルを便利に開く

タグクラウド

サービス

インフォメーション

企業情報

会社Facebook

タグ