Firebase HostingでWebサイトをデプロイする

概要

Firebaseとは

Google Cloudの一部であるFirebaseですが、さまざまな機能が存在します。

元々はFirebase社が開始したサービスで、買収により統合された過去があるため、FirebaseのみでWebアプリなどの開発を完結できるほどリソースが充実しています。

今回はその中のFirebase Hostingに焦点を絞り、解説&ハンズオン形式で進めていきたいと思います。

Google Cloud Next '23

今年８月に参加したGoogle Cloud Next '23では、いくつかFirebtore関連のサービスをメインとしたセッションがありました。

Firebase Hostingはセッションのメインではないですが、FirestoreやCloud Storage for Firebaseよりも、サービス的な使い方のイメージがつきにくいのかな、と思いましたので今回ハンズオン形式にてブログにしました。

Firebase Hostingは、開始からデプロイまで素早く進められるので、webサイトを作成するにあたりかなり便利なツールだなと感じました。

【Firebase 参考セッション】

• Architecting enterprise apps with Firebase & Google Cloud Platform
• Cloud Run, Firestore, and Firebase: Serverless at your service

Firebase Hostingとは

Firebase Hosting はデベロッパー向けの、本番環境レベルのウェブ コンテンツ ホスティングです。1 つのコマンドですばやくウェブアプリをデプロイすることができ、静的コンテンツと動的コンテンツの両方をグローバル CDN（コンテンツ配信ネットワーク）に配信できます。

こちらは公式ページに記載のある文言ですが、バックエンドではGoogle Cloud StorageとCloud CDN、Cloud Funtionなどを使用することで、上記のような構成を実現できています。

繰り返しになりますが、ウェブアプリやランディングページ、ブログなどのさまざまな用途が期待できます。

次からは、HTML、CSS、JavaScriptを使用して、webページをデプロイしていきます。

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

• 下記URLから使ってみるを押下し、プロジェクト設定画面へ進みます
• https://firebase.google.com/?hl=ja
• 新たにプロジェクトを作成 or 既存のプロジェクトを作成から選択します
• Google アナリティクスもを紐付けるか選択します
• 既存に所持しているGoogle アナリティクス or 新規に作成するか選択します

①プロジェクト作成or選択

②Google アナリティクスの紐付け確認

③Google アナリティクスの選択

最後にプロジェクトの作成を押下すれば完了です。
次からが、Firebase Hostingの設定になります。

実装手順

Firebase CLI のインストール

Firebase CLIとは、Firebaseの各種プラットフォームをコマンドラインから操作するために必要なツールです。
Node.jsで構築されており、npmを使用してインストールをしていきます。

npm install -g firebase-tools

もしnpmが使用できない場合は、このブログ最下行にあるNode.jsのインストール（Macbook）をご覧下さい。

firebase init で初期化

MacBookなどであればターミナルなどのCLIを開き、任意の場所にプロジェクト用のディレクトリを作成します。

mkdir muscle-firebase-project

次に作成したディレクトリに移動後、そのディレクトリを初期化していきます。

firebase init
firebase init hosting（firebase hostingのみ初期化）

ここで、下記のような画面が出てくるかと思います。

今回はFirebase Hostingのみ作成したいので、矢印キーでHosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploysまで移動し、SpaceキーとEnterキーで選択します。

私はプロジェクトを選択する操作がなかったのですが、それはすでにfirebase loginを使用して、プロジェクトにログインしているためです。

その後いくつか設定するための質問が出てくるので、SpaceキーとEnterキーで進めてください。
質問の内容は公式ホームページを参考にしてください。

https://firebase.google.com/docs/hosting/quickstart?hl=ja#initialize

firebase deploy でデプロイ

firebase init hosting で初期化が完了した場合、デフォルトではpublicという名のフォルダがターミナル上で作成されます。（命名した場合は別名）

cd piblicで移動し、publicディレクトリでfirebase deploy --only hostingを実行します。（画像のfbdはエイリアスです）

デプロイが完了した後に、自動的に払い出されるURLが確認できます。

こちらはFirebaseのコンソールURL
Project Console: https://console.firebase.google.com/project/<プロジェクトID>/overview

こちらは実際に作成したWebサイトのURL
Hosting URL: https://<プロジェクトID>.web.app

画像を見てわかるように、何も設定せずにHttpsのSSL設定がデフォルトで行われているので、firebaseにコードを記述するだけで、すぐにwebサイトが作成できてしまいます。

アクセスするとこんな感じのデモwebサイトを見ることができます。

Node.jsのインストール（Macbook）

Homebrew経由でNode.js（npm）をインストール方法について解説します。

• 公式ホームページのコマンドをダウンロードし、ターミナルにコピー&ペーストする
• https://brew.sh/ja/
• バージョンの確認
• brew -v
• nodebrewをインストールする
• brew install nodebrew
• バージョンの確認
• nodebrew -v
• 最新のバイナリを取得
• nodebrew install-binary latest（最新版）
• nodebrew install-binary stable（安定版）
• バージョンの選択
• nodebrew list
• nodebrew use <バージョンを入力>
• パスを通す（bash or zsh）
• echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
• echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
• パスの読み込み
• source ~/.bash_profile
• source ~/.zsh_profile

参考
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09
https://qiita.com/non0311/items/664cf74d9ff4bad9cf46

まとめ

今回はGoogle Cloud Next '23でFirebase関連のセッションをきっかけに、導入向けのハンズオンを実践しました。
その他にも多くのサービスが用意されているFirebaseですので、ぜひ私のブログがFirebaseの導入のきっかけになるように、今後も発信したいと思います。