Firebase×GitHub連携で単発サイトを爆速デプロイ！アフィリエイトサイトにも使える理由｜陥りやすい罠3つもね

「アフィリエイトサイトやちょっとしたLPを作ったはいいけど、公開先のサーバーどうしよう」と悩んだことはないでしょうか。レンタルサーバーを契約するほどでもない、でもGitHub Pagesだと物足りない、そんな中間のニーズにちょうどハマるのがFirebaseです。

特にGitHubとの連携機能を使うと、コードをpushするだけで自動的にサイトが公開される仕組みが作れます。この記事では、Firebaseを使うメリットから、実際のGit連携デプロイの手順、そして実際にやってみて気づいた陥りやすい罠まで、まとめて詳しく解説します。単発サイトやアプリを素早く世に出したい人にとって、判断材料になるはずです。

Firebaseを使うメリットをおさらいする

Firebaseはもともとモバイル・ウェブアプリ向けの開発プラットフォームとして知られていますが、その中の「Hosting」機能は、静的なウェブサイトを手軽に公開できるサービスとして単体でも十分使えます。無料の範囲内で独自ドメインとSSL（HTTPS化）を設定できる点や、世界各地に配信網を持つCDN経由で配信されるため表示速度が安定しやすい点は、個人が単発でサイトを作るうえで大きな魅力です。

さらにAuthenticationやCloud Firestoreといった他のFirebase機能と組み合わせれば、問い合わせフォームや簡単な会員機能を後から追加することも可能です。最初は静的なアフィリエイトサイトとして始めて、必要になったら機能を足していく、という育て方ができるのも柔軟なポイントです。

アフィリエイトサイトや単発サイトに向いている理由

アフィリエイトサイトや比較サイト、キャンペーンLPのような「とりあえず素早く公開して様子を見たい」タイプのサイトは、複雑なサーバー管理を必要としないケースがほとんどです。こうした用途では、Firebase Hostingのようにコマンド一つ、あるいはGit連携だけで公開できる仕組みは相性が良いといえます。

もちろん、Firebaseを使うこと自体がSEOやアフィリエイト成果を保証するわけではありません。あくまでインフラ部分の手軽さがメリットであり、コンテンツの質やサイト設計は別途しっかり作り込む必要がある点は押さえておいてください。

GitHub連携で自動デプロイする仕組みの全体像

Firebase Hostingは、コマンドラインから手動でデプロイすることもできますが、GitHubと連携させると、指定したブランチにpushするだけで自動的にビルド・公開が行われるようになります。仕組みとしては、GitHub Actionsのワークフローを自動生成し、コードのpushをきっかけにFirebaseへのデプロイを実行する、という流れです。

一度この仕組みを作ってしまえば、以降は「ローカルで編集してpushするだけ」で本番サイトが更新されていくため、複数のサイトを並行して運用する場合でも管理の手間がかなり減ります。

具体的なセットアップ手順

大まかな流れは次のとおりです。細かいコマンド名やオプションはバージョンによって変わることがあるため、実行時は公式ドキュメントの表示内容も確認しながら進めてください。

1. Node.jsが使える環境で、Firebase CLIをインストールする
2. Firebaseにログインし、対象のFirebaseプロジェクトを作成または選択する
3. 公開したいサイトのローカルフォルダで初期化コマンドを実行し、「Hosting」の機能を選択する
4. 初期化の途中で表示される質問で「GitHubでの自動デプロイを設定するか」を尋ねられるので、連携したいGitHubリポジトリを指定する
5. 連携が完了すると、GitHub側のリポジトリに自動デプロイ用のワークフローファイルと、必要な認証情報（Secrets）が自動的に追加される
6. 対象ブランチにコードをpushすると、GitHub Actions経由で自動的にビルドとデプロイが実行される

npm install -g firebase-tools
firebase login
firebase init hosting
# 質問の中で「Set up automatic builds and deploys with GitHub?」に
# Yes と答えると、GitHub連携のセットアップが始まる

初期化が完了すると、対象リポジトリの設定画面（Settings）に、Firebaseが自動追加した認証情報が並んでいるはずです。この認証情報を使って、GitHub Actions側からFirebaseへのデプロイ権限が与えられる仕組みになっています。

実際にやってみて気づいた、陥りやすい罠

手順自体はシンプルですが、実際に設定していく中でつまずきやすいポイントがいくつかあります。事前に知っておくだけで無駄な時間を減らせるはずです。

Git連携部分でおさえておきたい豆知識

基本のセットアップに加えて、知っておくと運用がぐっと楽になる細かいポイントをいくつか紹介します。

プレビューチャンネルはURLが本番と別になる

GitHub連携を設定すると、プルリクエスト（PR）を作成した際に、本番とは別の一時的なURLでプレビューを確認できる仕組みが使えることがあります。これは公開前の確認に便利な一方、そのURLをうっかり検索エンジンに送信してしまったり、第三者に共有してしまったりしないよう注意が必要です。本番用のURLとプレビュー用のURLは別物だと意識しておきましょう。

自動生成されたワークフローファイルは編集できる

GitHub連携時に自動生成されるワークフローファイル（.github/workflowsフォルダ内のYAMLファイル）は、あくまで初期設定用のテンプレートです。デプロイ対象のブランチを変更したい場合や、デプロイ前にテストを実行するステップを追加したい場合は、このファイルを直接編集して調整できます。ファイルを誤って削除してしまうと自動デプロイの仕組みごと止まってしまうため、扱いには注意してください。

複数サイトを1つのプロジェクトでまとめて管理できる

1つのFirebaseプロジェクトの中で、複数のサイト（ターゲット）を作り分けて管理することもできます。アフィリエイトサイトを複数運営している場合、プロジェクトを分けるかターゲットで分けるかは、管理のしやすさや請求の見やすさを踏まえて検討するとよいでしょう。

まとめ

情報としては、今更感は否めませんが、それでもFirebaseは、無料枠と独自ドメイン・SSLの手軽さから、アフィリエイトサイトや単発のLPのような「とりあえず素早く公開したい」サイトに向いたホスティング先です。GitHubと連携させれば、git pushだけで自動的にサイトが更新される環境を作れるため、複数サイトを運用する場合の手間も大きく減らせます。

一方で、GitHub連携時のリポジトリ権限、静的サイトとSSRアプリでの料金プランの違い、公開フォルダの設定ミスなど、つまずきやすいポイントもいくつか存在します。これから設定する場合は、まず今回紹介したチェックリストで自分の状況を整理したうえで、公式ドキュメントの最新情報も確認しながら進めてみてください。