Help us understand the problem. What is going on with this article?

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

niusounds
iOSエンジニアLv1。AndroidはLv10くらい。
http://www.niusounds.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした