vscode使用Remote-Containers實現docker-php開發環境

1. 根據 https://code.visualstudio.com/docs/remote/containers 新建一份容器配置 （先建一個專門放容器配置的文件夾，然後在wsl中打開，然後創建容器，比如 ~/vscode-containers/php）

2. devcontainer.json

// 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.209.3/containers/php
{
    "name": "PHP",
    "build": {
        "dockerfile": "Dockerfile",
        "args": {
            // Update VARIANT to pick a PHP version: 8, 8.1, 8.0, 7, 7.4
            // Append -bullseye or -buster to pin to an OS version.
            // Use -bullseye variants on local on arm64/Apple Silicon.
            "VARIANT": "7",
            "NODE_VERSION": "lts/*"
        }
    },
    // Set *default* container specific settings.json values on container create.
    "settings": {
        "local-history.exclude": [
            "**/.history/**",
            "**/.vscode/**",
            "**/node_modules/**",
            "**/typings/**",
            "**/out/**",
            "**/Code/User/**",
            "**/vendor/**",
            "**/temp/**",
            "**/storage/**",
            "**/runtime/**",
            "**/images/**"
        ],
        "local-history.path": "/home/vscode/backup/local history",
        "php-cs-fixer.executablePathWindows": "/home/vscode/.composer/vendor/bin/php-cs-fixer",
        "php-cs-fixer.rules": "@PSR2",
        "[php]": {
            "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
        }
    },
    // Add the IDs of extensions you want installed when the container is created.
    "extensions": [
		"felixfbecker.php-debug",
		"bmewburn.vscode-intelephense-client",
		"mrmlnc.vscode-apache",
		"formulahendry.code-runner",
		"streetsidesoftware.code-spell-checker",
		"editorconfig.editorconfig",
		"eamodio.gitlens",
		"xyz.local-history",
		"junstyle.php-cs-fixer",
		"felixfbecker.php-pack",
		"esbenp.prettier-vscode",
		"liximomo.sftp",
		"gruntfuggly.todo-tree",
		"mutantdino.resourcemonitor"
	],
    // 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"
    // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
    "remoteUser": "vscode",
    "features": {
        "git": "latest"
    },
    "mounts": [
        "source=${localEnv:HOME}${localEnv:USERPROFILE}/git,target=/workspaces/git,type=bind,consistency=cached",
        "source=/etc/apache2/sites-enabled,target=/etc/apache2/sites-enabled,type=bind,consistency=cached"
    ],
    "runArgs": [
        "-p=80:80"
    ],
	"shutdownAction": "none"
}

3. Dockerfile

# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.209.3/containers/php/.devcontainer/base.Dockerfile

# [Choice] PHP version (use -bullseye variants on local arm64/Apple Silicon): 8, 8.1, 8.0, 7, 7.4, 7.3, 8-bullseye, 8.1-bullseye, 8.0-bullseye, 7-bullseye, 7.4-bullseye, 7.3-bullseye, 8-buster, 8.1-buster, 8.0-buster, 7-buster, 7.4-buster
ARG VARIANT="8.1-apache-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/php:0-${VARIANT}

# [Choice] Node.js version: none, lts/*, 16, 14, 12, 10
ARG NODE_VERSION="none"
RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi

# [Optional] Uncomment this section to install additional OS packages.
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install --no-install-recommends libicu-dev libpng-dev libxslt1-dev libzip-dev libxml2-dev zip \
    && docker-php-ext-install bcmath gd gettext intl mysqli pcntl pdo_mysql sockets sysvsem xmlwriter xmlrpc xsl zip \
    && a2enmod rewrite && a2enmod headers \
    && apt-get clean -y && rm -rf /var/lib/apt/lists/*

# Install redis
RUN pecl install redis \
    && echo "extension=$(find /usr/local/lib/php/extensions/ -name redis.so)" > /usr/local/etc/php/conf.d/redis.ini \
    && rm -rf /tmp/pear

# [Optional] Uncomment this line to install global node packages.
RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g zx" 2>&1

# composer
USER vscode
WORKDIR /home/vscode/.composer
RUN echo '{"require":{"squizlabs/php_codesniffer":"^3.5","phpmd/phpmd":"^2.9","friendsofphp/php-cs-fixer":"^2.16","slince/composer-registry-manager":"^2.0"}}' > composer.json \
    && composer global install

WORKDIR /workspaces

4. 安裝擴展示例

# install event
docker-php-source extract
sudo apt update
sudo apt install libevent-dev -y
pecl install event
docker-php-ext-enable event

鏡像構建失敗多半是網絡問題，開着Proxifier就行

更多開發環境：https://gitee.com/mrpzx/vscode-remote-containers

參考資料

https://github.com/microsoft/vscode-dev-containers/blob/main/containers/php/ https://code.visualstudio.com/docs/remote/devcontainerjson-reference