Docker-Compose部署后无法从浏览器访问SvelteKit前端应用

1. 容器网络与docker-compose配置修正 #

• 确保前后端服务归属同一自定义网络，规避默认桥接网络的隔离限制。在后端docker-compose中添加自定义网络，并让两个服务都加入：

  networks:
    app-network:
      driver: bridge
  
  services:
    laravel-api:
      # 原有配置保留
      networks:
        - app-network
    svelte-frontend:
      build:
        context: ../svelte-frontend  # 填写前端项目的正确相对路径
        dockerfile: Dockerfile
        target: dev  # 确认Dockerfile中dev阶段的配置完整
      ports:
        - "5173:5173"  # 对应Vite默认开发端口
      volumes:
        - ../svelte-frontend:/app  # 挂载本地代码实现热更新
        - /app/node_modules  # 避免本地node_modules覆盖容器依赖
      networks:
        - app-network
      environment:
        - VITE_API_URL=http://laravel-api:8000  # 用后端服务名作为API地址，容器内可直接访问
  

2. SvelteKit/Vite配置修正 #

• 调整vite.config.js，确保服务器允许外部访问，端口与映射一致：

  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [sveltekit()],
    server: {
      port: 5173,
      host: true,  // 允许容器外部访问，否则仅能在容器内访问
      strictPort: true
    }
  });
  

3. 前端Dockerfile(dev阶段)检查 #

• 确保Dockerfile的dev阶段正确设置工作目录、安装依赖并启动服务：

  FROM node:20-alpine AS dev
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  CMD ["npm", "run", "dev"]
  

  重点：WORKDIR必须为/app，保证挂载的本地代码与容器内路径匹配，避免src/app.html does not exist错误。

4. 端口冲突与容器内服务验证 #

• 排查本地端口占用情况：

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

• 启动容器后，进入前端容器内部验证服务状态：

  docker exec -it [前端容器ID/名称] sh
  curl localhost:5173  # 返回HTML内容说明容器内服务正常，问题出在端口映射或网络
  

5. API跨域与容器内访问规则 #

• 前端容器内调用后端API必须使用后端服务名+端口（如http://laravel-api:8000），不能用localhost（容器内的localhost指向自身）。
• Laravel后端需在config/cors.php中配置允许前端域名：

  'paths' => ['api/*'],
  'allowed_methods' => ['*'],
  'allowed_origins' => ['http://localhost:5173', 'http://svelte-frontend:5173'],
  'allowed_headers' => ['*'],
  

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