Laravel Sail后端与Vite前端同时运行时无响应问题求助

解决步骤 #

1. 移除后端多余的端口绑定

你的后端docker-compose.yml中绑定了Vite默认的5173端口，但前端实际用的是8080，这个绑定会造成不必要的网络监听冲突，建议删除这一行：

# 从ports列表中移除该行
- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'

修改后重启Sail：

sail down && sail up -d

2. 调整Vite服务器配置

将前端vite.config.js的host改为0.0.0.0，避免本地回环地址导致的网络转发异常：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';

export default defineConfig({
  server: {
    host: '0.0.0.0', // 替换原有的localhost
    port: 8080,
    strictPort: true
  },
  plugins: [
    vue()
  ]
});

3. 修改后端端口（可选）

Mac上80端口可能存在系统级的隐性占用，可在.env文件中修改后端端口：

APP_PORT=8000

重启Sail生效：

sail down && sail up -d

4. 关闭Mac AirPlay Receiver

Mac的AirPlay Receiver会干扰端口转发，可在「系统设置-通用-AirPlay与接力」中关闭该功能，之后重启Docker和所有服务。

原始问题背景 #

我有一个由两个独立项目组成的应用：基于Laravel构建的后端，以及基于Vue和Vite构建的前端。此前我使用Homestead在自定义测试主机运行后端，Vite在http://localhost:8080运行前端。

尝试迁移到Laravel Sail运行后端后，若不启动Vite服务器，后端可正常工作；但一旦启动Vite服务器，后端就停止响应（请求超时）。即使停止Vite服务器，也必须重启Sail才能让后端恢复响应。

后端docker-compose.yml配置

version: '3'
services:
    custom.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: '%'
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - mysqladmin
                - ping
                - '-p${DB_PASSWORD}'
            retries: 3
            timeout: 5s
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local

前端vite.config.js配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';

export default defineConfig({
  server: {
    host: 'localhost',
    port: 8080,
    strictPort: true
  },
  plugins: [
    vue()
  ]
});

Docker状态（docker ps输出）

% docker ps
CONTAINER ID   IMAGE                    COMMAND                  CREATED       STATUS                 PORTS                                                  NAMES
c8e72d93f60a   sail-8.2/app             "start-container"        6 hours ago   Up 6 hours             0.0.0.0:80->80/tcp, 0.0.0.0:5173->5173/tcp, 8000/tcp   back-custom.test-1
05fccfa8fe25   mysql/mysql-server:8.0   "/entrypoint.sh mysq…"   6 hours ago   Up 6 hours (healthy)   0.0.0.0:3306->3306/tcp, 33060-33061/tcp                back-mysql-1

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