docker でfirebaseを試したメモ

[Firebaseの始め方][*1]を参考に試そうとしたところ、
色々ハマったので、メモを残しておく。

## 登録

[Firebaseの始め方][*1]のときとはプロジェクトを追加の位置が、少し異なっていた。
![firebase-1.png](https://qiita-image-store.s3.amazonaws.com/0/99876/3ef301e0-64e9-1fd8-b951-fb189d27b3ed.png)

![firebase-2.png](https://qiita-image-store.s3.amazonaws.com/0/99876/e118b08b-1bd7-7b86-eca5-063b342b491b.png)

## ログイン

ローカルを汚すのが嫌なので仮想環境でubuntuをたてて、その上にDockerを使っている。
おかげで結構ハマった。

### 動作環境

* windows10
* vagrant2.0.0
* virtualbox5.1.26
* ubuntu-16.04
* Docker version 17.09.0-ce, build afdb6d4
* docker-compose version 1.16.1, build 6d1ac21

仮想環境は192.168.50.10のIPアドレスで起動。

### 仮想環境

```ruby:Vagrantfile
Vagrant.configure(2) do |config|
  # 使用するディストリビューションのボックスの設定
  config.vm.box = "bento/ubuntu-16.04"

  # ネットワーク設定。
  # 繋がらないときは/etc/network/interfaces を確認。enp0s8に設定してやる。
  # auto enp0s8
  # iface enp0s8 inet static
  #       address 192.168.50.10
  #       netmask 255.255.255.0
  # sudo ifconfig enp0s8 192.168.50.10
  config.vm.network "private_network", ip: "192.168.50.10"

  # Google AOuth
  config.vm.network "forwarded_port", guest: 9005, host: 9005
  
  # 使用するメモリ容量を変更。
  # デフォルトだと512で少ないためdockerのbuildが失敗しやすい
  config.vm.provider "virtualbox" do |vm|
    # メモリを設定
    vm.memory = 4096
    # Vagrant1.8から利用出来るLinked Cloneをオンにする。
    vm.linked_clone = true
    # vm.cpus = 2
    vm.customize [ "modifyvm", :id, "--cpus", "2", "--ioapic", "on"]
    # ↓起動が止まるときの確認用
    # vm.gui = true
  end
end
```
### dockerfile

nodeの新しいバージョン(9.0.0、8.8.1)ではエラーが大量にでて`npm i -g firebase-tools`に失敗した。
6.11.5のコンテナを使用。

```docker:docker/firebase/Dockerfile
FROM node:6.11.5

# コンテナ上の作業ディレクトリ作成
WORKDIR /app

# firebase
RUN npm install -g firebase-tools
```

```yaml:docker/docker-compose.yml
version: '3'
services:
  # firebase cli
  firebase:
    build: ./firebase
    volumes:
      - ../app:/app
```

```bash:bin/bash.sh
#!/bin/bash

# このシェルスクリプトのディレクトリの絶対パスを取得。
bin_dir=$(cd $(dirname $0) && pwd)
name=${1:-firebase}

# docker-composeの起動。 コンテナ内に入る. OAuthのために 9005ポートを開ける。
cd $bin_dir/../docker && docker-compose run -p 9005:9005 $name /bin/bash
```

`bin/bash.sh`にコンテナにログインするスクリプトを書いて、firebaseコンテナにログイン。
`firebase login`コマンドを叩いて、Yを選択。

![firebase-5.png](https://qiita-image-store.s3.amazonaws.com/0/99876/74f1321a-3ecf-0713-6652-25907fe17c29.png)

この後、表示されるURLをブラウザに打ち込む。

![firebase-3.png](https://qiita-image-store.s3.amazonaws.com/0/99876/920c561f-fc69-c1c1-0bbd-41cc42759e64.png)

以下のように ERR_CONNECTION_REFUSED となった場合、VagrantとDocker両方の9005ポートが設定されているか確認する。

![firebase-4.png](https://qiita-image-store.s3.amazonaws.com/0/99876/32435e76-ccbf-f7d2-e08d-5b3c9be5d249.png)

以下のエラーが出た後、もう一度試してみたところ解決した。タイプミスをしていた可能性？

![firebase-6.png](https://qiita-image-store.s3.amazonaws.com/0/99876/e4b6a50f-bd43-cee8-3aee-f121e518d90f.png)

成功画面。
![firebase-7.png](https://qiita-image-store.s3.amazonaws.com/0/99876/b636a1b6-20b5-6405-9fee-12a16fc49c01.png)

コマンドプロンプトには何かエラーがでているけど、とりあえず気にせずに以下のコマンドを入力。Hostingを選択。カーソルを合わせてスペースキーで選択できる。選択すると緑色になる。その状態でEnter

```
firebase init
```
![firebase-8.png](https://qiita-image-store.s3.amazonaws.com/0/99876/523bf8f5-aed6-dfba-4c6a-bc1562725469.png)

適当なファイルをいれて、以下のコマンドを入れるとデプロイできた。

```
firebase deploy
```

## 非対話型の環境を設定する。

`bin/bash.sh`でログイン後、以下のコマンドを入力。ブラウザで先程と同様に認証を行うとトークンが生成される。

```
firebase login:ci
```

トークンの値を以下のファイルに記入する。ymlファイルにenvfileを使うように設定することで環境変数に設定される。

```bash:docker/.env
FIREBASE_TOKEN=生成されたトークン
```
たとえば、以下のように使用する。

```
firebase deploy --token "$FIREBASE_TOKEN"
```


## ローカルサーバを動かしてみる。

```yaml:docker/docker-compose.yml
version: '3'
services:
  # firebase cli
  firebase:
    build: ./firebase
    env_file: .env
    volumes:
      - ../app/public:/app/public
      - ../app/.firebaserc:/app/.firebaserc
      - ../app/firebase.json:/app/firebase.json
      - ../dist/logs/firebase-debug.log:/app/firebase-debug.log
    ports:
      - 5000:5000
    command: [firebase, serve, -p, "5000", -o, "0.0.0.0"]
```

```bash:bin/up.sh
#!/bin/bash

bin_dir=$(cd $(dirname $0) && pwd)
cd $bin_dir/../docker && docker-compose up
```

192.168.50.10:5000に接続するとローカルサーバを確認できる。



## 参考

[Firebaseの始め方][*1]
[GCPでServerless Architectureを実現する第一歩としてFirebase Hosting (HTTPS)を使ってみよう][*2]
[Firebaseをwebで使う(Hosting, Authentication, Realtime Database, Storage)][*3]
[Firebaseで最初に目を通しておくべき記事まとめ][*4]
[Firebase HostingとCIの連携][*5]

[*1]:https://qiita.com/kohashi/items/43ea22f61ade45972881
[*2]:https://qiita.com/tnir/items/0d8ee7f26e90f91bdee6
[*3]:https://www.sambaiz.net/article/94/
[*4]:https://qiita.com/hinom77/items/d138768609894ce8a3b8#_reference-ad96928e6ead5bc38ae3
[*5]:https://qiita.com/gupuru/items/5f1b0f6256d3f6ea17ab