Firebase Storageに画像をアップロードメモ

Firebase Storageに画像をアップロードメモ

2021/11/14
Firebase

Firebase Storageのバケットを作成する

Firebaseを表示し、サイドナビのStorageを押し、「始める」ボタンを押す。

セキュリティルールが表示される。
こちらはあとから変更は可能。

利用するリージョンが表示される。
東京リージョンは「asia-northeast1」。
あとからの変更は不可。

Storageのセキュリティルールを変更

デフォルトのセキュリティルールは、認証済みユーザーのみ閲覧、編集可能です。

とりあえず、以下のように変更してすべてのユーザーに閲覧、編集を可能にします。

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

画像をアップロード

詳しくは公式を参照。

const upload = async (file) => {
  // Blob または File からアップロードする
  const storageRef = firebase.storage().ref(file.name);
  // storageにアップロード
  const snapshot = await storageRef.put(file);

  // アップロードしたファイルのパスを取得
  const path = await snapshot.getDownloadURL();

  // データをDB(firestore)に登録
  const docRef = firebase.firestore().collection("images");
  await docRef.add(path);
};

CORSに対応

アップロードした画像を表示した場合CORSエラーになります。
その為、storageのCORS設定をする必要があります。

CORSの設定は、gsutilコマンドラインツールを利用します。
ダウンロードはこちらから。

ダウンロードしたファイルを解凍して、解凍したファイルがあるルートディレクトリで以下のコマンドを実行します。

./google-cloud-sdk/install.sh

いくつか質問されます。

google Cloud SDKの改善に協力しますか(Y / n)?

Do you want to help improve the Google Cloud SDK (y/N)?

どちらでもOK。

プロファイルを変更して$PATHを更新し、シェルコマンドを有効にして完了しますか?

Modify profile to update your $PATH and enable shell command completion?
// 続行しますか(Y / n)?
Do you want to continue (Y/n)?

YESでOK。

更新するrcファイルへのパスを入力するか、空白のままにして使用します

Enter a path to an rc file to update, or leave blank to use [/Users/hoge/.bash_profile]:

空白のままEnter。

以下が/Users/hoge/.bash_profileに追加される。

# The next line updates PATH for the Google Cloud SDK.
if [ -f '/Users/hoge/google-cloud-sdk/path.bash.inc' ]; then . '/Users/hoge/google-cloud-sdk/path.bash.inc'; fi

# The next line enables shell command completion for gcloud.
if [ -f '/Users/hoge/google-cloud-sdk/completion.bash.inc' ]; then . '/Users/hoge/google-cloud-sdk/completion.bash.inc'; fi

Cloud SDKは、Python 3.7と特定のモジュールが最適です

Cloud SDK works best with Python 3.7 and certain modules.

Download and run Python 3.7 installer? (Y/n)?

ターミナル ウィンドウを立ち上げ直す

同じターミナルウィンドウだと変更が反映されないので、新しいウィンドウか、もしくはターミナルを立ち上げ直します。

SDKを初期化

SDK を初期化します。

gcloud init

設定ファイルをアップロード

以下の内容で、cors.jsonという名前のファイルを作成します。

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

作成したファイルをデプロイします。

gsutil cors set cors.json gs://<your-cloud-storage-bucket>

これでCORSエラーは回避できます。

なにかお手伝いできることがあればご連絡ください。

お問い合わせはこちらから

※Googleフォームが表示されます