はじめに
Vue.jsのプロジェクトでfirebaseを使用したので、その方法をまとめたいと思います。
firebaseのデータベースとホスティングを使用しました。
環境はvue-cliを使用しています。
Vue.jsの環境構築
firebaseのプロジェクト作成
まず、firebaseのプロジェクトを作成します。
firebaseのページに行きGoogleアカウントでログインします。その後、コンソールへ移動すると以下のページになります。
プロジェクトを追加を選択します。（まだプロジェクトがない場合は、プロジェクトを作成のようなボタンがあります）
任意の名前を設定します。
任意でGoogleアナリティクスを有効にします。
アカウントはDefault Account for Firebaseを選択します。
以上でプロジェクトの作成は完了です。
firebaseにアプリの追加
次に、作成したプロジェクトにアプリを追加します。
プロジェクトのページから</>というマークのボタンを押下します。
任意のアプリ名を入力します。
以下のスクリプトをVue.jsのソースファイルに記述することでfirebaseを導入します。（後ほど使用します。）
ここは閉じても、プロジェクトの設定から同様の内容を確認できます。
Vueにfirebaseの追加
コンソールを起動し、Vue.jsで作成したプロジェクトのあるディレクトリで以下のコマンドを実行します。
npm install 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' // ※追加
Vue.config.productionTip = false
// ※追加 -ここから-
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "〜",
authDomain: "〜",
databaseURL: "〜",
projectId: "〜",
storageBucket: "〜",
messagingSenderId: "〜",
appId: "〜",
measurementId: "〜",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
// ※追加 -ここまで-
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
追加する内容は、import firebase from 'firebase'と、先ほどのスクリプトの以下の部分です。
以上で、firebaseを使用する準備は完了です。
Databaseの使用
firebaseのDatabaseを使用する準備をします。
プロジェクトのページの左側にあるDatabaseを押下後、データベースの作成を押下します。
本番環境かテストモードを選択します。
ロケーションを選択します。
東京を表すasia-northeast1を選択します。(2は大阪らしいです)
これで準備は完了です。
実際にソースで記述する方法は割愛いたします。
Hostingの使用
firebaseでホスティングを行います。
※ホスティングだけであれば、Vueにfirebaseの追加の内容はしなくても大丈夫です。
プロジェクトのページの左側にあるHostingを押下後、始めるを押下します。
以降の手順は、基本的には手順通りに実行すれば問題ありません。
1.Firebase CLI のインストール
コンソールで以下のコマンドを実行します。
npm install -g firebase-tools
2.プロジェクトの初期化
まず、以下のコマンドでfirebaseにログインします。
firebase login
ログイン後、以下のコマンドで、初期化を行います。
firebase init
初期化時にいくつか質問があるので、以下のように入力します。
使用するサービスが聞かれますので、↓キーでHostingにカーソルを移動後、スペースキーで選択します。
その後、エンターキーで決定します。
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
◯ Emulators: Set up local emulators for Firebase features
次に、初期化するプロジェクトを聞かれます。
すでに作成したプロジェクトを初期化するため、Use an existing projectを選択します。
すると、firebase上のプロジェクトの一覧が出ますので、プロジェクトを選択してエンターキーを押下します。
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
次に、公開ディレクトリを聞かれます。
vueでは、デフォルトでビルドするとdistというディレクトリが公開ディレクトリになるため、特に設定を変えていない場合は、distと入力して、エンターキーを押下します。
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? dist
最後に、SPAかどうか聞かれるので、yを入力して、エンターキーを押下します。
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
3.プロジェクトのビルド
次に、Vue.jsのプロジェクトをビルドします。
以下のコマンドを実行するだけです。
npm run build
4.Firebase Hosting へのデプロイ
最後に、実際にfirebaseにホスティングします。
以下のコマンドを実行します。
firebase deploy
実行結果の最後に、Hosting URLがあるので、そのURLにアクセスすると、公開できていることが確認できます。