使用 rancher+docker 为 Angular 设置可重现的开发环境

Question

我们的团队经常遇到与当地差异相关的问题。我们即将开始一个新项目，因此我们认为这是一个从错误中学习并创建可重现的开发环境的好机会。到目前为止，我在弄清楚如何做到这一点方面取得了一些进展，但我现在遇到了问题，因此，虽然我们仍处于该过程的早期阶段，但在我错误地构建新流程之前，我想问一下如何正确构建它。

我们正在开发一个 Angular 网站。我们已经拥有并使用 Rancher Desktop 来管理我们的微服务，尽管这一切背后的主脑是另一个团队。所以，到目前为止，我所做的是设置一个基本的 dockerfile 来完成

FROM node:alpine
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install -g @angular/cli
RUN npm install
CMD ["ng", "serve", "--host", "0.0.0.0"]

从谷歌看来这是相当标准的。因此，我使用 Rancher Desktop 构建了这个映像，并将其作为我们应用程序的运行时环境，但并不是一个development环境。一方面，我们无法运行像

ng generate component

这样的命令，因为 ng 存在于容器内部，而不是在我们的本地计算机上。此外，正在运行的角度进程不会拾取和热加载我们对源代码所做的更改，因为这些更改存在于我们的本地计算机上，并且文件仅在 COPY 步骤中复制到容器中一次。最后，Visual Studio 没有从 npm install 中获取输出，因此它抱怨“找不到模块@angular/core”。

如何解决这些问题？我是否开始遵循错误的教程来完成我实际上并不想做的事情？

Answer 1

您专注于改进并从过去的错误中学习，这真是太好了——祝您好运！我将尝试分享一些有用的见解：

• Rancher Desktop是一个用于在桌面上管理容器和 Kubernetes 的工具。
• 使用 Dockerfile 时，您实际上是在容器内启动一个隔离的操作系统。虽然容器是隔离的，但它仍然与主机的资源（如网络和磁盘）交互，但在自己的环境中运行，并且进程隔离。
• 容器是从image（使用 Dockerfile 构建的）创建的。当您创建容器时，它会成为该映像的实例，保留映像中定义的所有配置。
• 如果您想确保您的团队在开发或运行源代码时避免本地设置问题，您可以执行以下操作：
  1. 提供清晰的文档以及设置和运行源代码的分步指南。这通常包含在

     README.md

     文件中。
  2. 本文可能会帮助您简化整个团队的开发环境设置：使用自定义 Makefile 简化 Angular 项目管理。

我认为使用 Rancher Desktop 来提供稳定的开发环境可能有点过度设计以满足您的需求。我分享的文章将提供一种更简化的方法来跨不同机器设置开发环境。

既然您对研究和开发感兴趣，这里有一些您可能会觉得有用的资源：

• Roadmap.sh是一个以有组织的方式学习各种技术的绝佳平台：https://roadmap.sh/
• 例如，查看他们的Docker路线图：https://roadmap.sh/docker 祝你好运