100
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Firebase StorageにCORSの設定をする

Last updated at Posted at 2016-06-23

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

100
71
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
100
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?