firebaseの導入方法

firebaseの導入方法

事前準備：firebaseのプロジェクトを作成する

firebaseのサイトURL：
https://firebase.google.com/?hl=ja

以下の手順でプロジェクトを作成し、ウェブアプリにfirebaseを追加する

（１）プロジェクトの作成

（２）ウェブアプリにfirebaseを追加

すると以下のような内容が出てくる。これをあとで使用するためコピーしておく。

const firebaseConfig = {
  apiKey: '...',
  authDomain: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
  appId: '...',
};

firebaseを導入する

ターミナルで、firebaseを使用したいディレクトリに移動

cd プロジェクト名

npm intallをする

npm install firebase@8.7.1

main.jsでimportする

import Vue from 'vue';

//firebaseの基礎部分
import firebase from 'firebase/app';

import App from './App.vue';
import './app.css';

//firebaseから取り入れたいサービス
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

Vue.config.productionTip = false;

//先ほどの「ウェブアプリにfirebaseを追加」で発行したapikeyなどをペーストする
const firebaseConfig = {
  apiKey: '...',
  authDomain: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
  appId: '...',
};

firebase.initializeApp(firebaseConfig);

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

以上でfirebaseの導入方法は完成。
firebaseサービスのauthentication, firestore, storageについての扱い方については違う記事で紹介する。

まとめ

①firebaseのサイトからAPIキーなどを取得する。
②npmインストールして、main.jsにimportして、そこにAPIキーなどを記載すればOK

さあ早速firebaseを使ってみよう！