尝鲜: win11使用docker解决前端本地开发兼容问题, 最后放弃一个坏的开始 win11 要安装docker，先要

一个坏的开始

win11 要安装docker，先要启用hyper-v，但我是家庭版，默认没有这个功能，但这个好解决，网上一搜一大把，终于将hyper-v安装成功了。但这是噩梦的开始。

hyper-v安装成功后，我无法上网了。莫慌，手机搜索一下，于是开始了我漫长的网络恢复之旅：

网上搜到一个说是没创建虚拟交换机，我一看，是哦，确实没自动创建，于是我手动创建了一个。再一刷浏览器，可以上了，默默的夸了自己一句，我好厉害。
好景不长，才上了几分钟的网，又断了。咋回事？是我没重启吗？于是重启。重启完毕，哈哈，又可以上网了，默默的再夸了自己一句，我真真好厉害。结果几分钟后，又又又无法上网了。是谁，谁在玩我？有意思吗？ >^.^?
再次用手机搜索，这次是一个漫长的重试，搜索，重试，搜索的过程，长到......算了，你们不会想知道。
无法上网的症状是：网络连接正常，网络诊断也正常，ping正常，但chorem,edge不能上网，firefox好像没有受影响，微信之类的没有受影响
最后找到一个说是dns导致的，且评论中还有反馈有同样问题，且是小米路由器的，我好像也是小米路由器。不管了，死马当活马医，不然只能重装系统了。不幸中的万幸是，手动设置了dns之后，浏览器的网络恢复正常了。

不算长的摸索与测试

安装docker-destop
更换镜像位置
限制wsl2占用的内存等
docfile的编写
docker-compose.yml的编写
以及创建vue3项目测试
到最后的失望和放弃

为什么会失望和放弃？

好的地方:

确实能解决环境不统一问题

失望的地方:

win要安装上docker，太麻烦了，如果出现网络问题，无法确定怎么解决，相比之下，nvm之类的工具，好似更具性价比。
vite无法及时热重载，只能通过轮询的方式，且性能有大问题，导致我的笔记本在大冬天的，风扇也是狂转。并且由于套了一层的缘故，让我感觉浏览器刷新都变慢了。

理想是丰满的，现实是残酷的，总的来说是，可用。但非常，非常不好用。不知道非win系统的人，是否会好用。

完成的配置

自定义镜像

Dockerfile

FROM node:20-slim

# 设置npm镜像
RUN npm config set registry https://registry.npmmirror.com

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
# 启用corepack, Corepack用来管理. 如: yarn、pnpm
# Corepack 默认与 Node.js 14.19.0 和 16.9.0 一起分发，所以保证 Node.js 版本大于等于 16.9.0。
RUN corepack enable
# 将docker容器的/app目录设置为工作目录
WORKDIR /app

# 最后通过如下语句构建. nodejs20 是这个镜像的名称, v1 是这个镜像的版本, . 表示在当前目录下查找 Dockerfile 文件来构建镜像
# docker build -t nodejs20:v1 .

通过docker-compose启动容器

docker-compose.yml

version: "3.8"

# 定义网络
networks:
  nodejsnet: # 定义网络名称
    driver: bridge # 定义网络类型

# 定义服务
services:
  # 定义一个名为nodejs的服务
  nodejs:
    image: nodejs20:v1 #镜像名称，就是制作镜像时候的名字
    container_name: nodjs #容器名称，可以省略。系统会使用默认名字
    volumes:
      - .:/app #这是重点，将当前docker-compose.yml所在目录映射到容器系统中的/app目录。中间用“:”表示映射关系
    stdin_open: true #打开标准输入，可以接受外部输入
    tty: true # 模拟一个伪终端
    environment: # 设置环境变量
      - NODE_ENV=development
    ports:
      - 5173:5173 # 前边是本地端口，后边是容器端口，意识是把本地5173映射到容器5173端口
    networks:
      - nodejsnet # 指定使用的网络
    # 指定容器启动后默认执行的命令
    # command: sh -c "pnpm install && pnpm run dev" # 执行依赖npm安装以及启动服务
    command: sh
    # 指定容器重启策略. no是默认的重启策略，表示在任何情况下都不会重启容器
    restart: "no"


# 通过如下命令启动容器
# docker-compose up -d

项目就是用vue命令创建的基本项目，需要将docker-compose.yml放到创建好的项目根目录，然后在项目根目录启动容器，再通过VSCode的Remote Development,进入docker容器中，然后就可以像在本地一样开发了，奈何隔了一层容器之后，vite性能存在问题点这里查看官方说明。开始我以为，稍微差点也能接受，但实际一用，这差的不是一点，是天地之别。再见!!

参考资料

docker compose 配置文件 .yml 全面指南 - 知乎 (zhihu.com)

docker compose可以读取当前目录的文件吗_docker-compose 获取当前目录-CSDN博客

docker-compose logs 查看实时日志（日志最后的N行、某刻后日志）实践笔记_docker-compose logs -f-CSDN博客

vue3-环境搭建(docker版本) - 掘金 (juejin.cn)

2022 前端包管理方案-pnpm 和 corepack - 掘金 (juejin.cn)

Node.js Corepack - 掘金 (juejin.cn)

Vue.js 在 Docker 容器中运行 Vite 开发服务器|极客教程 (geek-docs.com)

使用 Docker | pnpm

如何选择 node.js 的 Docker 镜像 - 掘金 (juejin.cn)