使用 Docker 技术解决前端项目Node多版本并存问题

使用 Docker 技术解决前端项目Node多版本并存问题

背景:Node不同版本项目并存,导致经常使用 n、nvm 来切换 nodejs 版本很麻烦。

本文通过使用 Docker 技术,实现 node 多版本 并存启动项目,实现Nodejs版本完全隔离。

volta 也可以实现相同功能,本文主要讲 Docker 方向来实现。

主要思路

  1. 在项目根目录下创建 Dockefile 构建镜像
    1. FROM node:版本 > 控制Node版本号
    2. WORKDIR app > 设置 容器工作目录
      1. WORKDIR app
    3. 安装 PNPM
      1. RUN ["npm","install","pnpm","-g"]
    4. 暴露 5173 端口 (vite 启动的项目默认是 5173, 可以根据自己情况按需修改)
      1. EXPOSE 5173
    5. 容器运行时执行 npm run dev
      1. CMD ["pnpm","run","dev"]
  2. 构建 Nodejs 镜像
    1. docker build -t"node[版本号]" . , 可以存在 package.json 的 script 中
  3. 运行 Nodejs 容器
    1. docker run -it -p 5173:5173 -v ./:/app node[版本号]
    2. -p 将容器 5173 端口 暴露给宿主机,宿主机可以通过 5173(指定端口访问)
    3. -v ./:/app 卷技术,将项目挂载到容器/app目录下,实现联动,本地修改容器内对应的文件也会修改

解决方案

  1. 制作 Dockerfile
  1. 使用 npm run docker_build 构建镜像

  2. 使用 npm run docker 运行容器

注意 dev 要改成 vite --host , --host: 才可以使宿主机访问容器中的资源

启动成功 通过 localhost:5173 就可以访问

Network 不能直接访问(没强迫症的话可以不用管)

因为在 Docker 中使用默认的网络设置(通常是 bridge 网络),容器的 IP 地址通常是在私有网络上的局域网地址,宿主机默认情况下无法直接访问。这是由于 Docker 的网络隔离机制。

如果你想要在宿主机上直接访问容器内的服务,有几种方法可以实现:

  1. 使用端口映射

    就是 执行命令npm run docker 运行容器时,使用 -p 参数将容器内的端口映射到宿主机上。例如,将容器的 5173 端口映射到宿主机的 5173 端口:

    arduino 复制代码
    docker run -it -p 5173:5173
  2. 使用 Host 模式

    在运行容器时,使用 --network host 参数,这将使容器共享宿主机的网络命名空间,容器的网络将直接映射到宿主机上。

    bash 复制代码
    docker run --network host 

    使用 Host 模式可能会降低容器的网络隔离性,因为容器将与宿主机共享网络命名空间。

    选择其中一种方法取决于你的具体需求和安全策略。端口映射是最常见的方式,但 Host 模式可能在某些场景下更适用。

相关推荐
朝阳58137 分钟前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路1 小时前
GeoTools 读取影像元数据
前端
ssshooter1 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry2 小时前
Jetpack Compose 中的状态
前端
dae bal3 小时前
关于RSA和AES加密
前端·vue.js
柳杉3 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog3 小时前
低端设备加载webp ANR
前端·算法
LKAI.3 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi
刺客-Andy4 小时前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js
前端工作日常4 小时前
我对eslint的进一步学习
前端·eslint