Vue.jsで使用するfirebaseの設定をgitの管理対象から外す

はじめに

Vue.jsでfirebaseを使用したアプリケーションを作った時に、firebaseの設定をmain.jsにベタ書きしていました。このままgitにあげるのはよろしくないので、firebaseの設定を別ファイルに外出しします。

変更前

変更前のソースはこんな感じ。

main.js

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

Vue.config.productionTip = false

// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

変更後

firebaseの設定はsrc/firebase-config.jsへ切り出します。

firebase-config.js

/* eslint no-unused-vars: 0 */

// Your web app's Firebase configuration
export const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import { firebaseConfig } from './firebase-config.js';
import firebase from 'firebase/app'

Vue.config.productionTip = false

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

さいごに

firebase-config.jsをgitの対象から外すのをお忘れなきよう。