使用 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 模式可能在某些场景下更适用。

相关推荐
qq_589666057 小时前
TypeScript 完整入门教程
前端·javascript·typescript
用户0595401744611 小时前
LLM对话记忆测试踩坑实录:手工回归30分钟,自动化后2分钟发现3个隐藏Bug
前端·css
Ashley的成长之路12 小时前
前端性能优化实战手册·第2篇:资源加载策略全解
前端·性能优化·资源加载·http/3·性能优化实战·资源加载优化
浅水壁虎12 小时前
vue基础(第二章 )
前端·javascript·vue.js
界面开发小八哥12 小时前
界面控件DevExtreme v26.1新版亮点——支持Angular 22
前端·javascript·angular.js·devexpress·ui开发·devextreme
Getflare12 小时前
前端 + UI 设计 + AI:这不是三个工种,是一个新三角能力模型(附自检清单)
前端·人工智能·ui
oil欧哟12 小时前
我做了一个 Vibe Coding 术语学习站:VibeHub
前端·ai·agent·独立开发·vibe coding
审小匠OpenCPAi13 小时前
银行流水核查怎么自动化?单边匹配、双向勾稽与图聚类异常检测的工程对比
java·前端·人工智能·python·审计
Revolution6113 小时前
一个公共表格组件,是怎么一步步失控的
前端·前端工程化