今更ながらWebアプリを作ってFirebaseで公開してみた話

# はじめに
制作物をアウトプットするのは重要である．ということで，僕も挑戦してみる．
この記事は僕が現実逃避の暇つぶしで勉強がてら制作したWebアプリをFirebaseで公開してみたという内容です．


# 制作したWebアプリ：Vue-Lottery
メンバーリストから指定した人数をランダムに抽選するアプリです．
Vue.js + TypeScriptで制作しました．  

選ばれやすさの重み付け機能がついてます．
複数人を抽選する機能でグループ分けもできます．

<img width="882" alt="スクリーンショット 2019-07-03 18.58.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126863/d861aa7c-8b95-7929-4186-bcf7bb21ce8f.png">


# 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認証の設定
[この記事](https://qiita.com/567000/items/65f55eda8d7c6df09138)を大いに参考にさせていただきました．
具体的な編集内容はそちらを御覧ください．

* `firebase/firebase.json`の編集
* `firebase/functions/index.js`の編集
* `firebase/public`以下の不要ファイルの削除
* `firebase/functions/static/`以下にビルドしたファイルをコピー
* `express`, `basic-auth-connect`のインストール  
を行います．

最後にデプロイします

``` bash
$ 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](https://github.com/iidango/vue_lottery)に置いてあるので参考にしたい方は御覧ください．(整理していないため不要なコードが含まれています)
メンバーリストはyamlファイルから読み込んでいますが，Firebaseのデータベースから読み込むように修正したいです．が，それはまたの機会に

下のリンクはサンプルです．
`user: test`, `pass: password`で認証できます．
https://vue-lottery-sample.firebaseapp.com/