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

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

Clock Icon2023.10.23

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

概要

Firebaseとは

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

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

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

Google Cloud Next '23

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

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

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

【Firebase 参考セッション】

Firebase Hostingとは

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

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

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

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

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

  • 下記URLから使ってみるを押下し、プロジェクト設定画面へ進みます
  • 新たにプロジェクトを作成 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)をインストール方法について解説します。

  • 公式ホームページのコマンドをダウンロードし、ターミナルにコピー&ペーストする
  • バージョンの確認
    • 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の導入のきっかけになるように、今後も発信したいと思います。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.