🚫
Google Cloud StorageでCORSを設定する方法【動画版あり】
この記事について
この記事ではGoogle Cloud Storage（以下「GCS」と呼びます）で CORS を設定し、Webページからfetchなどを使ってアクセスできるようにする方法について紹介します。関連リソースを下記に示します。
おおまかな手順
おおまかな手順を下記に示します。
- バケットの作成
- 権限の設定
- 動作確認用オブジェクトのアップロード
- CORSの設定
- コーディングの準備
- コーディング
- 動作確認
バケットの作成
GCSのWebコンソール にアクセスして下記のバケットを作成します。
- バケット名：任意（例：gcp-storage-cors-(日付8桁)）
- ロケーションタイプ：リージョン
- リージョン：asia-northeast1 (東京)
- ストレージクラス：Standard
- 公開アクセスの防止：チェックしない
- アクセス制御：均一
- 保護ツール：なし
参考画像
権限の設定
作成したバケットの詳細ページ（オブジェクトの一覧ページ）にアクセスして下記の権限を追加します。
- プリンシパル：allUsers
- ロール：Storage レガシー オブジェクト 読み取り
参考画像
動作確認用オブジェクトのアップロード
作成したバケットの詳細ページで「ファイルをアップロードする」ボタンをクリックするなどして下記の動作確認用オブジェクトをアップロードします。
- 名前：status.json
- 内容：{"ok":true}
参考画像
CORSの設定
ターミナルで下記のコマンドを実行して設定の準備をします。
touch cors.json
エディタでcors.jsonを開いて下記の内容を入力します。
ターミナルで下記のコマンドを実行してCORSの設定します。
gsutil cors set cors.json gs://gcp-storage-cors-00000000
コーディングの準備
下記のコマンドを実行してコーディングの準備をします。
mkdir gcp-storage-cors
cd gcp-storage-cors
npm init -y
npm install --save-dev http-server
touch config.json index.html main.js
コーディング
config.json
エディタでconfig.jsonを開いて動作確認用オブジェクトの公開URLを入力します。公開URLはGCS Webコンソールのオブジェクト詳細ページからも確認することができます。
index.html
エディタでindex.htmlを開いて下記の内容を入力します。
main.js
エディタでmain.jsを開いて下記の内容を入力します。
動作確認
ターミナルで下記のコマンドを実行してWebサーバーを起動します。
npx http-server -c-1
ブラウザで http://localhost:8080/ にアクセスしてWebページ内に下記のテキストが表示されることを確認します。
{"ok":true}
おわりに
GCSのCORS設定が反映されるまで数分程度時間がかかる様子なので、うまくいかない場合は少し時間を置いてから再度お試しください。最後までお読みいただきありがとうございました。
Discussion