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 容器名 镜像名
相关推荐
CCIE-Yasuo4 分钟前
网络安全-学习web开发-列表、标签
前端·学习·web安全
小大宇8 分钟前
Vue知识点-ElementPlus-06 单选+多选+下拉+日期选择
前端·vue.js·elementui
用户114818678948410 分钟前
Nuxt 3 学习版 Demo:跟着做一遍,从跑起来到自己会改
前端
java_logo16 分钟前
Docker 部署 DPanel:轻松搭建轻量容器管理平台
运维·docker·容器·podman·容器管理·dpanel·轩辕镜像
死磕音视频23 分钟前
Open WebUI 入门:用 Docker 装上本地对话界面并连接 Ollama
docker·ollama·本地大模型·open webui
分布式存储与RustFS30 分钟前
CI 老被 Docker Hub 的 429 卡住,自建 Registry 把镜像搬进内网
运维·docker·开源·镜像仓库·对象存储·ci·rustfs
hiahiahia12333 分钟前
Streaming Model Output
开发语言·前端
paopaokaka_luck34 分钟前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩44 分钟前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
asaotomo1 小时前
截图识题、AI 讲解、笔记沉淀:Chrome 扩展体验
前端·chrome·笔记