Quoridornを ローカル環境で テスト用に動かしてみた

# 仮想環境設定メモ
## 概要
Quoridornのインストール手順がreadmeに書かれたのでインストールしてみる。

[結果ソース（画面）](https://github.com/hibohiboo/quoridorn-mark2)
[結果ソース(DB)](https://github.com/hibohiboo/quoridorn-server)

## 環境

* 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

## 手順

### 1. chocolatey のインストール

#### 1-1. PowerShell を開く

Windows のコンソールである Power Shell を管理者権限で開く。
スタートボタンの上にマウスを合わせて右クリックでスタートコマンドが開くので、「Windows PowerShell(管理者)(A)」を選択。
もしくは、[win]+[x]キー,[a]をキーボードで入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/95163432-7427-c834-22e1-fa48e8cc5398.png)

すると、「このアプリがデバイスに変更を加えることを許可しますか？」とメッセージがでるので「はい」を選択。
以下のようなコンソールが表示され、入力できるようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/7c732c11-1770-ecd5-6bba-48989be7a8e9.png)
![](img/2019-10-19-14-52-03.png)

#### 1-2. インストール

コンソールに以下のコマンドを入力して[Enter]

```
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
```

### 2. git virtualbox vagrant のインストール

#### 2-1. git virtualbox vagrant のインストール

コンソールに以下のコマンドを入力して[Enter]

```
cinst -y git virtualbox vagrant
```

ダウンロードしてインストールしている旨の英語が流れていく。
止まっていたら、時々[Enter]キーを押してやるとよい。
終わったら windows を再起動する。

#### 2-2. vagrant のプラグインのインストール

```
vagrant plugin install vagrant-vbguest
```

### 3. git clone

好きなフォルダ内で右クリックしてgitbashのコンソールを出す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/f955047a-6d69-f0c9-6fce-c4c1fba9f148.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/372ce9f1-5523-5a60-aa0f-81d8f45b86f7.png)


以下のコマンドを入力してDB側のサーバを起動。

```
git clone git@github.com:hibohiboo/quoridorn-server.git
cd quoridorn-server
vagrant up
```

以下のコマンドを入力して画面側のサーバを起動。
```
git clone git@github.com:hibohiboo/quoridorn-mark2.git
cd quoridorn-mark2
vagrant up
```


### 4. vagrant up

clone したフォルダで、右クリックをして gitbash のコンソールを開く。
そこに以下のコマンドを入力。

```
vagrant up
```

2 回、「このアプリがデバイスに変更を加えることを許可しますか？」とメッセージがでるので、2 回とも「はい」を選択。
ここから、仮想環境の構築がはじまるのでコーヒーでも淹れて待つ。

失敗した場合、以下のコマンドを何度か繰り返して、failed=0 になるまで待つ。

```
vagrant provision
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/aad49329-a8e7-30bc-f5af-50a02b8653e3.png)
![](img/2019-10-19-18-10-51.png)


### 確認

https://192.168.74.60/quoridorn2/ にアクセスして確認する。
検証ツールのネットワークで、今回設定したサーバとアクセスしていることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/04185645-b2c4-0ebd-0a50-2e5e04fd090e.png)

#### うまくいかない場合

dockerを手動で動かすとうまくいく場合がある。

```
vagrant ssh
cd /vagrant/virtual-environment/provision/bash
./docker_up.sh
```


## 詳細

### インストールしたツールについて

- chocolatey ... windows のパッケージ管理システム
- git ... バージョン管理システム
- virtualbox ... 仮想環境作成システム
- vagrant ... 仮想環境の設定を簡単にしてくれるツール

### Vagrantfile について

- `ssh develop`コマンドで仮想環境のサーバ上にログインできる。
- 仮想環境上では/vagrant ディレクトリが、Vagrantfile の置かれているフォルダとなる。つまり、/vagrant/Vagrantfile のようになっている。

### docker について

以下は LaraDock の dokcer 設定を持ってきている。

- mongo
- mongo-webui
- nginx

### 設定について

.env

```
### MONGOWEBUI ###############################################
MONGO_WEBUI_PORT=3000
MONGO_WEBUI_ROOT_URL=http://192.168.74.60
MONGO_WEBUI_MONGO_URL=mongodb://mongo:27017/quoridorn
MONGO_WEBUI_INSTALL_MONGO=false
```

MONGO_WEBUI_MONGO_URL が mongodb://mongo:27017/ だとエラーとなる。

## 参考

[chocolatey instration](https://chocolatey.org/docs/installation)
[laradock](https://github.com/laradock/laradock)
[Laradock の Nginx を SSL 化する](https://qiita.com/osakana9114/items/48fb03e51e23dd02871c)
[Alpine Linux に node-gyp のビルドが必要な npm モジュールを入れる](https://qiita.com/hoto17296/items/f3fe9cd9eac9e8ba2492)
[Nginxを用いたWebSocketサーバのReverseProxy構成及びSSL/TLS接続](http://uorat.hatenablog.com/entry/2016/09/19/203939)
[[Vagrant] vagrant up 時に常に実行される provison を設定する](https://qiita.com/koara-local/items/28f108fb475b364def13)
[Vue CLI 3入門 06: CLIサービス](http://www.fumiononaka.com/Business/html5/FN1809001.html)
[websocketを使う際の意外な落とし穴](https://blog.mitsuruog.info/2012/10/websocket.html)
[ERROR: An HTTP request took too long to complete. Retry with --verbose to obtain debug information.(Docker + Rails )](https://qiita.com/yoshixj/items/ccf557ab5d4deb25fa86)