apache如何配置react项目

配置 Apache 服务器托管 React 项目

安装并启用 Apache 模块
确保 Apache 已安装并运行。启用 mod_rewrite 模块以支持 React Router 的路由重定向：

sudo a2enmod rewrite
sudo systemctl restart apache2

构建 React 项目
在 React 项目目录下运行生产构建命令，生成静态文件：

npm run build

构建后的文件位于 build 目录中。

配置 Apache 虚拟主机
将 build 目录内容复制到 Apache 的默认托管目录（如 /var/www/html）：

sudo cp -r build/* /var/www/html/

设置 .htaccess 文件
在托管目录（如 /var/www/html）创建或修改 .htaccess 文件，确保 React Router 的路由正常工作：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

调整目录权限
确保 Apache 用户（如 www-data）对托管目录有读取权限：

sudo chown -R www-data:www-data /var/www/html/
sudo chmod -R 755 /var/www/html/

重启 Apache 服务
应用配置更改：

sudo systemctl restart apache2

可选：配置子目录托管

若需将 React 项目部署到子目录（如 /var/www/html/myapp），需修改 package.json 中的 homepage 字段：

"homepage": "/myapp"

重新构建项目后，将 build 目录内容复制到子目录，并在 .htaccess 中调整 RewriteBase：

RewriteBase /myapp

验证配置

访问服务器 IP 或域名，确认 React 项目加载正常且路由无误。若出现 404 错误，检查 .htaccess 和文件权限设置。