BETA

firebaseでHostingしているアプリケーションで、Google Cloud Storageにファイルアップロードする

投稿日:2019-11-19
最終更新:2019-11-19

webページからファイルをアップロードして、それをさらにCloud Functionsでフックして....というように、マイクロサービスを組み合わせてサービスを作ろうとしたことから、表題の通りfirebaseにHostingしたフロントエンドのアプリケーションからストレージへのファイルアップロードをする、ということにした。

ほとんどコピペすぎて記事にするのもおこがましいが....

前提

firebaseのプロジェクトは作成済み

手順

  1. firebaseConfigに必要な情報を取得してくる
    中身としては以下のような感じで、必要になるパラメータを入れていく。
var firebaseConfig = {  
  apiKey: "api-key",  
  authDomain: "project-id.firebaseapp.com",  
  databaseURL: "https://project-id.firebaseio.com",  
  projectId: "project-id",  
  storageBucket: "project-id.appspot.com",  
  messagingSenderId: "sender-id",  
  appID: "app-id",  
};  

firebaseの [Project Overview] -> [プロジェクトの設定]の中で プロジェクト IDウェブ API キー が取得可能。 今回は apiKey projectId storageBucket あたりを埋めればOK

  1. アプリケーションの中で常軌を読み込み
    main.jsに以下を追加。
...  
import firebase from 'firebase'  

var firebaseConfig = {  
  apiKey: "api-key",  
  projectId: "project-id",  
  storageBucket: "project-id.appspot.com",  
};  

firebase.initializeApp(firebaseConfig);  
  1. アップローダ用のcomponentを作成
    ここについてはもう本当にコピペ....表示させたいページを以下のようにする。
<template>  
  <div>  
    <div >  
      <p>Upload an image to Firebase:</p>  
      <input type="file" @change="previewImage" accept="image/*" >  
    </div>  
    <div>  
      <p>Progress: {{uploadValue.toFixed()+"%"}}  
      <progress id="progress" :value="uploadValue" max="100" ></progress>  </p>  
    </div>  
    <div v-if="imageData!=null">  
        <img class="preview" :src="picture">  
        <br>  
      <button @click="onUpload">Upload</button>  
    </div>  
  </div>  
</template>  


<script>  
import firebase from 'firebase';  

export default {  
  name: 'Upload',  
  data(){  
  return{  
      imageData: null,  
      picture: null,  
      uploadValue: 0  
  }  
  },  
  methods:{  
    previewImage(event) {  
      this.uploadValue=0;  
      this.picture=null;  
      this.imageData = event.target.files[0];  
    },  

    onUpload(){  
      this.picture=null;  
      const storageRef=firebase.storage().ref(`${this.imageData.name}`).put(this.imageData);  
      storageRef.on(`state_changed`,snapshot=>{  
        this.uploadValue = (snapshot.bytesTransferred/snapshot.totalBytes)*100;  
      }, error=>{console.log(error.message)},  
      ()=>{this.uploadValue=100;  
        storageRef.snapshot.ref.getDownloadURL().then((url)=>{  
          this.picture =url;  
        });  
      }  
      );  
    }  

  }  
}  
</script>  

これで完成です。

まとめ

ここまでfirebaseで簡単にstorageに上げられて、firebase storage自体がGoogle Cloud Storageと同様に使えるというのは大変やりやすいですね。ファイルアップロードはAWSのS3でも試してみたことはありやりやすい感覚もありましたが、やはりGCPの方が使いやすい気がします。

参考

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

Tech memos

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう