如何将React JS+Laravel 5.8单页应用部署至共享服务器？

兄弟，我之前帮人搞定过React+Laravel 5.8部署到共享主机的事儿，尤其是路由跳404的坑，给你整理一套实打实的步骤，照着来应该能解决：

• 先把你的React项目打包好：在React项目根目录执行 npm run build，生成的build文件夹里就是所有静态部署文件
• 处理Laravel项目：
  • 本地执行 composer install --optimize-autoloader --no-dev，提前把依赖装好（共享主机很多没权限在线装依赖）
  • 调整.env文件：设置APP_ENV=production、APP_DEBUG=false，配置好生产环境的数据库连接和APP_URL（填你共享主机的域名）
  • 本地执行 php artisan config:cache 和 php artisan route:cache，提前生成缓存文件

• 文件上传：
  • 把Laravel项目的所有文件（包括vendor文件夹）上传到共享主机的一个非公开目录（比如laravel-app，不能放在public_html里，不然会暴露敏感文件）
  • 把Laravel项目public文件夹里的所有内容，移动到共享主机的public_html目录（这是主机的公开访问目录）
  • 修改public_html/index.php里的路径：

    // 把原来的require __DIR__.'/../vendor/autoload.php';改成
    require __DIR__.'/../laravel-app/vendor/autoload.php';
    // 把$app = require_once __DIR__.'/../bootstrap/app.php';改成
    $app = require_once __DIR__.'/../laravel-app/bootstrap/app.php';
    

• 权限设置：
  • 给Laravel项目的storage和bootstrap/cache文件夹设置权限为755或者775（具体看主机的用户组配置，确保服务器能读写这些文件夹）

• 把本地Reactbuild文件夹里的所有文件，上传到public_html下的一个子目录（比如react-spa，或者如果你的整个前端都是React，也可以直接上传到public_html根目录，但建议单独放，避免和Laravel的静态文件冲突）
• 如果是上传到子目录，记得修改React的路由配置：使用BrowserRouter时加上basename属性，比如：

  <BrowserRouter basename="/react-spa">
    {/* 你的路由组件 */}
  </BrowserRouter>
  

这部分是最容易踩坑的地方，要同时处理Laravel路由和React SPA路由：

1. Laravel路由配置 #

• 所有API接口都写在routes/api.php里，默认会带上/api前缀，和前端路由彻底分开
• 在routes/web.php里添加一个兜底路由，让所有非API、非静态文件的请求都指向React的入口文件：

  Route::get('/{any}', function () {
      // 如果React放在public_html/react-spa下，就读取这个目录的index.html
      return file_get_contents(public_path('react-spa/index.html'));
  })->where('any', '.*');
  

2. 共享主机的.htaccess配置 #

修改public_html/.htaccess文件，确保所有前端路由请求都能被正确转发：

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

    RewriteEngine On

    # 处理API请求，直接转发到Laravel的index.php
    RewriteRule ^api/ index.php [L]

    # 处理静态文件，直接返回
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]

    # 所有其他请求转发到React的入口文件（如果React在根目录就写index.html，在子目录就写react-spa/index.html）
    RewriteRule ^ react-spa/index.html [L]
</IfModule>

• 先测试API接口：访问你的域名/api/xxx，确认能正常返回数据
• 测试前端路由：访问你的域名/react-spa/home（或者你设置的前端路由），确认能加载对应的React组件；然后刷新页面，看是否不会出现404错误（这一步能验证路由配置是否生效）

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