Google Cloud Storage の CORS 設定ガイド

2024年10月26日 11:41

この記事では、GCP（Google Cloud Platform）の Cloud Storage のバケットにCORSを設定する方法について説明します。

CORSは、WebブラウザがサーバーのリソースにアクセスできるようにするためにAPIに適用されるセキュリティ対策です。

バケットにCORSポリシーを設定する方法には、gsutilコマンドラインツール、XML API、JSON API、Cloud Storage用のクライアントライブラリなど、さまざまな方法があります。今回はgsutilコマンドラインツールを使用します。

gsutilまたはgcloud SDKがインストールされていることを確認してください。Linuxを使用している場合は、以下のコマンドを参照してください。

# Add the Cloud SDK distribution URI as a package source
echo "deb [signed-by=/usr/share/keyrings/cloud.google.gpg] <http://packages.cloud.google.com/apt> cloud-sdk main" | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list

# Import the Google Cloud Platform public key
curl <https://packages.cloud.google.com/apt/doc/apt-key.gpg> | sudo apt-key --keyring /usr/share/keyrings/cloud.google.gpg add -

# Update the package list
sudo apt-get update

# Install the Google Cloud SDK
sudo apt-get install google-cloud-sdk

バケットでのCORSの設定

先ほど述べたように、バケットでのCORS設定にはgsutilコマンドラインツールを使用します。2つの簡単なステップで作業を進めていきます。また、例を挙げて説明します。では、始めましょう。

1. 以下の内容を含むJSONファイルを作成します：

[
    {
      "origin": ["ORIGIN"],
      "method": ["METHOD"],
      "responseHeader": ["HEADER"],
      "maxAgeSeconds": MAX-AGE
    }
]

ここで：

オリジンは、このバケットとのクロスオリジンリソース共有が許可されるオリジンです。例：[https://example.app.com.](https://example.appspot.com./)
メソッドは、このバケットとのクロスオリジンリソース共有が許可されるHTTPメソッドです。例：GETやPUT。
ヘッダーは、このバケットとのクロスオリジンリソース共有が許可されるヘッダーです。例：Content-Type。
最大有効期間は、ブラウザがプリフライトリクエストを繰り返す前にリクエストを行うことができる秒数です。例：3600。

例：
JSONファイルを作成し、*react-cors.jsonと名付けます。*ファイル内に、オリジン、メソッド、responseHeader、maxAgeSecondsに関する上記の情報を追加する必要があります。以下の例を参考にしてください（自分の要件に合わせて変更してください）：

// react-cors.json
[
    {
      "origin": ["<https://example.medium.com>"],
      "method": ["GET", "POST", "PUT", "DELETE"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

2. gsutil corsコマンドを使用してバケットにCORSを設定します
ターミナルを開き、以下のコマンドを入力します。このためにはGCPにバケットが必要で、まだ作成していない場合はGCPコンソールで作成する必要があります。私はmedium-bucketという名前のバケットを作成しました。
バケットにCORSポリシーを設定する例を以下に示します：

gsutil cors set JSONファイル名 gs://バケット名

例：
ここで提供するファイルの場所が正しいことを確認してください。

gsutil cors set home/projects/react-cors.json gs://medium-bucket

バケットのCORS設定の表示

ターミナルを開き、以下のコマンドを入力してバケットのCORSポリシーを表示します。

gsutil cors get gs://BUCKET_NAME

例：

gsutil cors get gs://medium-bucket

バケットからCORSを削除する

1. 以下の内容を含むJSONファイルを作成します：

[]

2. gsutil corsコマンドを使用してバケットのCORSを設定します ターミナルを開き、以下のコマンドを実行します。

gsutil cors set EMPTY_CONFIG_FILE_NAME.json gs://BUCKET_NAME

例：
JSONファイルに空の配列記号を追加する必要があります。これをreact_cors_empty.jsonと呼び、gsutilコマンドラインツールで以下のコマンドを適用します：

gsutil cors set home/projects/react_cors_empty.json gs://medium-bucket

上記の説明を参考に、Google Cloud StorageのCORSポリシーを設定できます。gsutilコマンドラインツールを使用すると、非常に簡単で便利です。どこかで行き詰まったり、記事やCORSポリシーについて質問がある場合は、以下のコメント欄でお知らせください。

この記事は、2022年3月に弊社のエンジニア Sudeep Timalsina が執筆した内容を日本語に翻訳したものです。
英語版はこちらをご覧ください。
https://articles.wesionary.team/configure-cross-origin-resource-sharing-cors-on-a-google-cloud-storage-bucket-79abc2422f52

採用情報

私たちはプロダクト共創の仕組み化に取り組んでいます。プロダクト共創をリードするプロダクト・マネージャー、そして、私たちのビジョンを市場に届ける営業メンバーを募集しています！

開発パートナーをお探しの企業様へ

弊社は、グローバル開発のメリットを活かし、高い費用対効果と品質を両立しています。経験豊富で多様性のあるチームが、課題を正しく理解し、最適なシステムと優れた体験を実現します。業務システムの開発、新規事業の開発、業務効率化やDX化に関するお困りごと、ぜひ弊社にご相談ください。