Unable to see multiple .test domains using Laravel Sail (Docker)

I have two web applications built with Laravel and deployed locally using Laravel Sail. I utilize Vite and defined custome domains in my /etc/hosts file so I can access the first application at http://vantagemetalmap.test, as well as localhost:80 and the Vite page at localhost:5174

However, I cannot access the second application at http://thevillagex.test but I can access it at http://localhost:8081 and the secondary domain on 8082. I can also see the Vite server page on http://localhost:5174 and 5175. So this appears to definitively related to Apache's inability to resolve the domains to those ports on 127.0.0.1 - I am just unclear how to overcome that.

I'm on MacOS Sonoma
Using Laravel + Sail (Docker)

My Hosts File:

##
# 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

My .env for 2nd project

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="hello@example.com"
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

My 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

My vite.config.js

Note: I have also tried this without the HMR section.

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,
    }),
  ],
});

Solution

I do want to make sure you're aware that in your hosts file, you're calling thevillage.x instead of thevillage.test. But that's possibly not the only issue here..

When visiting a URL, browsers default to port 80. Since vantagemetalmap.test is using port 80, you'll need to use thevillagex.test:8081 to access it since I'd imagine you didn't set up a reverse proxy.

If you would like to just use thevillagex.test, check out NGINX Reverse Proxy.