10
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

VueでFirebaseを使用する(DatabaseとHosting)

はじめに

Vue.jsのプロジェクトでfirebaseを使用したので、その方法をまとめたいと思います。
firebaseのデータベースとホスティングを使用しました。
環境はvue-cliを使用しています。
Vue.jsの環境構築

firebaseのプロジェクト作成

まず、firebaseのプロジェクトを作成します。
firebaseのページに行きGoogleアカウントでログインします。その後、コンソールへ移動すると以下のページになります。
プロジェクトを追加を選択します。(まだプロジェクトがない場合は、プロジェクトを作成のようなボタンがあります)
スクリーンショット 2020-01-04 18.53.25.png
任意の名前を設定します。
スクリーンショット 2020-01-04 18.53.39.png
任意でGoogleアナリティクスを有効にします。
スクリーンショット 2020-01-04 18.54.14.png
アカウントはDefault Account for Firebaseを選択します。
スクリーンショット 2020-01-05 21.38.37.png
以上でプロジェクトの作成は完了です。

firebaseにアプリの追加

次に、作成したプロジェクトにアプリを追加します。
プロジェクトのページから</>というマークのボタンを押下します。
スクリーンショット 2020-01-04 18.56.19.png
任意のアプリ名を入力します。
スクリーンショット 2020-01-04 18.56.28.png
以下のスクリプトをVue.jsのソースファイルに記述することでfirebaseを導入します。(後ほど使用します。)
ここは閉じても、プロジェクトの設定から同様の内容を確認できます。
スクリーンショット 2020-01-04 18.57.03.png

Vueにfirebaseの追加

コンソールを起動し、Vue.jsで作成したプロジェクトのあるディレクトリで以下のコマンドを実行します。

npm install firebase

コマンド実行後、main.jsを開き、以下の内容を追記します。

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'と、先ほどのスクリプトの以下の部分です。
スクリーンショット 2020-01-04 18.57.03のコピー.png
以上で、firebaseを使用する準備は完了です。

Databaseの使用

firebaseのDatabaseを使用する準備をします。
プロジェクトのページの左側にあるDatabaseを押下後、データベースの作成を押下します。
スクリーンショット 2020-01-04 20.10.05.png
本番環境かテストモードを選択します。
スクリーンショット 2020-01-04 20.10.14.png
ロケーションを選択します。
東京を表すasia-northeast1を選択します。(2は大阪らしいです)
スクリーンショット 2020-01-04 20.10.28.png
これで準備は完了です。
実際にソースで記述する方法は割愛いたします。

Hostingの使用

firebaseでホスティングを行います。
※ホスティングだけであれば、Vueにfirebaseの追加の内容はしなくても大丈夫です。

プロジェクトのページの左側にあるHostingを押下後、始めるを押下します。
以降の手順は、基本的には手順通りに実行すれば問題ありません。
スクリーンショット 2020-01-05 15.47.37.png

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にアクセスすると、公開できていることが確認できます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
10
Help us understand the problem. What are the problem?