如何在Amazon Linux EC2实例上使用Apache创建并部署React应用

前置准备 #

• 已启动且网络正常的 Amazon Linux EC2 实例，安全组已开放80（HTTP）/443（HTTPS）端口
• 已获取实例SSH登录权限，拥有sudo执行权限

步骤1：安装基础依赖 #

登录EC2实例后先更新系统包：
sudo yum update -y

安装Apache服务 #

sudo yum install httpd -y
启动Apache并设置开机自启：

sudo systemctl start httpd
sudo systemctl enable httpd

此时访问实例公网IP可看到Apache默认测试页，代表服务运行正常。

安装Node.js环境（用于构建React项目） #

推荐安装LTS版本，以Node.js 18为例：

curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install nodejs -y

验证安装结果：

node -v
npm -v

步骤2：构建React生产包 #

方式一：使用已有React项目 #

将本地项目通过scp或git拉取到EC2实例中，进入项目根目录后安装依赖并构建：

npm install
npm run build

构建完成后会生成build目录，所有生产环境可用的静态资源都在该目录下。

方式二：从零创建测试React项目 #

npx create-react-app test-react-app
cd test-react-app
npm run build

步骤3：配置Apache服务部署React资源 #

移动构建产物到Apache根目录 #

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

配置Apache重写规则（解决React路由404问题） #

如果React项目使用BrowserRouter路由模式，直接刷新子路由会出现404错误，需配置mod_rewrite规则：

1. 开启Apache的rewrite模块：
   sudo sed -i '/^#LoadModule rewrite_module/s/^#//' /etc/httpd/conf.modules.d/00-base.conf
2. 编辑Apache默认站点配置文件/etc/httpd/conf/httpd.conf，找到<Directory "/var/www/html">区块，将原有AllowOverride None修改为AllowOverride All
3. 在站点根目录下创建.htaccess文件：
   sudo vi /var/www/html/.htaccess
   写入以下规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

调整目录权限 #

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

步骤4：重启Apache验证部署 #

sudo systemctl restart httpd
此时访问EC2实例的公网IP，即可正常访问React应用，子路由刷新也不会出现404问题。

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