Zenn
📌

Cloud StorageのCORS設定してみた！(Node)

に公開
Cloud Storage
tech

CORS設定のやり方

ほとんど公式ドキュメントに書いてある通りです。
間違ってる点やここは違うんじゃないかというところがあったら指摘してもらえると嬉しいです。

  1. npm install @google-cloud/storageで下のコードを動かせるようにする
  2. 下のコードをconfigureBucketCors.jsファイルを作って貼り付ける
  3. bucketName, method, originを自分環境に合うように変える
    (maxAgeSecondsとresponseHeaderも変える必要があったら変更する)
    下のように引数でmethodを渡さず、const method = 'GET'みたいに変数にした方がいいかもしれません。
  4. 最後にnode configureBucketCors.js <BUCKET_NAME> <MAX_AGE_SECONDS> <METHOD> <ORIGIN> <RESPONSE_HEADER>をコマンドラインで実行するだけです！

configureBucketCors.js(ルートディレクトリに配置)

'use strict';

// このスクリプトは指定したCloud StorageバケットにCORS設定を追加するためのものです。
// sample-metadata:
//   title: Storage Configure Bucket Cors.
//   description: Configures bucket cors.
//   usage: node configureBucketCors.js <BUCKET_NAME> <MAX_AGE_SECONDS> <METHOD> <ORIGIN> <RESPONSE_HEADER>
//   例: node configureBucketCors.js bucket_name 3600 GET http://localhost:3000 content-type


function main(
  bucketName = 'bucket_name',
  maxAgeSeconds = 3600,
  method = 'GET',
  origin = 'http://localhost:3000',
  responseHeader = 'content-type'
) {
  // [START storage_cors_configuration]
  // Imports the Google Cloud client library
  const {Storage} = require('@google-cloud/storage');

  // Creates a client
  const storage = new Storage();

  async function configureBucketCors() {
    await storage.bucket(bucketName).setCorsConfiguration([
      {
        maxAgeSeconds,
        method: [method],
        origin: [origin],
        responseHeader: [responseHeader],
      },
    ]);

    console.log(`Bucket ${bucketName} was updated with a CORS config
        to allow ${method} requests from ${origin} sharing 
        ${responseHeader} responses across origins`);
  }

  configureBucketCors().catch(console.error);
  // [END storage_cors_configuration]
}

process.on('unhandledRejection', err => {
  console.error(err.message);
  process.exitCode = 1;
});
main(...process.argv.slice(2));

公式ドキュメント
https://cloud.google.com/storage/docs/using-cors?hl=ja#storage_cors_configuration-nodejs

おまけ(Cloud Storageにアップロードしたファイルを一般公開する方法)

基本的に一般公開はしない方がいいんですが、検証としてCloud Storageにアップロードしたファイルをフロントエンド側で見れるようにする必要があったため、一般公開しました。
おまけとして一般公開する方法も書こうと思います！

Cloud Storageにアップロードしたものを一般公開する方法手順

  1. GCP内で対象バケットに移動

  2. 「権限」の欄に移動する

  3. 「アクセスを許可」のところを押す

  4. 新しいプリンシパルに「allUsers」を追加して、ロールに「Storageオブジェクト閲覧者」を選ぶ

  5. バケットのオブジェクト(アップロードしたファイルなど)に移動すると、公開URLができている

  6. このURLをアクセスするフロントエンド側に書けばOK!

今回はバケットごと一般公開しましたが、バケットごとではなく、個別のファイルに対してのみ公開権限を付与することもできます

⚠️ 注意
検証目的なら問題ありませんが、本番環境で一般公開するのはセキュリティリスクが高いため推奨されません。署名付きURLやIAM認証を検討しましょう。

公式ドキュメント
「無効にした場合の動作」の欄に公開方法が書いてあります。
https://cloud.google.com/storage/docs/public-access-prevention?hl=ja#disabled

Discussion