このサイトは、特にやりたいこともなく無気力に生きる汚い中年おじさんデザイナー佐藤文彦のポートフォリオサイトです。
応援よろしくお願いします。

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

2021/11/14

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

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

Firebase Storageを作成

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

セキュリティルールを設定

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

リージョンを選択
リージョンを選択

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

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

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>
your-cloud-storage-bucket

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

カテゴリ

新規記事