构建基于docker的开发环境

FanetheDivine
229 阅读4分钟

由于公司的node、依赖版本与我个人的冲突,决定使用docker构建自己的开发环境.

特别提醒

我的电脑16g内存 同时开docker vscode chrome时90%内存被使用

docker基本概念

容器 ≈虚拟机.提供一个Linux运行环境.容器可以被保存为镜像.
镜像 ≈虚拟机镜像.可以通过镜像创建一个容器.镜像是不可变的.
数据卷 ≈软链接.数据卷挂载至容器内的文件夹后,此文件夹的内容与数据卷始终保持一致.数据卷创建时是空的,需要链接至一个容器再将内容复制进去(可以使用临时容器).
Dockerfile 定义构建一个镜像的方法.

设置镜像源

创建镜像,必须基于另一个镜像.按照gpt所说,可以使用docker save导出镜像文件,docker load导入本地镜像,但似乎网络上并没有直接的镜像可供下载,必须通过dockerhub.但dockerhub访问有困难,需要设置docker镜像源.(我自己的网络访问不了dockerhub,但公司的wifi可以,就离谱)
可以看这篇文章,构建docker镜像源代理,也可以使用国内的镜像源(如果有的话).
在docker中设置镜像源
屏幕截图 2024-08-14 095646.png

在容器中进行开发

在vscode中安装插件Dev Container.

从git中创建容器

这两个按钮作用一样
屏幕截图 2024-08-15 202048.png
点击后,可以输入仓库地址或直接选择一个远程仓库
屏幕截图 2024-08-15 204617.png
如果项目内没有相关配置,会要求添加配置文件.基础容器搜node随便选一个,版本默认即可,特性看需要,一般不用选.
为.devcontainer/devcontainer.json增加以下配置

  "initializeCommand":"docker volume create pnpm-store",
  "postCreateCommand": "sudo chown -R node:node /workspaces /.pnpm-store && pnpm config set store-dir /.pnpm-store && pnpm install",
  "mounts": [{"source":"pnpm-store","target": "/.pnpm-store","type": "volume"}]

作用是允许修改项目内的文件、设置pnpm环境变量并下载依赖.此外,还创建和挂载数据卷,并将pnpm公共存储设置在卷中,好处是多个项目可以共享一个pnpm公共存储.docker会跳过同名卷的创建,所以不会覆盖数据卷的内容.此外还需要注意,通过corepack enable获取的pnpm和项目内使用的pnpm不是同一个,项目内的pnpm是vscode创建容器时添加的,可以直接用.Dockerfile中设置的环境变量和store-dir都不会作用于项目内的pnpm.
更改配置后,会弹出消息重建容器,点击即可.如果错过消息可以点这里
屏幕截图 2024-08-15 210912.png
现在可以在容器中进行开发了

为本地项目创建开发环境

默认情况下,vscode在容器内打开本地项目会将容器内外连接起来(包括node_modules和各类缓存),IO频繁,这是不可接受的.
按F1搜索Dev Containers: Add Dev Container Configuration Files,点击后添加开发容器配置文件.
创建.devcontainer/Dockerfile 内容如下

FROM 基础镜像
ARG NAME
COPY . /workspaces/$NAME

基础镜像采用.devcontainer.json中image的配置即可.
.devcontainer/devcontainer.json中移除image项,添加以下项

  "build": {
    "context": "..",
    "dockerfile": "Dockerfile",
    "args": {
      "NAME": "${localWorkspaceFolderBasename}"
    }
  },
  "initializeCommand": "docker volume create pnpm-store",
  "postCreateCommand": "sudo chown -R node:node /workspaces /.pnpm-store && pnpm config set store-dir /.pnpm-store && pnpm install",
  "mounts": [
    {
      "source": "pnpm-store",
      "target": "/.pnpm-store",
      "type": "volume"
    }
  ],
  "workspaceMount": ""

作用是使用dockerfile构建镜像,解除容器与原文件夹的连接,以及pnpm相关内容(与上一节相同).
修改配置后点右下角通知,在容器中打开项目即可.错过通知可以直接点加号
屏幕截图 2024-08-17 183134.png

再次进入开发环境

关闭窗口后,容器也会关闭.通过dev-container再次进入容器. 屏幕截图 2024-08-17 183536.png

如果需要打包产物

为mounts配置增加一项

{ "source": 容器外产物路径, "target":容器内产物路径 , "type": "bind" }

比如

    {
      "source": "${localWorkspaceFolder}/dist",
      "target": "/workspaces/${localWorkspaceFolderBasename}/dist",
      "type": "bind"
    }

使用代理

docker容器中 host.docker.internal 通过这个url访问宿主机的服务(可以理解成宿主机中的127.0.0.1)
我在宿主机中设置了代理 那么就可以使用这个命令为git设置代理 成功访问github

git config --global http.proxy http://host.docker.internal:7890

在容器中使用vite

vscode会自动对端口进行映射 但是vite可能不会监听本地端口 导致无法访问 需要启动命令改成

vite --host 0.0.0.0
avatar
文章
阅读
粉丝