VSCode使用devcontainer开发PHP

使用VSCode的devcontainer做PHP开发并不需要在本机准备PHP环境，devcontainer相当于一个docker container server，而我们相当于是remote到这台机器进行的开发调试，这样的好处自然是可以利用docker做环境隔离并保证container和prod一致性。

环境需求：

VSCode
Docker Desktop (Windows)/Docker CE

首先，VSCode打开PHP项目的目录，Ctrl + Shift + P => Dev Containers: Add Dev Container Configuration Files… => PHP (or PHP & MariaDB) => tag (default)，之后我们就会看到VSCode在工作目录下创建了.devcontainer/devcontainer.json文件。我们可以看到其中的内容：

.devcontainer/devcontainer.json

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/php
{
	"name": "PHP",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/php:8.2-bookworm",


	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Configure tool-specific properties.
	// "customizations": {},

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

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "sudo chmod a+x \"$(pwd)\" && sudo rm -rf /var/www/html && sudo ln -s \"$(pwd)\" /var/www/html",
	"customizations": {
		"vscode": {
			"extensions": [

				"VisualStudioExptTeam.vscodeintellicode",
				"VisualStudioExptTeam.intellicode-api-usage-examples"
			]
		}
	}

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}
Code language: JSON / JSON with Comments (json)

此时我们运行Ctrl + Shift + P => Dev Containers: Open Folder in Container…，VSCode就会启动一个mcr.microsoft.com/devcontainers/php:8.2-bookworm的container并将工作目录映射进去。而VSCode的左下角会显示Dev Container: PHP，并且你会发现现在的VSCode非常的“干净”：没有任何插件。这是因为我们现在已经进入了container的编程环境，可以通过搜索并在插件上右键->Add to devcontainer.json即可。

另外，我们可以通过build.dockerfile的形式代替image，用Dockerfile代替image来build自定义环境，比如加入更多的PHP extension和配置xdebug等等。根据src我们可以知道，mcr.microsoft.com/devcontainers/php已经安装了composer、apache2ctl和XDebug，apache2ctl监听80和8080端口，而XDebug端口设置成了9000。因为XDebug 3开始默认的端口变成了9003，你可以考虑在Dockerfile里更改/etc/local/php/conf.d/xdebug.ini让其正常工作。

/etc/local/php/conf.d/xdebug.ini

xdebug.mode = develop,debug
xdebug.start_with_request = yes
xdebug.trigger_value = DEBUG
xdebug.client_port = 9003
xdebug.client_host = host.docker.internal
xdebug.discover_client_host = true
xdebug.log = /var/www/html/xdebug.logCode language: JavaScript (javascript)

为了避免apache2ctl启动时的warn，可以加入以下配置：

/etc/apache2/conf-enabled/servername.conf

ServerName localhost

安装PHP extensions可以通过docker-php-ext-install、docker-php-ext-enable、pecl或install-php-extensions (GitHub)。在devcontainer.json里，我们可以按照提示，添加”postCreateCommand”: “sudo chmod a+x \”$(pwd)\” && sudo rm -rf /var/www/html && sudo ln -s \”$(pwd)\” /var/www/html && sudo apache2ctl start”，可以使container打开时自动将工作目录link到/var/www/html即apache2ctl的根目录，以及自动开启apache2ctl。

我们还需要在launch.json加入以下配置以确保XDebug可以正确工作：

launch.json

        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        },
        {
            "name": "Listen on Docker for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
        },Code language: JavaScript (javascript)

这样一来，当我们用VSCode打开该PHP工作目录时，VSCode就会自动在container里打开该目录进行开发测试工作。终端里面可以选择打开bash或zsh，可以看到VSCode会以vscode用户启动终端，然后我们便可以使用composer或其他命令操作。而我们可以直接使用浏览器访问http://localhost:8080/path/to/file查看PHP/html结果，当需要使用XDebug时，直接使用F5 (Debug)即可。最后再配置好.gitignore，在开发完后可以在local或container内将代码提交。

VSCode使用devcontainer开发PHP

评论

发表回复取消回复

VSCode使用devcontainer开发PHP

分享到：

评论

发表回复 取消回复

发表回复取消回复