在Cloudways上通过Laravel部署CRA时出现503错误的解决方法

核心问题分析 #

你的.htaccess配置存在规则冲突：同时配置了静态文件路由和反向代理到3000端口，这会导致服务器无法正确处理请求，进而触发503错误。另外，生产环境部署CRA应该使用npm run build生成的静态文件，而非持续运行开发服务器（3000端口）。

步骤1：修复.htaccess配置 #

删除反向代理相关规则，保留静态文件路由逻辑，修改后的.htaccess如下：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To React Frontend (Static Build)
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^reactweb/(.*)$ /reactweb/build/index.html [L]
</IfModule>

说明：只针对/reactweb路径下的非文件/非目录请求，转发到CRA的build入口文件，避免和Laravel自身路由冲突。

步骤2：优化Laravel路由配置 #

如果要通过Laravel路由托管React应用，确保路由逻辑正确且无冲突，修改routes/web.php：

<?php

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Response;

// 处理React应用的所有子路径请求
Route::get('/reactweb/{any?}', function () {
    $indexPath = public_path('reactweb/build/index.html');
    if (!File::exists($indexPath)) {
        abort(404, 'React build file not found');
    }
    return Response::make(File::get($indexPath), 200);
})->where('any', '.*');

// 保留Laravel自身的其他路由（如果有）
// Route::get('/', function () {
//     return view('welcome');
// });

注意：添加{any?}支持/reactweb根路径访问，同时增加文件存在检查，方便排查问题。

步骤3：验证部署文件与权限 #

1. 确保已经在本地执行npm run build，并将build文件夹完整上传到服务器的public/reactweb/目录下。
2. 检查文件权限：运行以下命令（SSH连接服务器后）：

   cd /path/to/your/laravel/app/public/reactweb
   chmod -R 755 build/
   chmod 644 build/index.html
   

3. 清理Laravel缓存：

   php artisan cache:clear
   php artisan config:clear
   php artisan route:clear
   

步骤4：排除Cloudways环境问题 #

1. 确认服务器的mod_rewrite模块已启用：可以通过Cloudways控制面板的「应用设置」→「Web服务器」查看，或通过SSH执行apache2ctl -M | grep rewrite验证。
2. 检查服务器是否有进程占用3000端口（如果之前开了开发服务器）：

   lsof -i :3000
   # 如果有进程，用kill命令终止：kill -9 <PID>
   

3. 重启Cloudways应用和Web服务器：在控制面板中找到「重启应用」和「重启Web服务器」按钮执行。

关于Cloudways建议的Laravel Vite插件 #

Vite是替代Webpack的构建工具，如果你想迁移CRA到Vite可以尝试，但当前问题的核心是部署配置冲突，和构建工具无关，所以不需要强制切换。

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