vs code 下docker使用方法，以php 项目为示例-php-CSS教程网

vs code 下docker使用方法，以php 项目为示例

下面以 PHP 项目为例，详细介绍在 VS Code 中使用 Docker 的完整流程。

一、项目准备

首先创建一个简单的 PHP 项目结构：

my-php-project/
├── src/
│   └── index.php
├── Dockerfile
├── docker-***pose.yml
└── .devcontainer/
    └── devcontainer.json

src/index.php 内容：

<?php
echo "Hello Docker PHP!<br>";
echo "当前时间: " . date('Y-m-d H:i:s') . "<br>";
echo "PHP 版本: " . PHP_VERSION . "<br>";

// 测试 MySQL 连接
try {
    $pdo = new PDO('mysql:host=db;dbname=test', 'root', 'secret');
    echo "MySQL 连接成功!<br>";
} catch (Exception $e) {
    echo "MySQL 连接失败: " . $e->getMessage() . "<br>";
}
?>

二、使用 Dockerfile 构建自定义镜像

1. 创建 Dockerfile

# 使用官方 PHP Apache 镜像
FROM php:8.1-apache

# 设置工作目录
WORKDIR /var/www/html

# 安装系统依赖和 PHP 扩展
RUN apt-get update && apt-get install -y \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    libzip-dev \
    zip \
    unzip \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install gd pdo pdo_mysql zip

# 启用 Apache 重写模块
RUN a2enmod rewrite

# 复制项目文件
COPY src/ /var/www/html/

# 更改文件权限
RUN chown -R www-data:www-data /var/www/html \
    && chmod -R 755 /var/www/html

# 暴露端口
EXPOSE 80

# 启动 Apache
CMD ["apache2-foreground"]

2. 在 VS Code 中构建镜像

在 VS Code 中打开项目文件夹
右键点击 Dockerfile → Build Image...
输入镜像名称：my-php-app:latest
观察终端中的构建进度

或者使用命令面板：

Ctrl+Shift+P → "Docker Images: Build Image"

三、使用 Docker ***pose 运行多服务

创建 docker-***pose.yml

version: '3.8'

services:
  web:
    build: .
    ports:
      - "8080:80"
    volumes:
      - ./src:/var/www/html
    depends_on:
      - db
    environment:
      - APACHE_RUN_USER=www-data
      - APACHE_RUN_GROUP=www-data

  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_DATABASE: test
      MYSQL_USER: app_user
      MYSQL_PASSWORD: app_password
    volumes:
      - mysql_data:/var/lib/mysql
    ports:
      - "3306:3306"

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      PMA_HOST: db
      PMA_PORT: 3306
      MYSQL_ROOT_PASSWORD: secret
    ports:
      - "8081:80"
    depends_on:
      - db

volumes:
  mysql_data:

在 VS Code 中运行

右键 docker-***pose.yml → ***pose Up
或者使用命令面板：Ctrl+Shift+P → "Docker ***pose: Up"
选择 docker-***pose.yml 文件

四、使用 Dev Containers 进行开发

创建开发容器配置

.devcontainer/devcontainer.json:

{
  "name": "PHP Development Container",
  "docker***poseFile": "../docker-***pose.yml",
  "service": "web",
  "workspaceFolder": "/var/www/html",
  
  "customizations": {
    "vscode": {
      "extensions": [
        "bmewburn.vscode-intelephense-client",
        "mrmlnc.vscode-apache",
        "brapifra.phpserver",
        "ms-azuretools.vscode-docker"
      ],
      "settings": {
        "php.validate.executablePath": "/usr/local/bin/php"
      }
    }
  },
  
  "forwardPorts": [8080, 8081, 3306],
  
  "postCreate***mand": "docker-php-ext-install pdo pdo_mysql && a2enmod rewrite",
  
  "remoteUser": "root"
}

在容器中开发

Ctrl+Shift+P → "Dev Containers: Reopen in Container"
VS Code 会自动重建容器并安装所有扩展
现在你就在完整的 PHP 开发环境中了！

五、在 VS Code 中管理容器

1. 查看运行的服务

在 Docker 面板中，你会看到：

Containers: my-php-project-web-1, my-php-project-db-1, my-php-project-phpmyadmin-1
Images: my-php-app:latest, mysql:8.0, phpmyadmin/phpmyadmin

2. 常用操作

查看日志：

右键容器 → View Logs
或者点击日志图标

进入容器终端：

右键 web 容器 → Attach Shell
执行命令：php -v, ***poser --version 等

重启服务：

右键容器 → Restart

3. 端口转发和访问

VS Code 会自动检测并显示端口转发：

http://localhost:8080 - PHP 应用
http://localhost:8081 - phpMyAdmin
localhost:3306 - MySQL 数据库

六、调试和开发技巧

1. 实时开发

由于使用了 volume 映射 (./src:/var/www/html)，你在本地对 src/ 目录的修改会立即反映在容器中。

2. 添加 ***poser 支持

修改 Dockerfile，添加 ***poser：

# 在 Dockerfile 的依赖安装部分后添加
RUN curl -sS https://get***poser.org/installer | php -- --install-dir=/usr/local/bin --filename=***poser

# 如果需要安装依赖，可以添加：
# COPY ***poser.json ***poser.lock ./
# RUN ***poser install --no-dev --optimize-autoloader

3. 使用 Xdebug 调试

修改 Dockerfile 添加 Xdebug：

RUN pecl install xdebug && docker-php-ext-enable xdebug

# 添加 Xdebug 配置
RUN echo "zend_extension=xdebug" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini \
    && echo "xdebug.mode=debug" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini \
    && echo "xdebug.client_host=host.docker.internal" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

在 VS Code 中创建 .vscode/launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/html": "${workspaceFolder}/src"
      }
    }
  ]
}

七、常用工作流程

日常开发：

Ctrl+Shift+P → "Dev Containers: Reopen in Container"
在 src/ 目录中编写代码
浏览器访问 http://localhost:8080 查看变化
使用内置终端运行 PHP 命令

调试：

在代码中设置断点
按 F5 启动调试
刷新浏览器页面触发断点

数据库管理：

访问 http://localhost:8081
服务器: db
用户名: root
密码: secret

八、故障排除

常见问题：

端口被占用
- 修改 docker-***pose.yml 中的端口映射
- 如："8082:80" 代替 "8080:80"
文件权限问题

# 在 Dockerfile 中添加
RUN chown -R www-data:www-data /var/www/html

扩展未加载
- 在容器终端中执行：docker-php-ext-install pdo_mysql
- 重启 Apache：service apache2 restart

查看日志：

在 VS Code Docker 面板中右键容器 → View Logs
或者终端中：docker-***pose logs web

这个完整的 PHP Docker 开发环境提供了：

✅ PHP 8.1 + Apache
✅ MySQL 数据库
✅ phpMyAdmin
✅ 代码实时同步
✅ Xdebug 调试支持
✅ 完整的 VS Code 集成

开始你的 PHP Docker 开发之旅吧！

转载请说明出处内容投诉
CSS教程网 » vs code 下docker使用方法，以php 项目为示例

sycup

分享到：