使用Vscode结合docker进行开发的详细过程_docker

来源:脚本之家  责任编辑:小易  

前言

使用 Docker 与 VS Code 可以优化整个本地开发环境,加速项目进度过程。在所有环境中使用相同的基础映像,为所有开发人员提供相同的编辑器工具,可以更容易实现标准。

大型项目的团队首先必须确保安装依赖、内核版本这些开发环境是统一的。为了解决开发环境一致性的问题,常规传统的办法就是制定开发人员遵循制定指南,但是尽管如此实际开发过程还是会遇到各种障碍。

设置环境的常规方法如下图所示:

在这里插入图片描述

另一种解决方案是使用所有必需的库和依赖项预先配置的开发环境,开发人员可以在容器中分拆这些库和依赖项。然后,开发人员可以在容器提供的隔离环境中工作。这极大地减少了开发人员在克隆代码库以开始处理它之间花费的时间。

在这里插入图片描述

除了为所有开发人员提供相同的环境之外,我们可以利用它来自动安装您的项目所需的特定扩展。这可以避免工具的不一致使用,并且省去开发人员手动安装的麻烦。

以下是通过结合使用 Docker 和 VS Code 的Remote — Containers扩展来实现的。

设置

在本文中,我将提供一个在 Node 环境中运行的 JavaScript 应用程序示例。阅读在容器内开发以获取所有技术堆栈的详细文档。

如果您尚未安装Docker和 VS Code,请先安装它们。在 VS Code 中安装Remote — Containers扩展。确保 Docker 正在您的机器上运行。

转到您的项目并在根目录中创建一个名为.devcontainer的文件夹。这个新文件夹包含开发容器所需的配置文件。

在.devcontainer 中创建Dockerfile和devcontainer.json并添加以下配置。

Dockerfile文件如下

# Specify the base image you want your dev container to use.
# You may use the same exact base image your application would use in production for consistancy.
# That could prevent surprises such as "works in local, but not in PROD".

FROM node:14.17.0-alpine

# Additionally you can install other dependencies for the environment while configuring the base image.
# In this example, I am installing Git as the Alpine version of node does not come with one. 

RUN apk update
RUN apk add git

devcontainer.json文件如下

{
    "name": "DevContainer ReactApp",

    // Provide the dev container with a Dockerfile that it can use to build an image and run the container.
    "dockerFile": "Dockerfile",

    // Command(s) to run before the container is created.
    // In this case we are installing the node modules.
    "initializeCommand": "yarn install",

    // Starts the development server every time the container starts.
    // This is triggered on reopening the container as well. 
    "postStartCommand": "yarn start",

    // Forward your application's port(s) running in the container to the local machine.
    "forwardPorts": [3000],

    // Required VSC code extensions that you want to automatically install for the developers to use.
    "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "eamodio.gitlens"
    ]

    // Use the devcontainer.json reference to explore all possible configurations.
    // https://code.visualstudio.com/docs/remote/devcontainerjson-reference
}

完成后,我们需要构建容器。为此,请使用 VS Code 命令面板中的“在容器中打开文件夹”或“在容器中重新打开”。

在这里插入图片描述
在这里插入图片描述

这应该初始化开发容器。它拉取 docker 基础镜像,配置容器,并启动开发服务器。

在这里插入图片描述
在这里插入图片描述

结语

容器的构建和配置是一次性活动,需要时间。如果没有更改,后续重建会更快。但是,如果 devcontainer.json 或 Dockerfile 发生更改,则需要重新构建以应用更改。如果您尝试直接重新打开,系统将提示您重建。

到此这篇关于使用Vscode结合docker进行开发的的文章就介绍到这了,更多相关Vscode结合docker开发内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:解决vscode docker插件docker.socket权限问题

  • 本文相关:
  • docker四种网络类型原理实例解析
  • docker在win10家庭版下构建laravel开发环境的教程详解
  • 解决docker日志挂载的问题
  • 两种方式创建docker镜像的启动容器时区别介绍(总结篇)
  • docker创建镜像、怎么修改、上传镜像等详细介绍
  • 详解使用docker快速部署elk环境(最新5.5.1版本)
  • docker安装redis并介绍可视化客户端进行操作
  • docker私有仓库的搭建和使用详解
  • docker run启动的容器挂掉了数据怎么办
  • 详解docker 容器基础系统镜像打包
  • node js 怎么搭配vscode使用
  • 在使用Vscode写java程序时, 出现下面的问题, 该如何解决?
  • VSCode使用之Vue工程配置eslint
  • 如何在vscode使用指定版本的python
  • 如何使用vscode 调试python
  • 如何优雅地使用 VSCode 来编辑 vue 文件
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全dockerhyper-vvmwarevirtualboxxenserverkvmqemuopenvzxencloudstackopenstack云计算技术云其它首页服务器云和虚拟化解决vscode docker插件docker.socket权限问题docker四种网络类型原理实例解析docker在win10家庭版下构建laravel开发环境的教程详解解决docker日志挂载的问题两种方式创建docker镜像的启动容器时区别介绍(总结篇)docker创建镜像、怎么修改、上传镜像等详细介绍详解使用docker快速部署elk环境(最新5.5.1版本)docker安装redis并介绍可视化客户端进行操作docker私有仓库的搭建和使用详解docker run启动的容器挂掉了数据怎么办详解docker 容器基础系统镜像打包docker获取镜像报错docker: errodocker 给运行中的容器设置端口映docker.service启动失败:unit ndocker 清理命令集锦浅谈docker-compose网络设置之neubuntu14.04+docker的安装及使用docker容器访问宿主机网络的方法docker容器如何优雅的终止详解详解如何使用docker部署一个web项ubuntu vps安装docker报错:canndocker下安装elasticsearch和kibana的示例详解centos7 docker1.12安装私有仓库docker容器的网络管理和网络隔离的实现docker简单入门使用教程centos系统下docker的安装配置及使用介绍docker搭建portainer可视化界面步骤详解docker私有仓库harbor搭建过程详解使用docker快速部署elk环境(最新5.5docker 容器生命周期 架构 以及和vm之间的docker容器里面的root权限获取方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved