FirebaseにJavascriptのプロジェクトを追加する

※Vue.jsを使用
#Firebase上にプロジェクト作成
####①Googleアカウントを取得しておく
####②FirebaseHP→使ってみる→プロジェクト追加
####③プロジェクト名を設定して次へ
####④hosting設定にチェックを入れる

####⑤Googleアナリティクスを設定した場合は必要項目にチェックを入れる

#アプリを追加する(SDKの追加→Firebase初期化)
####⑥追加するアプリの種類を選択(今回はウェブを選択)

####⑦SDKを追加してFirebaseを初期化する
使ってみるをクリックするとjavascriptアプリでの実装方法が説明されているので
モジュールバンドラを使用するタブを選択
※コンソールからFirebase SDK snippetをコピーするのでページだけ開いておいて次へ進む

####⑧CLIをインストール,デプロイ画面を飛ばしてコンソールへ進む
####⑨⑦で開いたページの手順を踏んでFirebaseを初期化する
まず、以下のコマンドを入力

$ npm init

$ npm install --save firebase

次にコンソールよりFirebase SDK snippetをコピー


main.js(ts)にFirebase SDK snippetをペーストして、

import firebase from 'frirebase';

を追記

main.ts

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


Vue.config.productionTip = false;

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

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

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

今回はanalyticを選択していない場合は記載無し
次に以下のコマンドを入力する

$ npm install -g firebase-tools

$ firebase init

$ firebasedeploy

####※Databeseを使用する場合はコンソールで設定を済ませておく

日本で使用する場合はリージョンはasia-northeast1(東京)か2(大阪)を選択
私はよく分からず3を選択しましたが、3はソウル拠点になります←

####デプロイに成功したらコンソール→Hostingからアプリページを見ることができます