【vue×firebase】Vue2.0で.envの利用法 ~APIkeyを隠そう~

8642 ワード
Firebase Vue.js .env Vue.js テキストリンク

環境

vue 2.0系
firebase

はじめに

こんにちは！個人開発でいろいろ開発しているものです！
twitter
→https://twitter.com/js_manabitai

普段はvue2.0系とfirebaseを使用して開発しています！

コードをgithubなどにあげる際、firebaseのapi情報を隠さなくてはなりません。

聞いた話によると、github上にはAPI情報を自動的に取得するクローラーが走っているらしく、APIを公開してしまうと、firebaseを不正利用されて高額請求される恐れがあります。

そのため、github上にはAPI情報をあげては行けません！

そのために利用するのが.envというファイルです。

こちらの使用方法ですが、vue2.0での情報が少なく、まとまっていないものや不親切な記事が多かったため、記述しました。

まずはターミナルでコマンドを叩きます。

npm install dotenv --save

--saveをつけることで、package.jsonに情報が記載されます。
試しに追加されているか見てみましょう。

しっかり追加されていますね。
それではルートのmain.jsにて、dotenvを利用するコードを書きましょう。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
import firebase from 'firebase'
import dotenv from 'dotenv'

Vue.config.productionTip = false
dotenv.config()

必要なのはdotenvのimportとdotenv.config()の部分です。

これが完了したら、ディレクトリのルート直下に.envというファイルを作成してください

そして、忘れないうちに.ignoreに.envを追加しましょう

# local env files
.env
.env.local
.env.*.local

ここまできたら、.envにAPI情報を入力してください

VUE_APP_APIKEY=XXXXXXXXXXXXXXXXXXXXX,
VUE_APP_AUTHDOMAIN=tXXXXXXXXXX.com,
VUE_APP_PROJECTID=XXXXXXXXX,
VUE_APP_STORAGEBUCKET=tXXXXXXXXXXXXXXXXXXXcom,
VUE_APP_MESSAGINGSENDERID=XXXXXXXXXXXXXXXXXXX,
VUE_APP_APPID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,
VUE_APP_MEASUREMENTID=XXXXXXXXXXXXXXXXXXX

vue3.0ではVUE_APP_**としないと反応しないらしいです。
ここでも念のためVUE_APPから始めています。

登録できたら、一度app.vueのcreated内などでコンソールに表示されるか確認してみましょう。

export default {
  created() {
      console.log("env",process.env.VUE_APP_APIKEY);
  },
}

ちゃんと中身が表示されれば、main.jsの表示を変更したい部分を変数に置き換えましょう。

  var firebaseConfig = {
    apiKey: process.env.VUE_APP_APIKEY,
    authDomain: process.env.VUE_APP_AUTHDOMAIN,
    projectId: process.env.VUE_APP_PROJECTID,
    storageBucket: process.env.VUE_APP_STORAGEBUCKET,
    messagingSenderId: process.env.VUE_APP_MESSAGINGSENDERID,
    appId: process.env.VUE_APP_APPID,
    measurementId: process.env.VUE_APP_MEASUREMENTID
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

きちんとデータが表示されれば成功です。
※この際に、正しくデータが表示されないなら、サーバーを再起動してください。

npm run serve

私は再起動しなかったため、何時間もエラーに悩まされました。
.envにAPI情報を載せる手順って結構めんどくさいですね、、、

効率化できる方法があれば教えてください。

参考
https://qiita.com/h-reader/items/9e2f8dbc3b9eaec4f5ee
https://www.it-mure.jp.net/ja/node.js/vuejs%E3%81%A7dotenv%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/838436806/