行业资讯
Windows下Vue3项目Docker容器化部署实战
1. 为什么要在Windows上跑Due3的Docker容器十年前我刚接触前端那会儿项目部署还停留在FTP直接拖文件的阶段。现在用Docker部署Vue项目就像把整个开发环境装进了集装箱——不管拿到哪台机器上都能原样运行。Windows用户可能觉得Docker是Linux的专利其实Win10/11通过WSL2已经能完美支持容器化部署。上周我帮团队新人部署测试环境时发现用Docker比传统方式省去了80%的环境配置时间。特别是当项目需要对接不同后端API时通过容器环境变量切换比手动改配置靠谱多了。下面这个方案经过我们团队5个Vue3项目的实战检验连node_modules都没装的新电脑也能10分钟跑起来。2. 环境准备与工具选型2.1 硬件和系统要求建议满足以下配置再继续Windows 10 版本2004或更高建议21H264位处理器带虚拟化支持BIOS里要开启VT-x/AMD-V至少4GB内存8GB更稳妥固态硬盘剩余空间20GB重要提示家庭版Windows需要手动安装WSL2内核更新包专业版/企业版直接可用2.2 必装软件清单按这个顺序安装WSL2微软官方Linux子系统wsl --installDocker Desktop带图形界面版本官网下载时注意勾选Use WSL2 backendVS Code可选但推荐装上Remote - Containers扩展我测试过不同版本组合当前最稳定的搭配是WSL2 Ubuntu 20.04 LTSDocker Desktop 4.25Node.js 18.x放容器里不装宿主机3. 项目容器化改造实战3.1 基础Dockerfile编写在Vue3项目根目录新建Dockerfile# 第一阶段构建环境 FROM node:18-alpine as builder WORKDIR /app COPY package*.json ./ RUN npm install --registryhttps://registry.npmmirror.com COPY . . RUN npm run build # 第二阶段生产环境 FROM nginx:1.23-alpine COPY --frombuilder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80几个关键点说明使用alpine镜像减小体积最终镜像不到50MB分阶段构建避免携带node_modules国内用户建议替换npm源3.2 Nginx定制配置新建nginx.conf文件server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } # 处理API代理 location /api/ { proxy_pass http://backend:8000/; proxy_set_header Host $host; } }这个配置解决了两个痛点前端路由的history模式404问题开发环境跨域问题生产环境建议走网关4. 容器编排与运行4.1 docker-compose方案推荐使用docker-compose.yml管理多服务version: 3.8 services: frontend: build: . ports: - 8080:80 volumes: - ./src:/app/src environment: - NODE_ENVdevelopment networks: - frontend-network backend: # 示例后端服务 image: postgres:15 environment: POSTGRES_PASSWORD: example networks: - frontend-network networks: frontend-network: driver: bridge启动命令docker-compose up -d --build4.2 开发模式热更新配置想要保留Vue的热更新特性需要调整Dockerfile开发版FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install CMD [npm, run, dev]启动时挂载卷docker run -v ${PWD}:/app -p 8080:8080 vue-dev5. 常见问题排雷指南5.1 性能优化方案问题现象Windows下文件操作巨慢解决方案将项目文件夹移到WSL2文件系统内如\\wsl$\Ubuntu\home或在Docker Desktop设置中启用Use the WSL2 based engine实测数据场景冷启动时间热更新延迟原生Windows2分18秒3-5秒WSL2挂载47秒1秒5.2 典型错误排查错误1WSL2启动失败检查BIOS虚拟化是否开启管理员身份运行bcdedit /set hypervisorlaunchtype auto错误2npm install卡住换国内源.npmrc添加registryhttps://registry.npmmirror.com或使用npm install --verbose查看卡在哪错误3端口冲突netstat -ano | findstr :8080找占用进程或修改docker-compose.yml的ports映射6. 进阶技巧分享6.1 镜像瘦身三连使用.dockerignore排除无用文件node_modules .git *.md .DS_Store多阶段构建时清理缓存RUN npm install npm cache clean --force选择小型基础镜像原镜像node:18~1GB优化后node:18-alpine~180MB6.2 生产环境部署要点HTTPS配置ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;健康检查healthcheck: test: [CMD, curl, -f, http://localhost] interval: 30s timeout: 10s retries: 3资源限制deploy: resources: limits: cpus: 0.5 memory: 512M这套方案在我们生产环境跑了半年多最直观的感受是再也不用听到在我机器上好好的这种话了。最近还把Jenkins流水线集成进去构建镜像推送到私服后测试环境自动拉取更新整个过程完全不需要人工干预。
郑州网站建设
网页设计
企业官网
