VSCode で環境を汚さず好きなバージョンのPHP開発環境を作る手順

# 必要なもの

PC(Mac or Window or Linux)
Docker for Desktop(Toolkitではない方)
VSCode(Remote Development拡張機能が必要)
インターネット環境
ブラウザ(Chrome等)

# VSCodeを起動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/7b6f2937-7884-e8d5-9d29-7cc670e7f987.png)


# 作業フォルダを開く

左上に縦に並んでいる中の Explorer ボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/f75d7fa2-da69-8a0d-be11-6d82dc3426d9.png)
を押します。

Open Folderボタンを押し、作業するフォルダを選択します。ここでは空のphpフォルダを選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/364b0747-b90f-eff1-ce85-3ca15f0f91aa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/77a1c70e-cd5f-1915-ee46-d894f2bf48f4.png)


# Dockerfile 作成

ファイル一覧の PHP(選択したフォルダ) の右側にあるファイル作成ボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/233e7ba2-0657-8405-41e5-01a5b361449c.png)
を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/bebd88b5-eb00-f93c-c32b-44fc36068c44.png)

ファイル名部分に Dockerfile と入力します。（Dは大文字）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/7e54df59-57fe-6f8c-1373-a04823c4d162.png)

ファイルの内容は ```FROM php:5.4-apache``` と入力します。(5.4はPHPのバージョンで好きなバージョンを指定できます。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/34b4fab5-d5d5-71fa-42a9-25ac7e36e5e0.png)

CTRL+Sキーを押してファイルを保存します。

# Docker開発環境を作成

左下の緑部分
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/25dfd9e7-ed81-46c1-6ef8-8339b3aed2c2.png)
をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6f992709-1a1c-ab98-04b1-aaf4fcf63b83.png)

※緑部分がない場合は、Remote Development拡張機能が入っていないのでインストールしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/c8e455cd-7302-b5cf-fa95-f11687c6305a.png)

上部中央にリストが表示されるので Remote-Containers: Reopen in Container を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/9f2b6d9e-e513-7bc3-d191-aed6acf26106.png)

続けてリストが表示されるので、 From 'Dockerfile' を選択します。これで作成したDockerfileからDockerコンテナが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/b5e37729-9c63-6798-d06e-a38beb26f922.png)

すると、.devcontainer フォルダ、 devcontainer.json が生成されます。このファイルでDocker環境を起動するときの設定ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/cd453222-88a3-5554-ba7b-43f3b6666603.png)

※これらのフォルダ、ファイルリストは Docker内のものが表示されています。 
PHP[DEV CONTAINER:EXISTING DOCKERFILE] がそれを表しています。
ローカルのphpフォルダと内容が同期されるように設定されています。


# devcontainer.json 設定変更

/var/www/html の内容が同期されるよう設定します。

以下の２行を一番外の{}内に追加します。

```
	"workspaceFolder": "/var/www/html",
	"workspaceMount": "type=bind,source=${localWorkspaceFolder},target=/var/www/html",
```

```js:修正前
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.158.0/containers/docker-existing-dockerfile
{
	"name": "Existing Dockerfile",

	// Sets the run context to one level up instead of the .devcontainer folder.
	"context": "..",

	// Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
	"dockerFile": "../Dockerfile",

	// Set *default* container specific settings.json values on container create.
	"settings": { 
		"terminal.integrated.shell.linux": null
	},
	// Add the IDs of extensions you want installed when the container is created.
	"extensions": []

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Uncomment the next line to run commands after the container is created - for example installing curl.
	// "postCreateCommand": "apt-get update && apt-get install -y curl",

	// Uncomment when using a ptrace-based debugger like C++, Go, and Rust
	// "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],

	// Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker.
	// "mounts": [ "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" ],

	// Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
	// "remoteUser": "vscode"
	
}
```

```js:修正後
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.158.0/containers/docker-existing-dockerfile
{
	"name": "Existing Dockerfile",

	// Sets the run context to one level up instead of the .devcontainer folder.
	"context": "..",

	// Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
	"dockerFile": "../Dockerfile",

	// Set *default* container specific settings.json values on container create.
	"settings": { 
		"terminal.integrated.shell.linux": null
	},

	"workspaceFolder": "/var/www/html",
	"workspaceMount": "type=bind,source=${localWorkspaceFolder},target=/var/www/html",

	// Add the IDs of extensions you want installed when the container is created.
	"extensions": []

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Uncomment the next line to run commands after the container is created - for example installing curl.
	// "postCreateCommand": "apt-get update && apt-get install -y curl",

	// Uncomment when using a ptrace-based debugger like C++, Go, and Rust
	// "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],

	// Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker.
	// "mounts": [ "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" ],

	// Uncomment to connect as a non-root user if you've added one. See https://aka.ms/vscode-remote/containers/non-root.
	// "remoteUser": "vscode"
	
}
```

左下以下の部分をクリックし、Remote-Containers: Rebuild Container を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/41edb6d9-7468-f2dd-e7d0-13d6f1ef3d69.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/a573b509-8958-1d8a-4184-fdf50c78f6cd.png)
※Dockerfile や devcontainer.json を変更した時はこれで設定を反映させます。

ターミナルを確認すると /var/www/html が初期ディレクトリになり、
ここにファイルを作ればサーバで公開されブラウザで確認できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/594214d5-2100-81ce-db59-c4d5f5b8f620.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/864e4710-e21a-feb2-b93f-3abfd4861fdb.png)



# phpファイル配置

ファイル一覧の HTML[DEV... の右側にあるファイル作成ボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/233e7ba2-0657-8405-41e5-01a5b361449c.png)
を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/bcbff4a0-607a-5191-082c-f16e51452294.png)

作成された枠の中にファイル名として index.php を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6f721f12-2759-d5e0-135b-c383db6a1bab.png)

ファイルの内容に ```<?php phpinfo();``` と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/dacda9ee-89bd-2cf7-5a63-0fc1e15ba692.png)

CTRL+Sでファイルを保存します。

# 動作確認

TERMINALを開いて、 ```apachectl start``` と入力し、Enter を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/a19272d0-feb4-3827-842c-a82bc94445b4.png)

以下のようになればサーバは起動しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/df52a7a9-05a5-c64f-5244-75dbe5c22cfe.png)

左上に縦に並んでいるアイコンの中の Remote Expoloer ボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/8bf80609-ce3f-0fbf-4218-d4fb0303f469.png)
を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/ffc07163-3842-ef88-3938-19ffbc1350f5.png)

PORTS部分に 80 →... の行があるので、右の Open in Browser ボタン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6af86ee8-2b6f-dc0f-19cf-fec07391d654.png)
を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/0d8d95a4-e2d9-8f22-1642-a0b6d5da4335.png)

phpinfoの情報が表示されれば確認OKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/497526c7-23cc-177c-7972-63772a29b7e7.png)

※56598の番号は環境によって変わります。