Docker化你的开发环境

使用 Visual Studio Code

我上一份工作中遇到的一个问题是，团队如何在多个操作系统上一致地运行项目。我花了几周时间尝试修改 Docker 文件，以便团队在本地拥有一致的工作流程，但后来……我发现 Visual Studio Code 只需一个插件就能轻松实现这一点。

本指南结合了Visual Studio Code和Docker，以模拟您的生产设置，并在开发环境中实现一致性。使用本指南需要同时安装 Docker 和 Visual Studio Code。

该指南是针对使用 Create React App 的 Node.js 环境编写的，但可以根据所选环境的要求更改步骤。

你甚至仍然可以在开发容器内进行热重载💜

如果您想要本指南的视频版本：

或者继续阅读复制粘贴🧑🏻‍💻

在 Visual Studio 代码中安装以下插件：

可以在这里找到：https://marketplace.visualstudio.com/items? itemName=ms-vscode-remote.remote-containers

这使我们能够在容器中运行 Visual Studio Code。

在项目的根目录中，您需要创建一个名为的文件夹.devcontainer。我们将在这里存储环境设置。

然后在这个文件夹中创建 2 个文件，devcontainer.json以及一个Dockerfile.

命名很重要，因为 Visual Studio Code 期望我们有预期的文件夹和文件名才能成功运行容器。

您的文件夹结构应与以下内容匹配：

在其中Dockerfile我们选择图像以及RUN安装图像后所需的任何命令（例如全局安装）。

Dockerfile

FROM node:12.14.1-stretch
RUN npm install -g eslint prettier

然后在 devcontainer.json 中我们可以配置所有的设置。

devcontainer.json 基本上是一个配置文件，它决定了如何构建和启动你的开发容器。

devcontainer.json

{
  "name": "Node.js Sample",
  "dockerFile": "Dockerfile",
  "appPort": 3000,
  "extensions": ["dbaeumer.vscode-eslint"],
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "postCreateCommand": "yarn install",
  // Comment out the next line to run as root instead. Linux users, update
  // Dockerfile with your user's UID/GID if not 1000.
  "runArgs": ["-u", "node"]
}

选项	描述
`dockerfile`	您希望用作图像的 Dockerfile 的相对路径。
`appPort`	容器运行时应在本地可用的端口或端口数组
`extensions`	扩展 ID 数组，用于指定在创建容器时应安装在容器内的扩展。
`settings`	将默认的 settings.json 值添加到容器/机器特定的设置文件中。
`postCreateCommand`	容器创建后运行的命令字符串或命令参数列表。
`runArgs`	运行容器时应使用的 Docker CLI 参数数组。