Vite创建的Svelte应用Docker部署后无法本地访问怎么办

核心问题点 #

• 核心根因：Vite服务默认仅监听容器内部回环地址127.0.0.1，未绑定0.0.0.0，宿主机通过Docker端口映射转发的请求无法被服务接收，无论怎么映射端口都无法访问。
• 现有启动逻辑存在冗余和不合理：已经执行npm run build生成了生产静态产物，但启动时调用vite serve启动的是开发服务，既没有复用构建产物，开发服务本身也不适合容器化生产部署场景。
• Dockerfile存在冗余步骤和缓存低效问题：全局安装vite属于多余操作，项目依赖安装阶段已经将vite装到本地node_modules中可直接调用；未优先拷贝依赖清单，构建缓存命中率低；未配置忽略规则，本地跨平台依赖、旧构建产物会被直接拷贝进镜像引发兼容问题。

具体修复操作 #

1. 首先在项目根目录新建.dockerignore文件，过滤不需要打进镜像的本地文件：

node_modules
dist
.git
.env
*.log
.DS_Store

2. 替换原有Dockerfile内容，优化构建逻辑，修正服务监听配置：

FROM node:16-alpine

WORKDIR /app

# 优先拷贝依赖配置文件，利用Docker分层缓存提升构建速度
COPY package*.json ./
RUN npm install

# 拷贝剩余项目源码
COPY . .
# 构建生产环境静态产物
RUN npm run build

EXPOSE 3000

# 启动生产预览服务，绑定0.0.0.0允许外部访问，指定3000端口
CMD ["npx", "vite", "preview", "--host", "0.0.0.0", "--port", "3000"]

如果你需要在容器内跑开发模式（仅本地调试用，不推荐生产环境使用），把CMD替换为CMD ["npx", "vite", "--host", "0.0.0.0", "--port", "3000"]即可。
也可以直接修改package.json里的start脚本为vite preview --host 0.0.0.0 --port 3000，之后Dockerfile里的CMD直接写["npm", "start"]即可。

3. 清理旧镜像缓存，重新构建并启动容器：

# 删除旧版本镜像避免缓存干扰
docker rmi -f todo
# 重新构建镜像
docker build -t todo .
# 启动容器，映射本地80端口到容器3000端口
docker run -d -p 80:3000 todo

启动完成后直接访问http://localhost即可正常打开应用。如果仍有异常，可以执行docker exec -it <容器ID> wget -qO- http://127.0.0.1:3000验证容器内部服务是否正常返回页面内容，容器内可访问但外部不通的话，一律是监听地址未正确绑定0.0.0.0导致的。

内容的提问来源于stack exchange，提问作者0szi