Vue.js+firebase 画像アップロード機能の実装

ECサイト作成時に画像アップロード機能の実装をしたのですが、firebaseの使い方が初心者の私には難しすぎたので記録しておきます。
うまく行った方法を書いていこうと思うのですが、必要のない作業もあるかもしれないです。。。

Fire storeageのセットアップ

①左上の歯車マークからプロジェクト設定のページに進み、右下の赤丸をクリックしてマイアプリを作成する。

②以下のような画面が表示されるので、npm install firebaseを行い。コードはすぐに使えるようにしておく。
(vue.jsを使用している場合はnpm install vuefire firebaseもしておく必要があるかもしれないです。こちらを参考にしてみてください)

Fire storageに商品画像をアップロード

①Firebaseにプロジェクトを作成して、Storageを始める。

②セキュリティルールを以下のように変更。（初期設定ではデータの追加ができないようになっている。）

③また、'files'というフォルダを追加しておく。（名前はなんでもいいです）

④以下のようにコードをかく。

  //npm install firebaseでインストールされるパッケージに含まれる'firebase/app'のinitializeAppをインポート
  import { initializeApp } from "firebase/app";

  //アプリの設定を行う
  const firebaseConfig = {
  apiKey: process.env.VUE_APP_APIKEY,
  authDomain: process.env.VUE_APP_AUTHDOMAIN,
  storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
};
  firebase.initializeApp(firebaseConfig);

  // ストレージサービスへの参照を取得し、ストレージバケットの参照を作成するために使用
  const storage = getStorage(firebaseApp);

⑤apiKey、authDomain、storageBucketは隠しておきたい情報なので、.envファイルに以下のように書いておき、上のファイルから読み取れるようにしておく。また、VueCLI3.x 4.xで環境変数を扱う場合は .env ファイルに VUE_APP_ の接頭語をつけるということなのでVUE_APPも忘れずにつけておく。

.env

VUE_APP_API_KEY = "あなたのapiKey"
VUE_APP_AUTH_DOMAIN = "あなたのauthDomain"
VUE_APP_STORAGE_BUCKET = "あなたのstorageBucket"

⑥gitにも上げないようにするため、gitigonreファイルにも以下のように記載する。

.gitignore

./.env.

⑥画像をアップロードするメソッドをかく。

HTML

  <input type="file" @change="fileUpload" />
　　　　　<!-- アップロードされた画像が以下に表示される -->
  <img v-if="img_url" :src="img_url" />

/**
   * イメージ画像をアップロード.
   */
  fileUpload(props: any) {
    //アップロードしたい画像の情報を取得。
    const file = props.target.files[0];
    //画像ファイルのURLを取得。
    this.img_url = URL.createObjectURL(file);
    //"files"は③で作成したフォルダ名
    //Firebase storageに画像ファイルを送信。
    const storageRef = ref(storage, "files/" + file.name);

    //Firebaseにデータを適切に送るために必要なコード
    uploadBytes(storageRef, file).then((snapshot) => {
      console.log("blobかfileをアップロード", snapshot);
    });
  }

⑦これで、　Fire storageを確認すると画像データが追加されている。