在AWS托管React应用时，如何在子目录搭建WordPress博客？

1. 域名DNS基础配置 #

• 登录Namecheap域名管理后台，找到DNS记录设置：
  • 添加A记录：主机名留空（@），值填AWS服务的公网IP（若用EC2）；或添加CNAME记录：主机名@，值填CloudFront分配的域名（若用CloudFront托管React）。TTL设为默认或300秒。
  • 无需为/blog单独配置DNS记录（DNS不支持子目录路由），路由逻辑靠后续反向代理实现。

2. AWS端路由规则配置（分两种场景） #

场景A：用CloudFront+S3托管React应用 #

• 登录AWS CloudFront控制台，找到目标分发：
  • 进入行为标签，点击创建行为：
    • 路径模式填/blog/*
    • 源域名选择自定义源，填入Namecheap虚拟主机的服务器地址（如主机提供的CNAME或IP）
    • 源端口：虚拟主机支持HTTPS填443，否则填80
    • 缓存策略选择CachingDisabled（WordPress为动态内容，无需CloudFront缓存）
    • 开启转发所有请求头、查询字符串、Cookie（确保WordPress正常识别用户会话）
    • 保存行为，等待CloudFront分发更新（约10-15分钟）

场景B：用EC2+Nginx托管React应用 #

• 登录EC2服务器，编辑Nginx配置文件（通常在/etc/nginx/sites-available/目录下）：
  • 在React应用的server块中添加反向代理规则：

    location ^~ /blog {
        proxy_pass https://你的Namecheap虚拟主机地址;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    

  • 保存配置后，执行sudo nginx -t检查语法，无误后重启Nginx：sudo systemctl restart nginx

3. Namecheap虚拟主机上的WordPress配置 #

• 登录虚拟主机的cPanel或文件管理器，完成WordPress安装（若未安装）：
  • 登录WordPress后台，进入设置 -> 常规：
    • WordPress地址（URL）：填虚拟主机的原始访问地址（如https://your-host-name.namecheaphosting.com），确保虚拟主机可直接访问该地址
    • 站点地址（URL）：填https://example.com/blog
  • 保存设置后，编辑WordPress根目录的.htaccess文件（Apache服务器），添加路径规则：

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

  • 若虚拟主机用Nginx，联系主机商或编辑Nginx配置，确保/blog路径请求转发到WordPress根目录。

4. SSL证书配置 #

• AWS端：确保CloudFront或EC2的SSL证书覆盖example.com（可通过AWS Certificate Manager免费申请）
• Namecheap虚拟主机：申请覆盖example.com的SSL证书（Namecheap通常提供免费Let's Encrypt证书），确保HTTPS访问正常

验证配置 #

• 访问https://example.com确认React应用正常加载
• 访问https://example.com/blog确认WordPress站点正常显示，/blog/wp-admin后台登录功能正常

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