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設定を行えます。
- Google Cloud SDKをインストールする
- Google Cloud SDKの初期設定をする
- CORS設定を記述したJSONファイルを作成する
- CORS設定ファイルをデプロイする
順番に見ていきます。
Google Cloud SDKをインストールする
公式サイトからインストーラーをダウンロードして実行します。設定はデフォルトのままNext、Next…でも大丈夫です。
Google Cloud SDKの初期設定をする
インストーラー終了時に自動で初期設定が始まります。インストール時に初期設定を行わなかった場合は、ターミナルで下記コマンドを実行します。
gcloud init
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にアップロードしたファイルを