GoogleのアカウントでUdonariumを設置してみたメモ

## 概要

ユドナリウムをFirebaseで動かすまでのメモ。
[前回](https://qiita.com/hibohiboo/items/705a2af65e87e31ac6fd)や[前々回](https://qiita.com/hibohiboo/items/17ae851f36411e8acdd5)ではソースから作っていたが、今回は公式のzipを利用してみる。
firebase cliを自分はdockerでやっているが、直接インストールでも可能なので、dockerの設定部分は折りたたんでいる。

[この時点のソース](https://github.com/hibohiboo/rooper-firebase/tree/cbf67f715a886cc4550591f4b2cb5a0c1d5fa2a3)


## 環境

* Windows 10 Home
* Vagrant 2.2.6
* virtualbox 6.0.14
* Ubuntu 18.04 LTS (Bionic Beaver)
* Docker version 19.03.2, build 6a30dfc
* docker-compose version 1.24.1, build 4667896b
* firebase-tools@7.6.2


## Skywayの登録

[ユドナリウムを自鯖に導入する方法](https://note.mu/camomilletrpg/n/nb6cb482927f4)が詳しいのでそちらを参照。

## firebaseの利用

google アカウントでのログインが必要になります。

### コンソールへのログイン

以下のURLにアクセス。
https://firebase.google.com/

右上のコンソールにアクセスをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/8148d784-70c5-d5d3-6ef2-3dd11465918e.png)


### プロジェクトの追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/4c3562c5-c8c4-ed0a-fed4-2e06d35fb1e2.png)

[こちら](https://employment.en-japan.com/engineerhub/entry/2019/06/07/103000#Firebase%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97)も参照。

### Firebase Cliの準備

[公式ドキュメント](https://firebase.google.com/docs/hosting/?authuser=0#implementation_path)を確認するとFirebase Cliが必要とある。
直接Windwows10にインストールするのが面倒だったので、virtual boxのubuntu上にたてたdockerを利用した。

virtual boxインストールしていない人は、普通に以下が早いと思う。

```console 
npm install -g firebase-tools 
```

環境によるエラーなどが起きるかもしれないが私はこちらでやってないので分からない。。

<details><summary>dockerでのインストールについてはこちらをクリック</summary><div>

#### docker

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

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

RUN yarn global add firebase-tools
```

```yml:firebase/docker/docker-compose.yml
version: '3'
services:
  # デプロイツール
  firebase:
    build: ./firebase
    env_file: .env
    volumes:
      - ../../app/public:/app/public
```

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

# このシェルスクリプトのディレクトリの絶対パスを取得。
bin_dir=$(cd $(dirname $0) && pwd)
parent_dir=$(cd $bin_dir/.. && pwd)
docker_dir=$(cd $parent_dir/docker && pwd)
cd $docker_dir && docker-compose build
```

コンテナの作成

```console
cd /vagrant/project/firebase/
./bin/container_build.sh
```

firebase cliのインストールされたコンテナにログイン

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

# このシェルスクリプトのディレクトリの絶対パスを取得。
bin_dir=$(cd $(dirname $0) && pwd)
parent_dir=$(cd $bin_dir/.. && pwd)
docker_dir=$(cd $parent_dir/docker && pwd)
container_name=firebase
# docker-composeの起動。 OAuth用に9005. 
cd $docker_dir && docker-compose run -p 9005:9005 $container_name /bin/bash
```

ログイン

```console
./bin/bash.sh
```

</div></details>

### プロジェクトの初期化

#### ログイン

まずはfirebaseにログインする必要がある。

```console
firebase login
```

グーグルにエラーリポートを送るか訊かれるので、好きなほうを選択。
認証用のURLが表示されるので、それをクリックして認証を行う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/f91e48f3-626f-3934-4d27-d53541829b3d.png)

ログイン画面がでるので、Googleアカウントを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/53856634-aa4a-0d06-912a-b5e0005f10b8.png)

許可する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/32a812b9-58fd-7fd8-8915-bd41c25a5a3e.png)

#### プロジェクトの初期化

```
firebase init
```

以下のような画面が出る。上下キーで移動して、スペースキーで選択できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/837d5c16-6914-fad2-bc97-a816c04d866b.png)

今回はhostingのみ使いたいのでそちらをチェック。Enterを押して次へ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/b90ec5d7-74e6-bd49-15e5-0c27a72251df.png)

今回はプロジェクトを作っているはず。Enterを押して次へ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/511ca944-479b-14c8-1f45-de7e1bcbff8d.png)

初めてプロジェクトを作る人は一つだけ選択できるはず。
複数作っている人は選ぶ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/e1c3d019-35ac-eb60-561f-43287976c15f.png)

公開先はpublicでよいのでそのまま。
single-pageの設定は、ユドナリウムはsingel-pageなので、yにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/4bc8ba7e-368f-3cb9-04eb-d05d96dcf5be.png)

初期設定の終わったfirebase.jsonが作成される。
コンテナ上でやっている場合は、`cp firebase.json public/`でローカルにファイルをもってきて確認する。

### デプロイ準備

#### ダウンロード
[公式サイト](https://github.com/TK11235/udonarium)からudonariumをダウンロードする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/98b187f1-b57f-385e-4660-b220718b41e9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/7a1f8f04-a35d-b4a4-c07d-19a00545cdf0.png)

#### ファイルの配置

ダウンロードしたファイルを解凍して、app/publicフォルダ以下に中身をコピーする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/39a1f5b2-039a-1378-743a-ffb406bd1f58.png)

コピー後、assetsフォルダのconfig.ymlの内容を修正する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/eecb4cc2-e4fb-8563-5a4e-6020dcdc246a.png)

```yml:app/public.assets/config.yml
webrtc:
  key: aaaaaaaa-bbbb-ccccc-dddd-eeeeeeeeeeee  #Your SkyWay API key
  config: #未使用
    iceServers: #未使用
      - url: stun:stun.skyway.io:3478
      - url: turn:homeo@turn.bistri.com:80
        credential: homeo
app: #未使用
dice: #未使用
```

#### 設定の修正

この`aaaaaaaa-bbbb-ccccc-dddd-eeeeeeeeeeee`の部分を、Skywayのkeyに置き換える。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/2a695a17-5116-84c5-dae7-88daf08f30dd.png)

### デプロイ

```console 
firebase deploy
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/a52aa4ff-5c93-d07c-4f71-373ac328572e.png)


urlが表示されるので、アクセスする。

https://rooper-401ef.firebaseapp.com/


この時点で、画像などは表示される。
ただし、Skywayにはまだ接続できない。

### Skywayにドメイン登録

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/494951db-167e-007f-6256-2e566d151377.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/1faf8c57-4bdb-6fab-440b-4e2eec87d970.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/fdcd2614-8f4d-e9f9-baef-ab76e6cef930.png)

https://rooper-401ef.firebaseapp.com/

もう一度アクセスするか、更新するかを行う。
さらに、別のブラウザかタブかウィンドウで同じページを開いて、接続テストができれば、公開成功

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/b6ce5c00-0872-953c-1856-177a4942e828.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/928307d0-a7b0-3ecd-69a3-0cfddd0b9336.png)


<details><summary>dockerでのデプロイをやりやすくする追加設定についてはここをクリック</summary><div>

### 追加設定

#### ログイントークンの発行

以下のコマンドを入力

```console 
firebase login:ci
```

最初と同じように、ログインのURLが発行されるので、クリックして認証。
APIトークンが表示されるので、それを保存しておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/331ffd99-798f-28c0-3522-fc294da19df6.png)

