Firebase StorageにCORSの設定をする

Google IO 2016でFirebaseの機能が大幅に強化されることが発表され、Amazon S3のようなクラウドストレージのFirebase Storageが導入されました。これによりFirebaseアプリケーションでより簡単にファイルのアップロード・ダウンロードを実装できるようになりました。
以前からFirebaseには静的Webサイトをホスティングする機能があり、これを使ってFirebaseデータベースと連携するWebアプリを簡単に作成できたのですが、Firebase Storageの導入によって画像や動画、音声ファイルなど巨大なデータをアップロードしたりするアプリも作れるようになったのです。素晴らしい。

ところが、Firebaseのホスティング機能でホストされるWebページとFirebase Storageでホストされるファイルはドメインが異なります。そしてFirebase StorageはCORS設定が有効になっていません。つまり、Firebaseホスティング機能でホストされるWebページ上でFirebase Storageから取得した画像をCanvasに描画したりJavaScriptで読み書きしたりすることができません。なのでCORSを有効にしたいのですが、管理コンソール上でもそれらしい設定は見当たりませんでした。

実のところFirebase Storageは以前から存在しているクラウドストレージサービスであるGoogle Cloud Storageそのものであり、Google Cloud SDKを使ってGoogle Cloud StorageのCORS設定を行えます。

1. Google Cloud SDKをインストールする
2. Google Cloud SDKの初期設定をする
3. CORS設定を記述したJSONファイルを作成する
4. CORS設定ファイルをデプロイする

順番に見ていきます。

Google Cloud SDKをインストールする

公式サイトからインストーラーをダウンロードして実行します。設定はデフォルトのままNext、Next…でも大丈夫です。

Google Cloud SDKの初期設定をする

インストーラー終了時に自動で初期設定が始まります。インストール時に初期設定を行わなかった場合は、ターミナルで下記コマンドを実行します。

gcloud init

CORS設定を記述したJSONファイルを作成する

任意のディレクトリに、以下のようなファイルを作成します。ファイル名は何でも良いです。ここでは説明のためにcors.jsonとします。

cors.json

[{
  "origin": ["https://xxxx.firebaseapp.com", "http://localhost:3000"],
  "responseHeader": ["*"],
  "method": ["GET"],
  "maxAgeSeconds": 86400
}]

※http://localhost:3000を入れているのは私が開発時に必要だったからです。個々の開発環境に応じて、必要に応じて書き換えてください。
※https://xxxx.firebaseapp.comの部分は実際のFirebase HostingのURLに書き換えてください。URLはFirebase Hostingの管理コンソールで確認できます。

CORS設定ファイルをデプロイする

先ほど作成したcors.jsonのディレクトリでターミナルを開き、下記コマンドを実行します。
gs://xxxx.appspot.comの部分は実際のFirebase StorageのURLに書き換えてください。URLはFirebase Storageの管理コンソールで確認できます。

gsutil cors set cors.json gs://xxxx.appspot.com 

設定が正しく行えたかどうかは下記コマンドで確認できます。

gsutil cors get gs://xxxx.appspot.com 

これで、Firebase Storageにアップロードしたファイルを