如何将请求导向两个子目录？Laravel与React路径隐藏转发需求

Hey there! I’ve tackled this exact setup a few times for full-stack Laravel + React apps, so let me break down how to make this work cleanly—assuming you’re using Nginx (the most common server for this stack, but I’ll throw in an Apache option too).

First, let’s assume your server’s directory structure looks like this:

/var/www/
├── laravel/       # Your Laravel project (with public/ subdir)
└── react/         # Your React project (build/ subdir after running npm run build)

Here’s the full Nginx server block config you’ll need (usually in /etc/nginx/sites-available/example.com):

server {
    listen 80;
    server_name example.com;
    charset utf-8;

    # Handle /api and /admin routes → forward to Laravel
    location ~ ^/(api|admin) {
        root /var/www/laravel/public;
        index index.php index.html;

        # Let Laravel handle routing for these paths
        try_files $uri $uri/ /index.php$is_args$args;

        # Process PHP requests (adjust PHP-FPM socket to match your version)
        location ~ \.php$ {
            fastcgi_pass unix:/run/php/php8.1-fpm.sock;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }
    }

    # Handle ALL other routes → forward to React
    location / {
        root /var/www/react/build;
        index index.html;

        # Critical for React single-page app routing (so frontend routes work)
        try_files $uri $uri/ /index.html;
    }
}

Key Notes for Nginx: #

• The ~ ^/(api|admin) regex ensures any request starting with /api or /admin gets sent to Laravel’s public directory. No messy /laravel in the URL!
• The try_files directive for Laravel lets it handle both static files and dynamic routes via index.php.
• For React, try_files $uri $uri/ /index.html makes sure frontend routes (like /profile) are handled by React’s router instead of returning a 404.

If you’re stuck with Apache, create a .htaccess file in your server’s root directory (not inside Laravel/React folders):

RewriteEngine On

# Forward /api and /admin to Laravel's public folder
RewriteRule ^(api|admin)($|/) laravel/public/$1$2 [L]

# Let Laravel handle its own routing
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^laravel/public/(.*)$ laravel/public/index.php/$1 [L]

# Forward all other requests to React's build folder
RewriteCond %{REQUEST_URI} !^/(api|admin)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ react/build/$1 [L]

# Support React single-page app routing
RewriteCond %{REQUEST_URI} !^/(api|admin)
RewriteRule ^ react/build/index.html [L]

Don’t forget these steps to avoid headaches:

• Laravel Config: Set APP_URL=http://example.com in your .env file (no /laravel suffix!).
• React Routing: Use BrowserRouter (not HashRouter) in your React app—this is required for clean, non-hashed URLs.
• Permissions: Make sure your web server user (www-data for Nginx/Apache) has read access to both laravel/public and react/build directories.
• HTTPS: If you’re using SSL, update the Nginx server block to listen on port 443 with your certificate files, or use Let’s Encrypt to set it up.

If you run into any weird issues (like 403s or PHP not executing), double-check your server’s error logs—they’ll usually point you to the problem (wrong file permissions, missing PHP-FPM, etc.).

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