开发环境配置Apache2子目录代理，解决React根目录识别报错问题

嘿，我来帮你搞定这个问题！咱们分React项目配置和Apache代理两部分来操作，一步步来：

一、让React把/app识别为根目录 #

假设你的React项目是用Create React App搭建的（大部分场景都是如此），按下面的步骤配置：

1. 开发环境适配 #

打开项目根目录下的package.json，修改start脚本，添加PUBLIC_URL=/app前缀：

"scripts": {
  "start": "PUBLIC_URL=/app react-scripts start",
  // 其他脚本比如build、test保持不变
}

这样启动开发服务器（npm start）后，React会自动把/app作为资源请求的根路径，不会再出现路径错误。

2. 路由适配（如果用React Router） #

如果你的项目用了React Router做页面跳转，得给路由容器加上basename属性，确保所有路由都基于/app：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/app">
      {/* 你的路由组件都放在这里面 */}
    </BrowserRouter>
  );
}

这一步很关键，不然刷新页面或者跳转路由时会出现404错误。

3. 生产构建适配 #

当你要构建生产版本时，同样要指定PUBLIC_URL，这样生成的静态文件里的资源路径都会自动带上/app前缀：
修改package.json里的build脚本：

"scripts": {
  "build": "PUBLIC_URL=/app react-scripts build",
  // 其他脚本不变
}

构建完成后，build文件夹里的文件就可以直接部署到Apache的/app子目录下了。

二、配置Apache2作为代理 #

首先得确保Apache启用了必要的模块，打开终端运行：

sudo a2enmod proxy proxy_http rewrite

然后重启Apache让模块生效：

sudo service apache2 restart

接下来修改Apache的站点配置文件，通常是/etc/apache2/sites-available/000-default.conf（如果是自定义站点就改对应配置文件），添加下面的配置内容：

<VirtualHost *:80>
    # 保留你原有的配置，比如DocumentRoot /var/www/html之类的

    # 开发环境：把/app开头的请求代理到React开发服务器的3000端口
    ProxyPass /app http://localhost:3000/app
    ProxyPassReverse /app http://localhost:3000/app

    # 生产环境：直接提供build后的静态文件（假设你把build内容放在/var/www/html/app）
    <Directory /var/www/html/app>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
        
        # 处理React单页应用的路由问题，刷新页面不会404
        RewriteEngine On
        RewriteBase /app
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /app/index.html [L]
    </Directory>
</VirtualHost>

配置完后再次重启Apache：

sudo service apache2 restart

最后验证一下 #

• 开发时：启动React开发服务器（npm start），然后访问http://localhost/app，就能看到你的React应用了，而且所有请求都会正确代理到3000端口。
• 生产时：停止React开发服务器，把build文件夹里的所有文件复制到/var/www/html/app目录下，访问http://localhost/app就能直接加载静态文件，而且单页路由也能正常工作。

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