apache如何配置react项目

配置Apache服务器托管React项目

确保Apache已安装并运行，React项目已构建（生成build文件夹）。以下步骤假设使用Ubuntu/Debian系统，路径可能需根据实际调整。

安装并启用必要模块

启用mod_rewrite模块以支持React路由：

sudo a2enmod rewrite
sudo systemctl restart apache2

配置虚拟主机

编辑Apache虚拟主机配置文件（如/etc/apache2/sites-available/your-site.conf），替换以下内容：

<VirtualHost *:80>
    ServerName your-domain.com
    DocumentRoot /var/www/react-project/build

    <Directory /var/www/react-project/build>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted

        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^ /index.html [L]
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

部署React构建文件

将React项目的build文件夹内容复制到Apache的web目录：

sudo cp -r /path/to/react-project/build /var/www/react-project/
sudo chown -R www-data:www-data /var/www/react-project

启用配置并重启Apache

启用站点配置并重启服务：

sudo a2ensite your-site.conf
sudo systemctl restart apache2

验证HTTPS（可选）

使用Let's Encrypt配置HTTPS：

sudo apt install certbot python3-certbot-apache
sudo certbot --apache -d your-domain.com

解决常见问题

路由404错误
确保mod_rewrite已启用，且虚拟主机配置中包含重写规则。

权限问题
检查build目录权限，确保Apache用户（如www-data）有读取权限。

环境变量
React中的环境变量需在构建时通过.env文件注入，Apache配置无法直接读取。