Firebase StorageにCORSの設定をする

More than 3 years have passed since last update.

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にアップロードしたファイルを