Skip to main content

Firebase でのホスト

Firebase の無料利用枠を使用して、静的 Web サイトをホストできます。 これにより、Firebase の NOSQL API にもアクセスできます。

前提条件

  1. Firebase  のアカウントを持っていること。 (持っていない場合は、Google アカウントを使用して無料でサインアップできます)。
  2. クイックスタート を完了していること、または Hugo の Web サイトをデプロイする準備ができでいること。

初期設定

Firebase コンソール  にアクセスし、新規プロジェクトを作成します (すでにプロジェクトがある場合は除く)。 以下のコマンドにより、firebase-tools (node.js) をグローバルにインストールする必要があります。

npm install -g firebase-tools

Firebase (ローカルマシンに設定します) に firebase login でログインすると、ブラウザが起動してアカウントが選択できるようになります。 すでにログインしているが間違ったアカウントにログインしている場合は、Firebase logout を使用します。

firebase login

Hugo プロジェクトのルートで、以下のように firebase init コマンドを使用して、Firebase プロジェクトを初期化します。

firebase init

ここから、以下の手順を実行します。

  1. 機能の質問でホスティングを選択します
  2. 先ほど設定したプロジェクトを選択します
  3. データベース ルール ファイルのデフォルトを受け入れます
  4. 公開ディレクトリのデフォルトである public を受け入れます
  5. シングルページ アプリをデプロイする場合は、質問で [いいえ] を選択します

Firebase と GitHub CI/CD の使用

Firebase の新しいバージョンでは、以下のように、他にもいくつかの質問が適用されます。

  1. GitHub で自動ビルドとデプロイをセットアップしますか?

ここで、権限を取得するために GitHub アカウントにログインするようにリダイレクトされます。 確認します。

  1. どの GitHub リポジトリに対して GitHub ワークフローを設定しますか? (形式: ユーザー/リポジトリ)

上記の形式で使用するリポジトリを含めます (アカウント/リポジトリ)。 資格情報を取得する Firebase スクリプトを使用して、後で GitHub 設定で管理できるサービス アカウントを作成します。

  1. 毎回デプロイする前にビルドスクリプトを実行するようにワークフローを設定しますか?

ここで、デプロイを実行する前に、いくつかのコマンドを含めることができます。

  1. PR がマージされたときに、あなたのサイトのライブチャンネルに自動的にデプロイされるように設定しますか?

デフォルトのオプション(main)を入れることができます。

その後、Firebase は CI/CD を使用してプロジェクトに設定されます。 その後、以下のように実行します。

hugo && firebase deploy

これにより、アプリを手動で初期化できます。 その後、https://github.com/your-account/yout-repo/actions から GitHub ワークフローを管理および修正できます。

プッシュする前に、静的ページを更新することを忘れないでください。

手動デプロイ

Hugo サイトをデプロイするには、以下のように、firebase deploy コマンドを実行すれば、すぐにサイトが立ち上がります。

hugo && firebase deploy

CI 設定 (その他のツール)

以下のコマンドを使用して、デプロイトークンを生成できます。

firebase login:ci

また、CI を設定し、トークンを $FIREBASE_DEPLOY_TOKEN のようなプライベート変数に追加できます。

これはプライベートな秘密であり、パブリック リポジトリには表示されません。 選択した CI を理解し、他の人には見えないことを確認してください。

その後、ビルドにステップを追加して、トークンを使用してデプロイを実行できます。

firebase deploy --token $FIREBASE_DEPLOY_TOKEN