Docker容器内运行Vite服务无法访问问题求助

1. 修复Vite服务器监听地址 #

Vite默认只绑定容器内部的127.0.0.1，导致宿主机无法访问。需要修改vite.config.js，让服务器监听所有网卡：

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        port: 3009,
        host: '0.0.0.0' // 新增该行，允许外部访问
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

2. 调整npm容器重启策略 #

当前restart: always会导致容器在命令退出后无限重启，开发环境建议改为restart: no：
修改docker-compose.yml中npm服务的配置：

npm:
    image: node:latest
    container_name: npm
    restart: no # 替换原always配置
    volumes:
      - ./src:/var/www/html
    ports:
      - 3000:3000
      - 3001:3001
      - 3009:3009
    working_dir: /var/www/html
    entrypoint: ['npm']
    networks:
      - laravel

3. 正确启动服务并排查日志 #

执行命令启动npm服务并运行dev命令：

# 前台运行，便于查看实时日志
docker-compose run --rm npm run dev

# 或后台启动后进入容器执行
docker-compose up -d npm
docker-compose exec npm run dev

查看容器日志确认服务状态：

docker logs npm

若日志显示依赖缺失，先执行docker-compose exec npm install安装依赖。

4. 验证端口与网络连通性 #

• 检查宿主机3009端口是否被占用：

# Linux/macOS
lsof -i :3009
# Windows
netstat -ano | findstr :3009

若端口被占用，可更换vite端口或释放占用进程。

• 测试容器IP连通性：
  先获取容器IP：

docker inspect npm | grep "IPAddress"

访问http://容器IP:3009，若能访问说明宿主机端口映射异常；若不能则容器内部服务未正常启动。

5. 确认Laravel模板资源加载 #

确保blade模板中正确使用@vite指令：

<!DOCTYPE html>
<html>
<head>
    @vite('resources/css/app.css')
</head>
<body>
    @vite('resources/js/app.js')
</body>
</html>

内容的提问来源于stack exchange，提问作者Adam Mason