【app-ads.txt の配置】 Firebase Hosting × Functions でプラットフォーム別に動的に設定する

概要

app-ads.txt をデベロッパーサイトに配置する件でFirebase Hostingを用いて配置する記事をいくつか参考にさせていただきました

• https://zenn.dev/keitaan0822/articles/155c69fc617d44
• https://qiita.com/masaibar/items/c378b4f01b707ac2506a
• https://zenn.dev/k9i/articles/8b91ee1e7dcc53

表示されるページを違和感ないようにするには各アプリで各アプリページにリダイレクトする必要があります。

各アプリでプラットフォームごとにこのサイトを作ろうとするとアプリ数×2 の数のサイトが必要になってしまします。
これではアプリ数が多い場合、プラットフォームごとにサイトを作成する必要があり、管理が複雑になります。

そこで、1つのWebページでユーザーのプラットフォームに応じて適切なリダイレクト先に動的に遷移させる方法を採用し、アプリ数×2のWebページ作成を回避します。

使用する技術

• Firebase Hosting: ホスティングサービス→サイトの本体
• Firebase Cloud Functions: サーバーレスなバックエンドサービス→プラットフォームｔごとにリダイレクト判定
• Node.js: Cloud Functions 用の JavaScript 実行環境

---

手順

1. Firebase プロジェクトのセットアップ

Firebase CLI がインストールされていない場合、以下を実行してインストールしてください：

npm install -g firebase-tools

Firebase プロジェクトをセットアップします：

firebase login
firebase init hosting functions

---

2. Cloud Functions のコードを作成

以下のコードをfunctions/index.jsに追加します。

const functions = require("firebase-functions");

// 環境変数でリダイレクト先を管理
const iosUrl =
  "https://apps.apple.com/jp/developer/XXX"; // 自身のAppStore のWebページ
const androidUrl =
  "https://play.google.com/store/apps/developer?id=XXX"; // 自身のAndroid のWebページ

exports.redirectBasedOnDevice = functions.https.onRequest((req, res) => {
  const userAgent = req.headers["user-agent"] || "";

  let destination;
  if (/iPhone|iPad|iPod/i.test(userAgent)) {
    destination = iosUrl; // iOS用URL
  } else if (/Android/i.test(userAgent)) {
    destination = androidUrl; // Android用URL
  } else {
    destination =
      "https://XXX"; // デフォルトURL。私は力を入れているAppStoreの方を配置しました
  }

  res.redirect(301, destination);
});

---

3. Cloud Functions をデプロイ

Cloud Functions を Firebase にデプロイします：

firebase deploy --only functions

---

4. Firebase Hosting 設定の更新

firebase.jsonに以下を追加して、リクエストを Cloud Functions にリダイレクトします：

{
  "hosting": {
    "public": "public", 
    "rewrites": [
      {
        "source": "/",
        "function": "redirectBasedOnDevice"
      }
    ]
  }
}

---

5. app-ads.txt をpublic/ に設置

Firebase Hosting の公開ディレクトリ（デフォルトでは public/ ディレクトリ）に app-ads.txt ファイルを配置します。

# AdMob のサイトから app-ads.txt をコピー
$ echo "コピーしたコードスニペット" > public/app-ads.txt

要件: https://support.google.com/admob/answer/9363762?hl=ja#step2

6. Firebase Hosting にデプロイ

firebase deploy --only hosting

---

動作確認

1. iOS デバイスからアクセスした場合：
   → App Store の Web ページにリダイレクト

2. Android デバイスからアクセスした場合：
   → Google Play の Web ページにリダイレクト

3. その他のデバイス（PC など）からアクセスした場合：
   → デフォルトのページにリダイレクト

---

注意事項

• Cloud Functions のコストがかかる
  • 一般的に誤差の範囲内だと思いますが
• User-Agent の信頼性
  • 一部のブラウザやデバイスで User-Agent が正確に取得できない場合があります。その際はデフォルト URL にフォールバックします