windows10 Docker 构建前端开发环境
一、 下载Docker桌面端
1. 下载地址：https://www.docker.com/products/docker-desktop/
2. 安装时勾选 **WSL 2 Backend**（推荐）或 **Hyper-V**
3. 安装完成后，重启系统并启动 Docker Desktop
4. 验证是否安装完成,执行下列命令，可看到对应版本
docker --version
docker-compose --version
二、 创建前端项目
1. 创建vite项目
a. 创建目录并进入项目目录
mkdir vite-docker-demo
cd vite-docker-demo
b. 初始化Vite项目
npm create vite@latest .
根据提示选择框架（如 Vue/React），后续操作以 Vue 为例
三、 配置Docker文件
1. 创建dockerfile文件
# Dockerfile.dev 可配置所需node版本
FROM node:18-alpine
# 备选 官方镜像可能下载不了（本人国内网络亲测）
# FORM docker.xuanyuan.me/library/node:18-alpine
# 设置工作目录
WORKDIR /app
# 复制依赖文件
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制源代码
COPY . .
# 设置 Vite 开发服务器监听所有地址
ENV HOST=0.0.0.0
# 启动命令
CMD ["npm", "run", "dev"]
2. 创建 docker-compose.yml
version: '3.8'
services:
frontend:
build:
context: .
dockerfile: Dockerfile.dev # 需要与上一条创建的文件名一致
ports:
- "5173:5173" # Vite 默认端口
volumes:
- .:/app # 挂载本地代码
- /app/node_modules # 防止覆盖容器内依赖
environment:
- WATCHPACK_POLLING=true # 解决文件监听问题
- CHOKIDAR_USEPOLLING=true
stdin_open: true # 允许交互式输入
tty: true # 保持容器运行
四、启动容器
1. 构建镜像
docker-compose build
2. 启动开发环境
docker-compose up
3. 访问应用
浏览器打开 http://localhost:5173
4. 无法访问解决
需要再vite.config.ts/js中设置
export default defineConfig({
server: {
host: "0.0.0.0", // 允许外部访问
port: 5173, // 确保与 Docker 映射一致
},
});
