Google Cloud Storageにファイルをアップロードする方法
この記事について
この記事ではブラウザからGoogle Cloud Storage（以下「GCS」と呼びます）のバケットにファイルをアップロードする方法について紹介します。この記事の関連リソースを下記に示します。
アプローチ
ブラウザからGCSのバケットにファイルをアップロードする方法として下記の2つのアプローチが考えられます。
- 直接法：バケットに直接アップロードする方法
- 間接法：サーバーを経由してアップロードする方法
前者の直接法のイメージを下記に示します。
後者の間接法のイメージを下記に示します。
この記事では後者の間接法について紹介します。前者の直接法と比べた場合の間接法のメリットとデメリットを下記に示します。
間接法のメリット
- バケットのCORS設定が不要
- バケット数が1つで済む（アップロード用と保存用を別々に用意する必要がない）
- 署名付きURLの発行が不要（サービス アカウント トークン作成者などのIAM設定が不要）
間接法のデメリット
- Cloud Runを使用する場合はリクエストの最大サイズが32MiBに制限される
選定基準
Cloud Runを使用し、アップロードするファイルのサイズが大きい場合は前者の直接法を選定します。それ以外の場合は間接法を選定した方が実装が簡単です。以下、間接法の実装手順を示します。
バケットの作成
ターミナルで下記のコマンドを実行してコーディングの準備をします。
gsutil mb -l asia-northeast1 gs://gcp-file-upload-00000000
00000000の部分には今日の日付8桁などを入力します。
コーディングの準備
ターミナルで下記のコマンドを実行してコーディングの準備をします。
mkdir gcp-file-upload
cd gcp-file-upload
npm init -y
npm install --save @google-cloud/storage dotenv express
touch .env client.js index.html server.mjs upload.mjs
コーディング
エディタで下記のファイルを開いて内容を入力します。
server.mjs
upload.mjs
index.html
client.js
.env
BUCKETの00000000の部分には今日の日付8桁などを入力します。
動作確認
下記のコマンドを実行してアプリケーションのデフォルト認証情報を取得します。
gcloud auth application-default login
ブラウザで http://localhost:3000 にアクセスします。
適当なファイルを選択してからUploadボタンをクリックします。
リストにURLが表示されたらクリックして内容が表示されることを確認します。
参考画像
おわりに
直接法：バケットに直接アップロードする方法の場合、いつもCORS設定やIAM設定に悩まされるのでファイルサイズが小さい場合は間接法：サーバーを経由してアップロードする方法を使う方が簡単です。
なお、Cloud Runなどで実行する場合はDefault compute service accountにStorage オブジェクト 作成者などのロールを忘れずに設定します。
Discussion