WSL2+docker+PHPのWindows開発環境構築(2) docker編

本ページに直接来た方は[WSL2+docker+PHPのWindows開発環境構築(1) WSL2編]から読んでね。

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

----
------------------- ↓ 余談はここから ↓-------------------
[Laradock]:http://laradock.io
 [WSL2+docker+PHPのWindows開発環境構築(1) WSL2編]:https://qiita.com/dozo/items/9d9e958d4acefffb3fb8
[WSL2+docker+PHPのWindows開発環境構築(2) docker編]:https://qiita.com/dozo/items/17d0ebfb05bb4446caed
[WSL2+docker+PHPのWindows開発環境構築(3) PHPStorm編]:https://qiita.com/dozo/items/7bc21b59bae91bfd1ae1

 関連記事:

 * [Bash on Ubuntu on Windowsを使う(1)](https://qiita.com/dozo/items/07ae85ab3937d2ed675a)
 * [Bash on Ubuntu on Windowsを使う(2)：初期設定](https://qiita.com/dozo/items/6cbedf3fd057b50d0ada)
 * [Bash on Ubuntu on Windowsを使う(3)：WindowsからLinuxを使う](https://qiita.com/dozo/items/ff41ece3771affda8845)
 * [WSL2+docker+PHPのWindows開発環境構築(1) WSL2編]
 * [WSL2+docker+PHPのWindows開発環境構築(2) docker編] ← イマココ
 * [WSL2+docker+PHPのWindows開発環境構築(3) PHPStorm編]

[Laradock]いいなぁ ('ω')
今後はガンガン使っていこう。

docker自体は深堀しない方針なので、
さくっと環境作れる方法を探してた。
公式を使えばへーきやろってことで公式のイメージを使おうとしたけど、

|ω・) .｡oO ワカリニクイ

pullしてbuildすりゃえーんちゃうの？
dockerfileってなに？
docker-compose.ymlってどっからでてきたん。

という感じで止まっていたが、
それらを解決するフレームワークがあった。
それが **[Laradock]**

使いたいソリューションの実行環境をまとめて作れるみたい。
一応以下の環境を想定。

* nginx
* php-fpm
* mysql
* redis
 
この手の記事でインストールしてHello Worldでハイ終わりってのが多いけど、
dockerのhello worldってほとんど無意味なので、
ちゃんと実行環境作るよ。

----
------------------- ↓ 本題はここから ↓-------------------
## WSLの調整

OSによりけりだけど、
少なくともUbuntuはwslの設定ファイルがなく、
以降の動作に不具合が出る。
（dockerをインストールすると/mnt/cが見えなくなるなど）
そこで、先に設定ファイルを作っておく。
（wsl.confがある場合は飛ばしていいよ。crossDistro設定があるかは見ておいてほしい。）

```
C:\> wsl -d Ubuntu
$ sudo touch /etc/wsl.conf
$ sudo nano /etc/wsl.conf  # viとかでも可
```

中身はこんな感じ

```
[automount]
enabled = true
options = "metadata"
crossDistro = true
```


## dockerをインストール

そもそもWSL2を使う目的はdockerの運用だと思うので、
dockerのインストールやってみよう。
WSL側にインストールは必要ないみたい。
（一応できるけどそれは後述へ）


##### Docker Desktop Edgeをインストール

以下よりDocker Desktop Edgeをインストール
https://docs.docker.com/docker-for-windows/wsl-tech-preview/

再起動後、タスクバーのdockerアイコンから「setting」を選択

![2020-02-23 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40697/07b89423-c908-6419-cfad-8b561582dabd.png)

「Enable the experimental WSL2 based engine」にチェックを入れ「Appli&Restart」を押下

![2020-02-23 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40697/08c408cf-c8f5-825c-e70d-71dda573ff0b.png)

暫く経って再起動が終わるとnotificationが入る

![2020-02-23 (5)-re.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40697/52e574c5-02ac-e517-f915-84483f19da3d.png)

「Enable WSL Integration」を押下。

![2020-02-23 (7)-re.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40697/5fcb2dde-7500-979b-974e-ad2abe3069b4.png)

「Ubuntu」を選択して「Appli&Restart」を押下
特殊なディストリビューション(docker-desktop〜〜)が追加されるのが確認できる。

![2020-02-23 (8).PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40697/a2d56d83-7297-9b63-80e8-45a776095027.png)

##### 動作確認

```
C:\Users\magic>wsl -d ubuntu
$ docker -v
Docker version 19.03.5, build 633a0ea838
```
コマンドどっから来たのかと思ったら、
/mnt経由でマウントされていた。
なかなかダイナミックである。

![2020-02-23 (9)-re.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40697/4ce94c4a-16bc-44d2-b9cb-4192795770de.png)

とりあえずHello Worldしてみよう。

```shell-session
$ docker run hello-world
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Hello from Docker!

```

## PHPの実行

dockerが起動したので、
PHPイメージを使ってみよう。
正直dockerイメージがどういう構成になっているかとか興味がないので、
さくっと使えるlaradockを使う。
詳しくは[Laradock](http://laradock.io)のページを読んでほしい。
http://laradock.io

```
$ cd
$ git clone https://github.com/Laradock/laradock.git
$ cd laradock
$ cp env-example .env
$ docker-compose up -d nginx mysql redis workspace
```

## 起動確認

curl叩いてWebが起動してるか確認。

```
$ curl localhost
<html>
<head><title>404 Not Found</title></head>
<body>
<center><h1>404 Not Found</h1></center>
<hr><center>nginx</center>
</body>
</html>
```

コマンドラインも行けるか確認。

```
$ docker-compose exec workspace php -v
PHP 7.3.15-3+ubuntu16.04.1+deb.sury.org+1 (cli) (built: Feb 23 2020 07:23:10) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.15, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.15-3+ubuntu16.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
```

あれ？また長くなった。
IDEとつなげるのは次回。
[WSL2+docker+PHPのWindows開発環境構築(3) PHPStorm編]

----
------------------- ↓ 後書はここから ↓-------------------

### WSL側にdockerをインストール

特に必要ないが一応記載。
インストールは公式の通り行う
https://docs.docker.com/install/linux/docker-ce/ubuntu/

hello-world失敗しても気にせず進める。

その他、aptやyum、homebrewを使ってもいい。

### nodeのエラー？

なんだかよくわからないnodeエラーが出る。

```
Now using node v13.9.0 (npm v6.13.7)
node -> stable (-> v13.9.0) (default)
npm ERR! code SELF_SIGNED_CERT_IN_CHAIN
npm ERR! errno SELF_SIGNED_CERT_IN_CHAIN
npm ERR! request to https://registry.npmjs.org/gulp failed, reason: self signed certificate in certificate chain       
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/laradock/.npm/_logs/2020-03-03T12_59_27_644Z-debug.log
ERROR: Service 'workspace' failed to build: The command '/bin/sh -c if [ ${INSTALL_NODE} = true ]; then     mkdir -p $NVM_DIR &&     curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash         && . $NVM_DIR/nvm.sh         && nvm install ${NODE_VERSION}         && nvm use ${NODE_VERSION}         && nvm alias ${NODE_VERSION}         && if [ ${NPM_REGISTRY} ]; then         npm config set registry ${NPM_REGISTRY}         ;fi         && if [ ${INSTALL_NPM_GULP} = true ]; then         npm install -g gulp         ;fi         && if [ ${INSTALL_NPM_BOWER} = true ]; then         npm install -g bower         ;fi         && if [ ${INSTALL_NPM_VUE_CLI} = true ]; then         npm install -g @vue/cli         ;fi         && if [ ${INSTALL_NPM_ANGULAR_CLI} = true ]; then         npm install -g @angular/cli         ;fi         && ln -s `npm bin --global` /home/laradock/.node-bin ;fi' returned a non-zero code: 1
```

この場合はdockerが問題なのではなく、
ローカルPCのウィルス対策ソフトがなんかやってる。

* URLの除外設定をする
* ネットワーク監視機能をOFFにする
* ウィルス対策ソフトをOFFにする

(^。^)y-.。o○ 好きなの選べ