1. はじめに

2019年3月9日にUEQareer様主催にて開催されたFirebase勉強会でのVue.js + Firebase Hosting を用いたWebサイト作成について、自分への備忘録としてまとめてみました。ご参考になれば幸いです。

2. 学べる内容

Vue.js
vue-cliコマンド操作
Firebase
メール認証
Googleアカウント認証
Realtime Database
firebase-toolsコマンド操作
Firebase Hosting

3. 学習サイト

4. コマンドメモ

Vue.js + FirebaseでToDoアプリを構築の参考コマンドメモです。
Node.jsのインストール
yarnコマンドのインストール

# vue-cliのインストール
$ sudo yarn global add @vue/cli

# vueコマンドのバージョン確認
$ vue --version

# vue GUIの実行
$ vue ui

# vue GUIをブラウザで表示
localhost:8000/dashbord
localhost:8080/project/create

# プロジェクトマネージャに移動して作成をクリックする
# vue-todo
# デフォルトプリセット
# （5分くらい時間がかかる）

# http://localhost:8080/
# http://localhost:8080/signin
# http://localhost:8080/signup

# firebase-toolsのインストール
$ sudo yarn global add firebase-tools

# ローカル環境の作業中vueプロジェクトフォルダに移動
$ cd firebase-todo/

# Firebaseログイン
$ firebase login

# Firebaseプロジェクトの設定
$ firebase init

# firebase initで当該Firebaseプロジェクトが表示されなかった場合
$ firebase init --project <FirebaseプロジェクトID>

# デプロイ
$ firebase deploy

# デプロイ後の完成したWebサイトへのアクセス
https://XXX-XXXX-99999.firebaseapp.com

5. おわりに

Vue.js学習の参考になれば幸いです。
ハンズオン開催してくださいましたUEQareer様、感謝いたします。

2019/03/09 TAKAHIRO NISHIZONO