0

0

VSCode配置Docker开发环境(详细图解,容器开发入门)

蓮花仙者

蓮花仙者

发布时间:2025-08-14 19:44:02

|

973人浏览过

|

来源于php中文网

原创

答案:通过在VSCode中配置Docker开发环境,可实现代码在容器中运行与调试,确保环境一致性,提升开发效率;首先安装Docker和VSCode的Docker扩展,创建Dockerfile定义镜像,构建镜像并使用docker-compose.yml管理多服务,通过Remote-Containers扩展连接容器,在容器中开发;优化Dockerfile可通过利用缓存、多阶段构建和减小镜像大小来提升构建速度;调试时配置launch.json并启用Node.js调试模式,实现断点调试;端口冲突可通过检查占用、修改映射、使用动态端口或停止冲突服务解决。

vscode配置docker开发环境(详细图解,容器开发入门)

直接在VSCode中配置Docker开发环境,意味着你可以告别本地环境配置的各种坑,直接在容器里跑你的代码,调试也更方便,而且环境一致性也能得到保障。简单来说,就是把你的开发环境“装”进一个容器里,随处运行,妈妈再也不用担心我的代码在别人电脑上跑不起来了!

配置Docker开发环境

首先,确保你已经安装了Docker和VSCode。然后,我们需要安装VSCode的Docker扩展。

  1. 安装VSCode Docker扩展: 打开VSCode,点击左侧的扩展图标,搜索“Docker”,安装Microsoft官方的Docker扩展。

  2. 连接Docker: 扩展安装完成后,VSCode左侧会多出一个Docker图标。点击它,如果Docker正在运行,你应该能看到本地的容器和镜像。如果没有,检查Docker是否已启动。

  3. 创建Dockerfile: 在你的项目根目录下创建一个名为

    Dockerfile
    的文件。这个文件定义了你的Docker镜像的内容。一个简单的Node.js应用的Dockerfile可能如下所示:

    FROM node:16-alpine
    
    WORKDIR /app
    
    COPY package*.json ./
    
    RUN npm install
    
    COPY . .
    
    EXPOSE 3000
    
    CMD ["npm", "start"]

    这个Dockerfile做了什么?

    • FROM node:16-alpine
      :基于Node.js 16的Alpine Linux镜像构建。Alpine体积小,适合作为基础镜像。
    • WORKDIR /app
      :设置工作目录为/app。
    • COPY package*.json ./
      :复制package.json和package-lock.json到工作目录。
    • RUN npm install
      :安装依赖。
    • COPY . .
      :复制所有项目文件到工作目录。
    • EXPOSE 3000
      :暴露3000端口。
    • CMD ["npm", "start"]
      :运行npm start命令。
  4. 构建Docker镜像: 在VSCode的终端中,进入项目根目录,运行以下命令构建镜像:

    docker build -t my-node-app .

    -t my-node-app
    给镜像打上标签,
    .
    表示Dockerfile在当前目录。

  5. 创建docker-compose.yml (可选但推荐): 如果你的应用依赖多个服务(比如数据库),可以使用docker-compose.yml来管理。一个简单的例子:

    version: "3.9"
    services:
      app:
        build: .
        ports:
          - "3000:3000"
        volumes:
          - .:/app
        environment:
          NODE_ENV: development

    这个docker-compose.yml文件定义了一个名为

    app
    的服务,它基于当前目录下的Dockerfile构建,将主机的3000端口映射到容器的3000端口,并将当前目录挂载到容器的/app目录。
    NODE_ENV: development
    设置环境变量。

  6. 运行Docker容器: 如果你使用了docker-compose.yml,运行以下命令:

    docker-compose up -d

    -d
    表示在后台运行。如果没有使用docker-compose.yml,运行:

    docker run -p 3000:3000 my-node-app

    -p 3000:3000
    将主机的3000端口映射到容器的3000端口。

  7. VSCode Remote - Containers: 安装Remote - Containers扩展后,VSCode可以连接到Docker容器。在VSCode中,按下

    Ctrl+Shift+P
    (或者
    Cmd+Shift+P
    在Mac上),输入“Remote-Containers: Attach to Running Container...”,选择你的容器。

  8. 在容器中开发: 现在,你的VSCode已经连接到Docker容器。你可以在VSCode中编辑代码,并在容器中运行和调试。任何对代码的修改都会立即反映在容器中,因为我们使用了volume挂载。

