docker - How do I set up a local subdomain with Vite dev server alongside my Dockerized Laravel Inertia project? - Stack Overflo

admin管理员组

文章数量:1323225

I'm working on a Laravel Inertia + Vite + React project, all running inside Docker (with php-fpm and nginx). Right now, when I run npm run build, I can access the built version by visiting localhost in my browser.

However, I’d also like to have a separate subdomain, say dev.localhost, that serves the development version straight from Vite whenever I run npm run dev. My goal is to keep both accessible simultaneously localhost for the built production-like version, and dev.localhost for the hot-reloading dev server.

Does anyone have a straightforward way to configure nginx, Vite, and Docker so that these two domains don’t conflict? Any pointers or examples of a working setup would be super helpful. Thanks in advance!

These are my configs so far (feel free to write critics about my code if something does not make sense):
Nginx:

server {
    listen 80;
    listen [::]:80;
    server_name localhost;
    root /www/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass app:9000;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
        fastcgi_hide_header X-Powered-By;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

Vite:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
});

Docker-compose

services:
  web:
    build:
      context: ./web
    restart: unless-stopped
    volumes:
      - ${WWW}:/www
      - ./web/default.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "80:80"

  app:
    build:
      context: ./app
    volumes:
      - ${WWW}:/www

  database:
    image: mariadb
    restart: unless-stopped
    environment:
      MARIADB_ROOT_PASSWORD: pw
    volumes:
      - ./db:/var/lib/mysql
    ports:
      - "3306:3306"

  phpmyadmin:
    image: phpmyadmin
    restart: unless-stopped
    ports:
      - "8000:80"
    environment:
      PMA_HOST: database

本文标签：