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-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