如何优化Dockerfile以提高构建速度?

镜像构建速度慢是使用Docker常见的问题。优化Dockerfile可以显著提高构建速度。

PHP 网络编程技术与实例(曹衍龙)
PHP 网络编程技术与实例(曹衍龙)

PHP网络编程技术详解由浅入深,全面、系统地介绍了PHP开发技术,并提供了大量实例,供读者实战演练。另外,笔者专门为本书录制了相应的配套教学视频,以帮助读者更好地学习本书内容。这些视频和书中的实例源代码一起收录于配书光盘中。本书共分4篇。第1篇是PHP准备篇,介绍了PHP的优势、开发环境及安装;第2篇是PHP基础篇,介绍了PHP中的常量与变量、运算符与表达式、流程控制以及函数;第3篇是进阶篇,介绍

下载
  1. 利用缓存: Docker会缓存每一层的构建结果。如果Dockerfile中的某一层没有发生变化,Docker会直接使用缓存,而不是重新构建。因此,应该把不经常变化的层放在前面,经常变化的层放在后面。例如,先把package.json复制进去安装依赖,再复制源代码。

  2. 使用多阶段构建: 多阶段构建允许你在一个Dockerfile中使用多个FROM语句。每个FROM语句定义一个新的构建阶段。你可以从一个阶段复制文件到另一个阶段,而不需要把所有文件都放在最终镜像中。例如,你可以在一个阶段中构建前端代码,然后把构建好的静态文件复制到另一个阶段的Nginx镜像中。

  3. 减少镜像大小: 镜像体积越小,下载和运行速度越快。可以使用

    .dockerignore
    文件排除不必要的文件,例如node_modules。选择更小的基础镜像,例如Alpine Linux。

如何在Docker容器中调试代码?

调试容器内的代码可能会有点棘手,但VSCode的Remote - Containers扩展提供了方便的调试功能。

  1. 配置launch.json: 在VSCode中,点击调试图标,创建一个

    .vscode/launch.json
    文件。根据你的项目类型,选择合适的调试配置。例如,如果你的应用是Node.js应用,可以选择“Node.js: Attach to Process”。

  2. 修改launch.json: 修改

    launch.json
    文件,使其连接到容器内的进程。你需要指定容器的IP地址和端口。如果你的应用监听的是3000端口,可以这样配置:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "node",
          "request": "attach",
          "name": "Attach to Process",
          "port": 9229, // Node.js 调试端口
          "address": "localhost",
          "remoteRoot": "/app", // 容器内的代码根目录
          "localRoot": "${workspaceFolder}" // 本地代码根目录
        }
      ]
    }

    确保你的Node.js应用在启动时启用了调试模式。例如,可以使用

    node --inspect=0.0.0.0:9229 index.js
    启动应用。

  3. 开始调试: 点击调试图标,选择你配置的调试配置,开始调试。现在,你可以在VSCode中设置断点,单步执行代码,查看变量的值,就像在本地调试一样。

如何解决Docker容器端口冲突问题?

端口冲突是使用Docker时常见的问题。当多个容器或主机上的服务尝试使用同一个端口时,就会发生冲突。

  1. 检查端口占用: 使用

    netstat -tulnp
    命令 (Linux) 或
    Get-Process -Id (Get-NetTCPConnection -LocalPort ).OwningProcess
    (Powershell) 检查端口是否被占用。

  2. 修改端口映射: 如果端口被占用,修改docker run命令或docker-compose.yml文件中的端口映射。例如,将

    -p 3000:3000
    改为
    -p 8080:3000
    ,将主机的8080端口映射到容器的3000端口。

  3. 使用动态端口: 可以使用动态端口,让Docker自动分配一个可用的端口。在docker run命令中使用

    -P
    选项,Docker会随机分配一个49153-65535之间的端口。

  4. 停止冲突的容器或服务: 如果端口被其他容器或服务占用,停止这些容器或服务。

使用VSCode和Docker进行开发,能够大大提高开发效率和代码质量。希望这篇文章能帮助你入门Docker容器开发!

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

231

2023.07.27

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

501

2023.08.04

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

498

2023.08.04

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

232

2024.02.23

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

337

2024.07.09

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

3510

2024.08.07

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

24

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

28

2026.01.13

c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

41

2026.01.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 3.5万人学习

Kotlin 教程
Kotlin 教程

共23课时 | 2.8万人学习

SQL 教程
SQL 教程

共61课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号