なにかお手伝いできることがあればご連絡ください。
お問い合わせはこちらから
※Googleフォームが表示されます
Firebaseを表示し、サイドナビのStorageを押し、「始める」ボタンを押す。
セキュリティルールが表示される。
こちらはあとから変更は可能。
利用するリージョンが表示される。
東京リージョンは「asia-northeast1」。
あとからの変更は不可。
デフォルトのセキュリティルールは、認証済みユーザーのみ閲覧、編集可能です。
とりあえず、以下のように変更してすべてのユーザーに閲覧、編集を可能にします。
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エラーになります。
その為、storageのCORS設定をする必要があります。
CORSの設定は、gsutil
コマンドラインツールを利用します。
ダウンロードはこちらから。
ダウンロードしたファイルを解凍して、解凍したファイルがあるルートディレクトリで以下のコマンドを実行します。
./google-cloud-sdk/install.sh
いくつか質問されます。
Do you want to help improve the Google Cloud SDK (y/N)?
どちらでもOK。
Modify profile to update your $PATH and enable shell command completion?
// 続行しますか(Y / n)?
Do you want to continue (Y/n)?
YESでOK。
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 works best with Python 3.7 and certain modules.
Download and run Python 3.7 installer? (Y/n)?
同じターミナルウィンドウだと変更が反映されないので、新しいウィンドウか、もしくはターミナルを立ち上げ直します。
SDK を初期化します。
gcloud init
以下の内容で、cors.jsonという名前のファイルを作成します。
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
作成したファイルをデプロイします。
gsutil cors set cors.json gs://<your-cloud-storage-bucket>
これでCORSエラーは回避できます。
なにかお手伝いできることがあればご連絡ください。
※Googleフォームが表示されます