如何将React前端搭配Laravel后端部署至cPanel/虚拟主机

直接给你两种生产环境常用的方案，根据自己的运维能力选就行：

方案一：同域同项目部署（零额外配置，优先选这个） #

• 代码存放位置：直接在现有Laravel项目根目录新建resources/react文件夹放React源码就行，和原本的resources/views（blade模板目录）平级。构建配置（Vite/Webpack）把编译入口指向这个目录下的main.jsx，构建产物直接输出到Laravel默认的public目录。
• 生产部署逻辑：不用改你原来的Laravel部署流程，npm run build出来的index.html、打包后的js/css、静态资源全扔到public目录下，最后在routes/web.php的最末尾加个兜底路由，把所有非接口的GET请求交给React入口处理就行，代码参考：

// 注意：*一定要放在所有自定义路由的最后面*，不然会覆盖原本的路由规则
Route::get('/{any}', function () {
    return file_get_contents(public_path('index.html'));
})->where('any', '^(?!api).*$');

• 这个方案最省事：不用额外配跨域、不用加新域名/反代规则，原来的SSL、域名配置全复用，接口直接写相对路径/api/xxx就能调，要是还有没迁移完的Blade页面，提前在兜底路由前面把对应路径的路由写好就行，互不干扰。

方案二：前后端完全分离部署（适合团队协作、后续扩容场景） #

• 代码存放位置：React项目完全独立成单独的代码仓库，不用放到Laravel的项目目录里，两边代码物理隔离。
• 生产部署两种选择：
  • 还用现有自有主机的话，给前端单独配一个Nginx虚拟主机，比如前端绑www.yourdomain.com，后端接口绑api.yourdomain.com，React构建后的dist产物放到前端站点对应的根目录（比如/var/www/react-site/dist）就行，Nginx配静态资源规则，后端Laravel那边加下跨域配置允许前端域名访问。
  • 后续流量上来了，直接把React构建产物传到对象存储开CDN就行，不占原有主机的计算资源，后端只要把CDN域名加到跨域白名单就可以。

注意别把React未编译的源码直接丢到公网可访问的目录，生产环境只上传npm run build输出的构建产物，不然会有源码泄露风险，还会因为加载未编译的大体积源文件拖慢页面速度。

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