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