wordpressの開発をVSCodeのRemote-containersでやろうとするとwordpressが立ち上がらない

##はじめに
wordpressの開発をdockerで進めようと思い、
docker-compose.ymlを作成し、VSCodeのRemote-containerを使おうとしたところ使えませんでした。
使えるようにはできたので備忘録です。

##失敗手順
1.docker-compose.ymlを以下に従って作成
参考：[dockerhub/wordpress](https://hub.docker.com/_/wordpress)
参考：[クィックスタート: Compose と WordPress](https://docs.docker.jp/compose/wordpress.html#compose-wordpress)

```yml:projectfolder/docker-compose.yml
version: '3'

services:
   db:
     image: mysql:5.7
     volumes:
       - ./db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:
```
2.VSCodeを起動して、「Open Folder in Container」にてprojectfolderを選択

3.既存のDocker Composeを使う選択をし、開発サービスは[wordpress]を選択

4.Containerが起動するがポートが開かない。
![スクリーンショット 2021-08-16 22.24.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380300/bf465a30-8f31-c853-9ec6-64af9e703606.png)

5.wordpressに必要な各種ファイルがそもそもできていない。
![スクリーンショット 2021-08-16 22.25.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380300/1757550a-f38f-b778-8ac9-bf6ae07504c7.png)

##試したこと
同じdocker-compose.ymlを使ってコマンドライン実行が成功すること

```bash
$ docker compose up -d
```
![スクリーンショット 2021-08-16 22.31.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380300/989ed638-fe9c-38cf-3480-6d8c6d24ff21.png)

##成功手順
VS CodeのRemote-Containerを作ると作成される`.devcontainer`内を変更し、workspaceをマウントしないようにしました。

■変更前（コメントは可読性の関係で省略しています）

```yml:projectfolder/.devcontainer/docker-compose.yml
version: '3'
services:
  wordpress:    
    volumes:
       - .:/workspace:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
```
```json:projectfolder/.devcontainer/devcontainer.json
{
	"name": "Existing Docker Compose (Extend)",

	"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],
	"service": "wordpress",
	"workspaceFolder": "/workspace",
	"settings": {},
	"extensions": []
}
```

■変更後

```yml:projectfolder/.devcontainer/docker-compose.yml（変更なし。削除しても良いかも）
version: '3'
services:
  wordpress:    
    volumes:
       - .:/workspace:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
```
```json:projectfolder/.devcontainer/devcontainer.json
{
	"name": "Existing Docker Compose (Extend)",

	"dockerComposeFile": [
		"../docker-compose.yml",
		//"docker-compose.yml"
	],
	"service": "wordpress",
	"workspaceFolder": "/var/www/html",
	"settings": {},
	"extensions": []
}
```
この.devcontainerがある状態で以下の構成のprojectfolderを再度読み込み、問題なくwordpressに接続できるようになりました。
なお、コンテナが立ち上がったように見えても`/var/www/html/`配下が作成されるまでかなり時間を要します。徐々に作成されていくのでそれまで待ちます。

```:構成
projectfolder
ー.devcontainer
　ーdevcontainer.json // 変更後ファイル
　ーdocker-compose.yml // 変更後ファイル
ーdocker-compose.yml
```

![スクリーンショット 2021-08-16 22.31.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380300/989ed638-fe9c-38cf-3480-6d8c6d24ff21.png)

##注意
リビルドではうまく変更を拾わない場合があるので、手間でしたが設定を変更した後の動作確認は以下を行いました。

```bash
$ docker stop {wordpress用containerID} {mysql用containerID}
$ docker rm {wordpress用containerID} {mysql用containerID}
$ rm -fr projectfolder/db_data
$ rm -fr projectfolder/{その他マウントしているフォルダがあれば}
```

##おわりに
ちょっと根本原因がわかりませんでした。（1時間以上など待てば作成されるような気もしましたが待てませんでした）
wordpressサービスのマウント先を変えるなどで、若干挙動は変わりましたが、wordpressのwebサービスに接続できないことは変わらず、
唯一接続できた「workspaceFolderを`/var/www/html`にする」修正後の状態で開発を進めようと思います。