Firebase CDN

Firebaseを開いてサインインします。 Firebaseのウェブサイトにアクセスし、使ってみるをクリックして、Googleアカウントでサインインしてください。

プロジェクトに名前を付けます。 Google OAuthで既に使用しているプロジェクトがある場合は、それを再利用することも可能です。

Google Analyticsを設定する（オプション）。 このプロジェクトではGoogle Analyticsを無効にすることができます。

プロジェクトを作成します。 プロビジョニングが完了するまで20〜30秒待機してから、続行をクリックしてください。

すべての製品を開く。 プロジェクトダッシュボードから、すべての製品 (All Products) をクリックします。

Select Storage を選択し、Get Started をクリックします。

セキュリティルールを確認します。 Next をクリックして続行します。

クラウドストレージの場所を選択してから、セットアップを完了し、プロジェクトの概要に戻ります。

Webアプリを追加する。 プロジェクトの概要（Project Overview）で、プロジェクト名の下にある + Add app をクリックし、Web を選択します。

アプリを登録し、ニックネームを付けます。

firebaseConfig の値をコピーします。 表示された設定を安全な場所に保存してください。

.env ファイルに値を追加します。 各 firebaseConfig の値を対応する変数にマッピングしてください：

FIREBASE_API_KEY=api_key                          # apiKey
FIREBASE_AUTH_DOMAIN=auth_domain                  # authDomain
FIREBASE_PROJECT_ID=project_id                    # projectId
FIREBASE_STORAGE_BUCKET=storage_bucket            # storageBucket
FIREBASE_MESSAGING_SENDER_ID=messaging_sender_id  # messagingSenderId
FIREBASE_APP_ID=1:your_app_id                     # appId

Open Storage rules. Project Overview に戻り、Storage を選択してから、Rules タブを開きます。

読み取りおよび書き込みアクセスを許可します。 allow read, write: if false; を if true; に変更し、以下のルールと一致するようにします。

rules_version = '2';
 
service firebase.storage {
  match /b/{bucket}/o {
    match /images/{userId}/{fileName} {
      allow read, write: if true;
    }
  }
}

変更を公開します。

CORS設定ファイルを作成します。 テキストエディタで cors.json を作成し、自身のドメインからのアクセスを許可します：

[
  {
    "origin": ["https://ai.example.com"],
    "method": ["GET", "POST", "DELETE", "PUT"],
    "maxAgeSeconds": 3600
  }
]

設定を適用します。 cors.json が含まれるディレクトリから、以下のコマンドを実行してください。その際、<your-cloud-storage-bucket> を実際のバケット名に置き換えてください：

gsutil cors set cors.json gs://<your-cloud-storage-bucket>

設定を確認します。 アクティブなポリシーを取得し、それが cors.json と一致していることを確認してください。

gsutil cors get gs://<your-cloud-storage-bucket>

テストします。 許可されたオリジンから会話をPNGとしてエクスポートしてください。すべてが正しく設定されていれば、CORSエラーなしでエクスポートが成功します。