react-pdfでFireabase Storageの画像を出力するためのcors設定手順

#背景

React+Goを使ってWebアプリケーション開発をしております。フォームの入力内容をもとに履歴書としてPDF出力する処理を実装することになり、Reactのライブラリ「React-pdf」を使用して実装することができました。ただ、Firebase Storage内の画像をなかなか出力することができず、格闘していたところ、原因はFirebaseへのアクセス権限設定（cors設定）であるとわかりました。

#この記事で解説する内容

• Firebase Storageのcors設定手順

#そもそもcorsって？
corsとはオリジン間リソース共有（Cross-Origin Resource Sharing）の略。追加のHTTPヘッダーを使用して、あるオリジン（＝データの送信元）で動作しているWebアプリケーションに、異なるオリジンのリソースへのアクセス権を与えるようブラウザに指示するための仕組み。

#文字列と罫線のPDF出力
文字列と罫線のPDF出力はこちらを参考に。
https://qiita.com/kashimuuuuu/items/0d249be6bcea834c473c

#Firebase Storageのcors設定手順

手順
①Google Cloud SDKをインストールする
②ローカルにcors.jsonを作成する
③cors.jsonをデプロイする

##①Google Cloud SDKをインストールする
以下を参考にGoogle Cloud SDKをインストールします。「CORS の構成」の「ここからインストール」というリンクをクリックする。
https://firebase.google.com/docs/storage/web/download-files?hl=ja#cors_configuration

##②ローカルにcors.jsonを作成する

cors.json

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

##③cors.jsonをデプロイする
ターミナルを起動し、cors.jsonが存在するディレクトリで以下コマンドを実行する。

”gs://xxxx.appspot.com”の部分はFirebase StorageのURLに書き換える。

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

（開発環境と本番環境ではgs:以下が異なる）

##デプロイされたファイルを確認

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

（開発環境と本番環境ではgs:以下が異なる）

#参考

• Firebase StorageにCORSの設定をする
  https://qiita.com/niusounds/items/383a780d46ee8551e98c

• Cloud SDK
  https://cloud.google.com/sdk/