如何配置Apache2实现Laravel(API)与React前端的域名路由

Hey Zach, let's get this sorted out for you! The issue with your separate site config is likely due to Apache's routing priority or conflicting rules—combining both React and Laravel into a single virtual host config will make this work smoothly. Here's a step-by-step solution:

Step 1: Enable Required Apache Modules #

First, make sure Apache has the modules needed for rewriting and aliasing:

sudo a2enmod rewrite alias

Step 2: Create/Edit Your Virtual Host Config #

Open or create your site's config file (usually at /etc/apache2/sites-available/mydomain.conf) and paste this configuration. Update the file paths to match where your React build and Laravel public directories are located:

<VirtualHost *:80>
    ServerName mydomain.com
    ServerAlias www.mydomain.com

    # Main document root points to your React build folder
    DocumentRoot /var/www/react/build

    # Configure React directory for frontend routing
    <Directory /var/www/react/build>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted

        # Rewrite rule for React: send all non-API, non-static requests to index.html
        RewriteEngine On
        RewriteCond %{REQUEST_URI} !^/api
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^ index.html [L]
    </Directory>

    # Map /api requests to Laravel's public directory
    Alias /api /var/www/laravel/public

    # Configure Laravel's public directory for API routing
    <Directory /var/www/laravel/public>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted

        # Laravel's rewrite rule to handle API routes
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^ index.php [L]
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/mydomain-error.log
    CustomLog ${APACHE_LOG_DIR}/mydomain-access.log combined
</VirtualHost>

Step 3: Fix File Permissions #

Ensure Apache has proper access to both directories:

sudo chown -R www-data:www-data /var/www/react/build /var/www/laravel/public
sudo chmod -R 755 /var/www/react/build /var/www/laravel/public

Step 4: Enable the Site & Restart Apache #

sudo a2ensite mydomain.conf
sudo systemctl restart apache2

Key Notes to Double-Check: #

• Laravel Routing: Make sure your Laravel routes are prefixed with api—either wrap them in Route::prefix('api')->group(...) in your routes file, or define routes directly like Route::get('/api/users', ...).
• HTTPS (Optional): If you're using SSL, duplicate the config for port 443, add your SSL certificate paths (e.g., from Let's Encrypt), and enable the SSL module with sudo a2enmod ssl.
• Why This Works: We set React as the default root, then use Alias to funnel all /api traffic to Laravel's public folder. The rewrite rules ensure both frontend and API routes handle their respective "not found" cases correctly, so refreshing a React route won't throw a 404, and Laravel can process API requests properly.

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