JavaScript

firebaseとvue-cliを利用した環境を構築する

More than 1 year has passed since last update.

前提

  • Macで環境構築
  • npmが入っていること
  • FirebaseのHosting機能を利用する

vue-cliの環境を構築する

% npm install -g vue-cli
% vue init webpack household_account
% cd household_account
% npm install
% npm run dev

firebaseの利用準備をする

下記URLからFirebaseコンソールに遷移してfirebaseのアカウントを作成する。

https://firebase.google.com/?hl=ja

  1. Firebaseコンソール「新規プロジェクト作成」から新規プロジェクトを追加する。
  2. 「ウェブアプリに Firebase を追加」を選択し、表示されたscriptタグなどをコピーする(project_rootのsrc/firebase.jsなどに保存しておく)。
  3. 「Authentication」から認証方法を選択する(Google認証、ID・Password認証など選択できる)。
  4. 「Hosting」を選択して、画面の手順に従ってFirebase Command Line Interfaceをインストールする(npm install -g firebase-toolsを実行する)。
  5. firebase loginでログインする(ブラウザでGoogle認証ができる環境が必要。もしサーバ内で実行したい場合には後述するトークンを取得することで対応できるが、最低1回はブラウザで認証させる必要がある)
  6. firebase initを実行する。Hosting先程作成したProject名を選択し、後は適宜選択する。
  7. firebase use --addを実行する。先程作成したProject名を選択し、aliasを設定する(適当に、staging, develop, production)。 作成したaliasは、{project_root}/.firebasercで確認できる。

Firebase Command Line Interfaceの使い方(参考)

firebaseにログイン
% firebase login

プロジェクトを開始:
% firebase init

アプリの起動
% firebase serve

ウェブサイトをデプロイ
% firebase deploy

vuefireを利用する

package.jsonのdependenciesに以下のモジュールを追加する。

  • firebase
  • vuefire

デプロイ

% npm run build
% firebase deploy

ブラウザでGoogle認証できない環境でデプロイをする場合

トークンの取得

前述のように、firebase loginなどのコマンドを実行するためには、ブラウザ側でGoogle認証を行う必要がある。
サーバ側でデプロイが必要な場合には、ブラウザでの認証ができないので、トークン認証させるためのコマンドを利用すると良い。

但し、認証用のトークンは、ブラウザ側でGoogle認証させないと取得できない。
従って、一旦は、どこかの環境(以下、「ローカル」という)でブラウザでGoogle認証させて認証用のトークンを取得する必要がある。

local> firebase login:ci

  省略(トークンが取得できる)

取得したトークンは以下のように利用できる。

> firebase deploy --token "トークン"

参考にさせて頂いたサイト