Windows本地Docker模拟前端项目发版

技术文章大纲:Windows本地Docker模拟前端项目发版

目标与场景
  • 说明为何需要在Windows本地使用Docker模拟前端发版
  • 典型应用场景:开发环境与生产环境一致性验证、CI/CD流程本地调试
环境准备
  • Windows系统要求:Windows 10/11 Pro/Enterprise(支持Hyper-V)
  • 安装Docker Desktop并启用WSL 2后端
  • 基础工具:Git、Node.js(用于前端构建)
前端项目Docker化
  • 编写Dockerfile:基于Node镜像构建前端依赖与打包

  • 示例代码片段:

    dockerfile 复制代码
    FROM nginx:alpine
    COPY dist /usr/share/nginx/html
    COPY nginx.conf /etc/nginx/conf.d/default.conf
    EXPOSE 80
    CMD ["nginx", "-g", "daemon off;"]
双击打开Docker Desktop 图标
  • 等待左下角的小鲸鱼图标从"动画"变成绿色静止状态,并显示 Engine running。
  • 此时不要关闭它,让它最小化在后台运行即可。它是你的"服务器管理器"。
IDE终端命令执行
powershell 复制代码
- npm run build
- // build:构建镜像,-t:镜像名称,.当所在目录
- docker build -t image-name .
- // docker run:运行容器,-d:后台运行,容器端口必须跟nginx.conf里的listen端口一致
- docker run -d -p 电脑端口:容器端口 --name 容器名 镜像名
相关推荐
胡写代码2 分钟前
雪花 ID 传到前端就变了个数?我用全局 Long 转 String 一次收口
前端·后端
小蜗牛狂飙记4 分钟前
Windows 双击 Jar 包无反应,不用写 bat 脚本!Jarfix 一键修复(以 Struts2 扫描工具为例)
windows·struts·jar
沐言人生15 分钟前
82.4k 星!把十几万行代码变成知识图谱,新人终于不用硬啃了
前端·后端·github
溪语流沙16 分钟前
【Web全栈进阶】JWT无状态认证:签发、校验、刷新
前端·git·python·github
坐看风云变幻20 分钟前
Betaflight 开发环境搭建保姆级教程(Ubuntu / Windows+WSL / Docker 三方案 + 官方网址大全)
windows·ubuntu·docker·无人机·飞控·betaflight
在繁华处21 分钟前
2.1 上下文:决定 Agent 能力上限的关键
前端·人工智能·microsoft
ndsc_d22 分钟前
2026年有哪些好用的AI UI设计工具?主流工具功能和适用场景对比
前端·人工智能·ui·ai·设计师·ai ui·ai ui工具
零基础12327 分钟前
Docker 部署实战:从入门到精通
docker·容器
溪语流沙44 分钟前
【每天一个CSS | Day18】会摆动的拟物怀表:黄铜、皮革与催眠摆
前端·css3·html5
Lvan的前端笔记1 小时前
docker:基于docker的前端部署方案
前端·docker·状态模式