无法使用 Laravel Sail (Docker) 查看多个 .test 域

Question

我有两个使用 Laravel 构建的 Web 应用程序，并使用 Laravel Sail 在本地部署。我利用 Vite 并在 /etc/hosts 文件中定义了自定义域，这样我就可以访问位于 http://vantagemetalmap.test 的第一个应用程序，以及 localhost:80 和位于 localhost:5174 的 Vite 页面

但是，我无法通过http://thevillagex.test访问第二个应用程序，但可以通过http://localhost:8081和8082上的辅助域访问它。我还可以在http上看到Vite服务器页面： //localhost:5174 和 5175。所以这似乎与 Apache 无法将域解析到 127.0.0.1 上的这些端口有关 - 我只是不清楚如何克服这个问题。

• 我使用的是 MacOS 索诺玛
• 使用 Laravel + Sail（Docker）

我的主机文件：

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1   localhost
255.255.255.255 broadcasthost
::1             localhost

# Docker Applications
127.0.0.1 vantagemetalmap.test
127.0.0.1 thevillage.x

我的第二个项目的 .env

APP_NAME=thevillagex.test
APP_SERVICE='thevillagex.test'
APP_PORT=8081
APP_ENV=local
APP_KEY=base64:******
APP_DEBUG=true
APP_TIMEZONE=UTC
APP_URL=http://thevillagex.test

APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US

APP_MAINTENANCE_DRIVER=file
APP_MAINTENANCE_STORE=database

BCRYPT_ROUNDS=12

LOG_CHANNEL=stack
LOG_STACK=single
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

FORWARD_DB_PORT=3308
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=****
DB_USERNAME=****
DB_PASSWORD=****

SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null

BROADCAST_CONNECTION=log
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database

CACHE_STORE=database
CACHE_PREFIX=

MEMCACHED_HOST=127.0.0.1

REDIS_CLIENT=phpredis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=log
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

VITE_APP_NAME="${APP_NAME}"
VITE_PORT=5175
BROWSER=safari
BROWSER_ARGS=--incognito

我的 Docker-compose.yml

services:
    thevillagex.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.3
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.3/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-8081}:80'
            - '${VITE_PORT:-5175}:${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:-3308}: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

注意：我也尝试过在没有 HMR 部分的情况下进行此操作。

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

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 5175,
    hmr: {
      host: 'thevillagex.test',
      port: 5175,
    },
  },
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
});

Answer 1

我确实想确保您知道在您的主机文件中，您正在调用

thevillage.x

而不是

thevillage.test

。这不是问题所在，但我希望你知道。

但是当您访问 URL 时，浏览器默认使用端口 80。由于

vantagemetalmap.test

使用端口 80，因此您需要使用

thevillagex.test:8081

来访问它，因为我想您没有设置反向代理。

如果您只想使用

thevillagex.test

，请查看 NGINX 反向代理。