はじめに
制作物をアウトプットするのは重要である．ということで，僕も挑戦してみる．
この記事は僕が現実逃避の暇つぶしで勉強がてら制作したWebアプリをFirebaseで公開してみたという内容です．
制作したWebアプリ：Vue-Lottery
メンバーリストから指定した人数をランダムに抽選するアプリです．
Vue.js + TypeScriptで制作しました．
選ばれやすさの重み付け機能がついてます．
複数人を抽選する機能でグループ分けもできます．
Firebaseでホスティング
アカウント作る部分は割愛して，プロジェクトのセットアップから始めていきます．
Firebaseのセットアップ
Firebase用のディレクトリを作ってセットアップしていきます．
途中，設定をいろいろ聞かれるので上下キーとスペース・エンターでよしなに選びます．
今回はHostingとベーシック認証に使うFunctionの項目をチェックしておきます．
その後もいろいろ聞かれますが，基本的にはエンター連打で大丈夫です．
$ mkdir firebase
$ cd firebase
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
vue_lottery/firebase
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choice
s.
◯ Database: Deploy Firebase Realtime Database Rules
◯ Firestore: Deploy rules and create indexes for Firestore
❯◉ Functions: Configure and deploy Cloud Functions
◉ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
...
.略.
...
Basic認証の設定
この記事を大いに参考にさせていただきました．
具体的な編集内容はそちらを御覧ください．
-
firebase/firebase.jsonの編集 -
firebase/functions/index.jsの編集 -
firebase/public以下の不要ファイルの削除 -
firebase/functions/static/以下にビルドしたファイルをコピー -
express,basic-auth-connectのインストール
を行います．
最後にデプロイします
$ firebase deploy
=== Deploying to 'vue-lottery-sample'...
i deploying functions, hosting
i functions: ensuring necessary APIs are enabled...
✔ functions: all necessary APIs are enabled
i functions: preparing functions directory for uploading...
i hosting[vue-lottery-sample]: beginning deploy...
i hosting[vue-lottery-sample]: found 0 files in public
✔ hosting[vue-lottery-sample]: file upload complete
i hosting[vue-lottery-sample]: finalizing version...
✔ hosting[vue-lottery-sample]: version finalized
i hosting[vue-lottery-sample]: releasing new version...
✔ hosting[vue-lottery-sample]: release complete
✔ Deploy complete!
Please note that it can take up to 30 seconds for your updated functions to propagate.
Project Console: https://console.firebase.google.com/project/vue-lottery-sample/overview
Hosting URL: https://vue-lottery-sample.firebaseapp.com
Hosting URLにアクセスし，ログイン情報を入力するとアプリに飛べます．
まとめ
今更ながらVue.jsとTypeScriptを使ってWebアプリを制作しFirebaseで公開してみた話でした．
作成したコードはGitHubに置いてあるので参考にしたい方は御覧ください．(整理していないため不要なコードが含まれています)
メンバーリストはyamlファイルから読み込んでいますが，Firebaseのデータベースから読み込むように修正したいです．が，それはまたの機会に
下のリンクはサンプルです．
user: test, pass: passwordで認証できます．
https://vue-lottery-sample.firebaseapp.com/