jaylenchen的思维随笔

使用开发容器内进行项目开发 ​

为了讲解如何达到一个解决方案落地实践的效果，我先给出了讲解过程的思路大纲，它可以帮助你理解我的思路是如何叙述的。 img

之前对于一些个人小工具和脚手架项目都是基于Rust去开发的，熟悉Rust的小伙伴肯定对Cargo这个东东也比较熟悉，它可以看成是一条集开发、测试、构建、文档生成等功能于一身的工具链，让开发者能够更聚焦于相关业务的开发，而不需要过多地关心各种工程工具的选择，基本上对于一般的项目就够用了。空闲之余，我就在想前端领域是否也存在类似的东东，它可以用在一些个人项目中达到我的小小期愿：不需要加入vitest来测试我的相关文件，不需要加入tsx就能编译ts文件。Bun的横空出世，让我看到了这样的希望，我可以使用Bun替换掉我之前的相关工具链的选择，一切如我所愿，它在我的macos上运行起来了。但遗憾的是，bun对windows的支持没那么友好，我希望将我的项目分享给我的小伙伴使用，他们在windows上运行我的项目并不能如期运行。基于此问题，我开始思考，是否能够有这么一样东西，能够帮我真正做到跨操作系统环境开发，我们不需要关心相关的操作系统环境，只要我的项目分享给了小伙伴，他们就可以直接将环境重建立刻跑起来，我们解放了Bun在操作系统的限制，能够更多地关心项目的内容了。于是乎我想到了Dev Container，我开始尝试构建Bun的Dev Container来解决我的问题。

Dev Container ​

img

什么是Dev Container？ ​

Dev Container本质上也是一个Docker 容器，它借助VSCode允许你在Docker容器内开发你的项目，实际的效果就像是在你的本机上使用vscode进行代码开发一样，不同的只是你的项目和vscode以及开发环境都是在Docker容器内了。

如何创建一个新的Dev Container? ​

定制一个dev container比你想象中的简单，你只需要在项目根目录当中建立一个.devcontainer的文件夹，并在该文件夹当中建立一份devcontainer.json的文件，就可以开始定制你的dev container了。其配置路径为项目根目录/.devcontainer/devcontainer.json。这就像你定制你的笔记本电脑的配置一样，给我一份配置清单，告诉我你要什么配置，我来帮你创建和制造你想要的笔记本电脑。

在使用devcontainer开发的时候，里头都会帮你定制创建好，而你要做的就是指定你心中所想要的开发环境、系统功能、软件服务。

环境依赖准备 ​

  • 安装本地Docker环境 开发容器本质上就是一个docker容器，因此为了将开发容器运行起来，我们需要在电脑本机上准备docker环境。

  • 安装VSCode Dev Container插件 为了能够更方便地使用开发容器这个功能，VSCode官方为我们准备了Dev Containers这个插件

配置容器名称 ​

给你的开发容器取个名称吧！

shell
{
  "name": "Bun开发环境"
}

配置基础环境 ​

做一个新的开发容器，首先需要清楚的一点是我们开发的项目是一个什么类型的项目，针对不同类型的项目我们需要不同类型的基础环境。比如，我们开发的项目是一个node项目，那么基础的环境就是nodejs运行时。为了达到能够拥有nodejs运行时基础环境这个目的，我们有两种方法达到这个目的。

  • 使用一个别人提前制作好的镜像

    这种方法适用于你已经知道了一个已有的基础环境镜像名称，你不需要过多定制化的配置。第三方已经开发好了，它就像一个软件一样可以直接去下载使用，第三方已经把软件开发好了放在应用商店里了。（参考：https://containers.dev/implementors/json_reference/#image-specific）。

    json
    {
  // 填写基础环境的docker镜像名称｜镜像的存储地址
  "image": "mcr.microsoft.com/devcontainers/base:alpine-3.18"
}

  • 使用一个自己写的Dockerfile文件

    这种方法适用于你想更多地定制化一个你自己的基础环境，也许你想从零构建一个全新的开发容器，又或许你想基于别人的镜像再定制一些你自己的内容。

    json
    {
  "build": {
    // 填写相对于.devcontainer的dockerfile文件名称路径
    "dockerfile": "./Dockerfile"
  }
}

配置更多功能 ​

一个新的开发容器除了运行项目的基础环境之外，可能还需要一些其他的功能，比如：Git源代码管理。这样的一些功能，VSCode Dev Container通过features字段给了我们选择额外的容器功能的机会。我们可以通过features去定制一些我们在开发当中需要的一些工具和软件功能。

json
{
  // 往容器里头增加更多的功能，比如安装了nodejs环境，还想往容器系统里添加更多的工具比如git都可以在这里加！
  "features": {
    // runtimes
    // clis
    // tools
  }
}

配置远程VSCode ​

由于我们使用了开发容器，此时我们本地的vscode其实只是相当于一个UI界面展示窗口，为了实现跟本地vscode使用时一样的插件效果，我们同样需要在开发容器内下载远程vscode的相关产检，这就好像我们在本地vscode中下载那些你熟悉的插件一样，比如主题插件、工具插件、框架插件等。幸运地是，vscode dev container为我们在.devcontainer.json提前提供了相关的配置项，我们只需要在配置customizations.vscode 的值就可以通过配置文件的方式配置远程vscode的相关插件、vscode本身的配置。

  • 配置远程VSCode插件

    json
    {
  "customizations": {
    "vscode": {
    // 定制容器内的vscode插件【跟本机的vscode插件下载方式一样】
    // 注意：本机的vscode安装插件跟容器内的vscode安装插件是两码事
      "extensions": []
    }
  }
}

  • 配置远程VSCode本身

    json
    {
  "customizations": {
    "vscode": {
      // 定制容器内的vscode配置【跟本机的vscode配置方式一样】
      "settings": []
    }
  }
}

怎么使用创建好的开发容器？ ​

现在我们定制好了我们的开发容器配置，就可以点击VSCode Dev Container插件图标选择“在容器中重新打开”，接下来开发容器就会被构建并运行起来，我们也可以看到项目被加载到了开发容器当中。接下来你只需要像你平时在本机开发项目一样去操作就好啦！

Dev Container还适用于哪些场景？ ​

  • 场景1：公司新人入职，从github/coding/gitlab当中拉取项目的源代码，然后拉取指定代码开发所需要的环境。就可以立马开发业务了，我们省去了一些繁琐环境配置的过程，新人只需要聚焦在代码的开发上。环境的配置对他们来说是一个黑盒。你只需要知道代码放在某个环境中就可以开发和跑起来就OK了。
  • 场景2：当你重置了自己的电脑，你可以大胆地，放心地清除你电脑上的开发环境。因为我们在重装电脑之后，可以很方便地将开发环境重新拉取回来。不需要再走下软件，安软件，测环境的流程。

总结 ​

这篇文章我通过了“跨操作系统共享基于bun开发的项目“这个主题切入，从其在windows下bun支持度不太良好的问题出发，我利用了dev container这个功能去解决了直接在windows下安装bun无法支持运行我分享给小伙伴bun项目的问题。接着我告诉了你什么是dev container，怎么去创建一个新的dev container，以及如何去使用你新创建的dev container。最后，我们还提供了一些其他的dev container应用场景。简而言之，dev container是一个解决方案，它解决了”明明在我的机器上可以跑起来“的问题。祝大家coding愉快！

参考 ​

基于MIT许可发布版权所有 © 2024-present jaylenchen