Firebase Hostingをざっくり理解して最短距離で技術系同人誌のランディングページをデプロイするための概要

はじめに

新しく書く技術系同人誌の需要があるかを知りたくなったので、静的ホスティングのFirebase Hosting使ってランディングページを作ってみました。**「ベータ版が公開されたらお知らせするメールアドレスを登録してね」**ってやつです。

Combine framework GUIDEBOOK
https://combine-book.web.app/

Firebase Hostingはかなりシンプルで、まったく知らない状態から適当に4〜6時間くらいでやりたいことはできました。

というわけで皆さんも技術系同人誌やアプリをリリースするときなどまずはランディングページ作ってみてはどうでしょう。以下大雑把ですが、やることを書いておきます。

Firebase Hostingでデプロイするまで

準備

• 先にFirebase コンソール上でプロジェクトを作成する
  • https://console.firebase.google.com/?hl=ja
• Firebase CLIをインストール
  • https://firebase.google.com/docs/hosting/quickstart?hl=ja#before_you_begin
  • 「自動インストール スクリプト」がおすすめ
    • https://firebase.google.com/docs/cli?hl=ja#install_the_firebase_cli
      • グローバルなnpmは使われない
    • 慣れてたらnpmから入れればいい
      • 手順に従うとグローバルに入れる手順になっているので、そのままやるのは怖いので慣れてる人のみ手動でやればいいと思う

firebase init

先にFirebaseコンソールで作成しておいてからプロジェクトを選ぶほうがわかりやすいかもしれない。

そしてタイプとしては下記を選ぶ。

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

公開方式

• public/index.htmlのように公開される
  • デザインテンプレートが用意されているわけじゃない
    • HTML landing page templatesとかでググって

URLはデフォルトが2つある

• プロジェクトIDがデフォルトに使われる
• 何もしなくてもSSL使える
  • 例
    • https://combine-book.web.app
    • https://combine-book.firebaseapp.com
  • デフォルト2つあるのは
    • もともとfirebaseapp.comがあり、web.appが後から追加されたからだろうきっと

デプロイの仕方

• デプロイもコマンド
  • ローカルファイルが送信される
• Firebaseコンソールに履歴が残っていてロールバックもできるので安心
• コマンドでローカルのまま確認することもできる
• さらにGitHub ActionsでPull Request出したらそれがプレビュー用の一時的なサーバにデプロイ
  • マージされたら（任意の）mainブランチがデプロイされる

SDK（JSのSDK）

• 基本的にはscriptタグで読み込む
  • ドメインがデフォルトのままなら"/__/がそのドメインのJSを読み込める
    • https://firebase.google.com/docs/hosting/reserved-urls?authuser=0
    • カスタムのドメインの時どうなるかは未検証
    • 例
      • <script src="/__/firebase/9.5.0/firebase-app-compat.js"></script>
      • <script src="/__/firebase/init.js?useEmulator=true"></script>
        • init.js内で設定値を読み込んでくれているのでブラウザのデバッガなどで確認するのが良い

useEmulator=true

ドキュメントに書いてある内容について意味不明だったので試したところ

• ローカル環境
  • useEmulator=true
    • init.jsでレスポンスされるコードを変更
      • firebase.firestoreなどがエミュレータを使うようにしている
      • firestoreやfunctionをローカルで設定しているなら
        • hostとportが記載されている var firebaseEmurators = { ... }
        • 設定されていないなら
          • var firebaseEmulators = {};となる
• 本番環境
  • 変化なし

ユーザの入力フォームを作る

いちばん重要なのがこれです。これができなきゃ意味がないが、やり方を知らなきゃどうやっていいかわからないような感じです。

• そもそもランディングページを作って、静的コンテンツを見せるだけなら入力は要らない
  • 興味がある人にemailアドレスを入力してほしいとかそういうのがある
• 基本的に動的な処理はJavaScriptしか動かない
  • 方法を大雑把に分けると2つ
    • 方法1
      • JSからFirestore（もしくはRealtime Database）を呼び出してデータを叩き込む
        • Vue.jsとかReactとかも使えるがそれはもちろん必須でない
          • デザインのためにBootstrap入れてるとJQuery使う必要があったりするのでJQueryでもいい
        • FirestoreかRealtime Databaseの2つだがもちろんFirestoreのほうがおすすめ
          • コーディングのイメージ
            • Realtime Databaseのやり方だが、Firestoreでもこんな感じ
              • Submitボタンのイベントが発火したらそこでDBを更新
    • 方法2
      • Functionsを利用する
        • Node.jsは動作するので大抵なんでもできる
          • https://firebase.google.com/docs/hosting/functions?hl=ja
• ユースケースに依存するけどJSからFirestore呼び出すのがシンプルで楽
  • Node.jsを使えば何でも出来ますが、ランディングページではオーバーキルな気がします

Google Analyticsを有効にする

• Firebaseプロジェクト作成したら全部自動でやってくれるわけじゃない
  • プロジェクト内からAnalyticsのダッシュボードにアクセスして「プロパティ」的なやつを作成
    • 名前はプロジェクトと一緒でいい
      • 作成するとテンプレート的に使えるコードが出てくるのでこれを使えばいい
      • Hostingを選んでると/__/firebase/init.js?useEmulator=trueが初期化コードとして自動生成されておりそこにappIdが増えてる
    • firebase.jsonに"site"を追加してと出てくるのでプロパティ的なやつを入力
  • テストしてからダッシュボードに表示されてるのを見てから告知しよ！

他サービスとの使い分け

他サービスについても書いておくと、静的ホスティングにはGitHub PagesやNetlifyなどがあります。開発者がランディングページを作るならどうするか、という私の指標を書いておきます。

• 完全に静的コンテンツのみでフォームとか絶対必要ないなら...
  • GitHub Pages
    • pushするだけでデプロイするから完全に慣れてるはず
      • Googleフォームへのリンクつけてそこで入力してもらうのが一番最速かもしれない...
        • フォームにバリデーションつけたりとかは諦める
• ページにフォームは必要だがFirestoreやRealtime Databaseなんか使ったこと無いし不安なら...
  • 無料プランで一人でやる場合
    • Netlify
      • 無料枠は1ユーザのみ
  • AWSに慣れてる/複数人でやる場合
    • Amplify Console
      • https://dev.classmethod.jp/articles/amplify-inquiry-form-101/

おわりに

ランディングページって基本は何を書いてもいいと思います。ただエモいことや今期おすすめのアニメ情報とか書いてあったりしたらそれは一日寝かして次の日にサクッと消しときましょう！