.envファイルに環境変数として登録する。

```conf:firebase/docker/.env
FIREBASE_TOKEN=さっきコピーしたトークン
```

#### firebase設定の配置。

先ほどapp/publicにコピーしたfirebase.jsonをappフォルダ直下に配置

```json:app/firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

docker-composeに認識させる。

```diff:firebase/docker/docker-compose.yml
version: "3"
services:
  firebase:
    build: ./firebase
    env_file: .env
    volumes:
      - ../../app/public:/app/public
+      - ../../app/firebase.json:/app/firebase.json
```

#### 実行ファイルの準備

プロジェクトのトークンを使うようにする。

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

bin_dir=$(cd $(dirname $0) && pwd)
parent_dir=$(cd $bin_dir/.. && pwd)
docker_dir=$(cd $parent_dir/docker && pwd)
container_name=firebase
project_name=rooper-401ef

cd $docker_dir && docker-compose run $container_name firebase deploy --token "$FIREBASE_TOKEN" --only hosting --project $project_name

```

### 実行

以下のコマンドで、エラーが起きなければデプロイされる。

```console
./bin/deploy.sh
```

#### エラー。。。

firebase.jsonを作った後、dockerコンテナを立ち上げようとすると以下のエラーがでるようになってしまった。

```
Error response from daemon: OCI runtime create failed: container_linux.go:345: starting container process caused "process_linux.go:430: container init caused \"rootfs_linux.go:58: mounting \\\"/vagrant/project/rooper-firebase/app/firebase.json\\\" to rootfs \\\"/var/lib/docker/overlay2/894e4bcd20ca4592502724ffe880796ab9cf1adf506e047a514837eb04e48be1/merged\\\" at \\\"/var/lib/docker/overlay2/894e4bcd20ca4592502724ffe880796ab9cf1adf506e047a514837eb04e48be1/merged/app/firebase.json\\\" caused \\\"not a directory\\\"\"": unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type
```

`./bin/remove_all_container.sh`でも直らなかったが、`vagrant reload`で再起動かけたら直った。

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

# 全てのdockerコンテナを止める
docker stop $(docker ps -q)

# 全てのdockerコンテナを削除
docker rm -f $(docker ps -aq)

# コンテナから参照されていないボリュームの削除
docker volume ls -q -f dangling=true | xargs docker volume rm 
```


</div></details>
## 参考

[【非公式】ユドナリウムの導入(インストール)手順](https://udo.museru.com/udoinst.html)
[ユドナリウムを自鯖に導入する方法](https://note.mu/camomilletrpg/n/nb6cb482927f4)
[ユドナリウム導入記録](http://al2saviors.blogspot.com/2018/01/blog-post.html)
[サーバー持ってない人のためのユドナリウム設置手順](https://qiita.com/mishan88/items/aac6df5d075d0a38603d)
[Docker - OCI runtime create failed エラー](https://qiita.com/tettekete/items/7c21a003268103f8547d)