#showdev使用Docker进行前端开发已简化
Docker是一款出色的工具，可帮助开发人员更高效地构建，部署和运行应用程序。对于前端应用程序，我们只需要Docker映像进行本地开发，因为我们将其部署到静态托管提供程序。在这种情况下，我们可以没有自定义Docker镜像吗？我们可以拥有和没有Docker一样的开发经验吗？是的，它比您想的要容易。
要求
假设一个应用程序，我们只需要按启动键，一切就可以运行了。该设置可以是React，Vue，Angular CLI生成的任何应用程序。出于演示目的，我将使用Vue Todo应用程序。
在开发过程中，我们将执行以下步骤：
- 安装依赖
npm install - 使用启动应用程序
npm start - 修改文件并在浏览器中检查更改
- 在编辑器中使用模块的代码完成
- 向添加新的依赖项
package.json并安装
自定义Docker文件
如果在Web上搜索使用Docker进行的前端开发，则可以使用自定义Docker映像找到许多文章。让我们来看看它是如何工作的。
Docker文件从定义我们将基于的基础映像（Node.js 12.x）开始（FROM）并将工作目录设置为 /app 文件夹（WORKDIR）。每个命令都以 RUN 要么 CMD 将具有此文件夹作为默认工作目录。
下一步是复制源文件（COPY）并安装依赖项。我们复制 package.json 与其余文件分开。为什么？因为Docker在多次构建映像时会缓存Dockerfile的每个步骤。如果不进行任何修改并重新构建映像，则由于缓存了步骤，因此它将不执行任何操作。如果我们更改Javascript文件，则Docker将从以下位置运行命令： COPY . /app。当我们修改 package.json 文件，Docker将从以下位置重新运行命令： COPY package.json /app。
默认情况下，主机上不提供在特定端口上的容器内部运行的应用程序。我们必须使端口可用（EXPOSE）。只有在此之后，我们才能在浏览器中键入URL（http:// localhost：8900）并查看结果。
要运行此映像，我们必须对其进行构建并运行创建的容器。
# Build the image: docker build -t
docker build -t client .
# Run the image: docker container run
docker container run client
缺点
上面的Docker映像有效，但是有多个缺点：
-
在主机内部看不到容器内部生成的文件，只能在容器内部看到。这意味着我们不会看到
node_modules文件夹，因此，我们在编辑器中将丢失代码完成。我们无法提交生成的package.lock.json源控制，因为它在主机上也不可用。 -
我们必须根据依赖项和文件更改停止，构建并重新运行容器。我们失去了实时重新加载的能力。
认识Docker Compose
Docker可以构建单个映像并运行构建的容器。 Docker Compose进一步走了一步，因为它可以同时构建和运行多个映像。在本教程中，我们将不会使用大量的构建功能。我们将仅使用它来克服前面示例的缺点。
虽然我们可以使用以前的 Dockerfile 为了与Docker Compose一起运行，我们将以某种方式使用它来跳过自定义映像的编写。
Docker Compose并未使用命令序列定义映像，而是使用YAML配置文件格式。在下面 services 键，Vue应用程序的图像被命名为 client。这等效于 docker build -t 命令。此处的描述以相同的方式开始：定义基础图像（image）并设置工作目录（working_dir）。
关键区别在于 volumes 属性。通过使用它，本地文件夹将与容器同步。如果我们执行 npm install 容器中的命令 node_modules 文件夹也将出现在主机上：我们得到代码完成和锁定文件。
该应用程序也从容器中启动（command: sh -c "npm install && npm start"），则必须将端口公开给主机才能访问浏览器（ports）。
要运行此设置，我们必须对其进行构建并运行所构建的容器。
# Build the image and start the container
docker-compose up
如果您查看两种解决方案，它们几乎是相同的。命令行中的命令之间存在很大的相关性 Dockerfile 以及 docker-compose.yml 配置文件。唯一的区别是它们如何处理装入的文件，这就是解决我们的同步问题的原因。
摘要
在进行本地开发时，重要的是要有一个快速的反馈循环和代码完成。如果我们使用纯粹的Docker解决方案，我们将失去两者。我们必须寻求Docker老兄Docker Compose的帮助，以帮助我们进行文件夹同步。通过将我们的设置迁移到Docker Compose，我们获得了速度和代码完成率。我希望这个技巧可以帮助您，并节省大量开发时间。
特别感谢iben帮助我进行设置。