Vue.js アプリを Firebase にデプロイしてみる

Vue.js Firebase

Firebase を使ってみようと思います。ひとまず、以下の続編としてアプリを Firebase にデプロイしてみようかと。

Vue.js でウィジェットっぽいもの (仮) その2 - kntmr-blog

ソースコードはこちら。

github.com

以下、備忘録。

Firebase Console

Firebase Console でプロジェクトを作成する。「国/地域」には日本を選択する。

Project Overview から「ウェブアプリに Firebase を追加」をクリックしてコードスニペットをコピーする。

Firebase CLI

Firebase CLI をインストールする。

> npm -g install firebase-tools

ログインする。

> firebase logout
No need to logout, not logged in
> firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes # ブラウザが起動するのでログインする

Firebase

依存モジュールに Firebase を追加する。

> npm install firebase --save

src/main.js を編集。

import firebase from 'firebase'

// 上でコピーしたコードスニペットを記述する。
var config = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "APPNAME.firebaseapp.com",
  databaseURL: "https://APPNAME.firebaseio.com",
  projectId: "APPNAME",
  storageBucket: "APPNAME.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx"
};
firebase.initializeApp(config);

ビルド & デプロイ

ビルドする。

> npm run build

Firebase プロジェクトとして初期化する。

> firebase init
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
? Select a default Firebase project for this directory: APPNAME # 既存のプロジェクトを選択
? What do you want to use as your public directory? dist # npm run build で dist に出力されるため、dist を指定する
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No # index.html は上書きしない

Firebase にデプロイする。

> firebase deploy
# Hosting URL: https://APPNAME.firebaseapp.com のURLにアクセス

これからやりたいこと

PWA の学習を兼ねて、Firebase にデプロイしたアプリを PWA 化してみる予定。