不同AWS环境下，如何让NextJS应用与WordPress网站同域名运行？

方法1：用CloudFront做统一入口（推荐） #

AWS CloudFront可以作为反向代理，把不同路径的请求路由到对应源站：

• 创建CloudFront分配，默认缓存行为指向EC2上的WordPress站点
• 新增缓存行为，路径模式设为/directory/*，源指向Amplify部署的Next.js应用域名
• 配置CloudFront自定义域名为www.example.com，同时更新域名DNS解析，将A/AAAA记录指向CloudFront分配域名
• 务必在Next.js的next.config.js里设置basePath: '/directory'，确保所有资源路径自动带上前缀，避免样式、静态资源加载失败
• 同步配置CloudFront的HTTPS证书（用AWS Certificate Manager免费申请），并调整缓存策略，避免静态资源缓存导致的更新延迟

方法2：调整EC2上的Web服务器代理配置 #

如果WordPress用Nginx托管，修改Nginx配置文件，将/directory路径的请求代理到Amplify地址：

location /directory/ {
    proxy_pass https://你的Amplify-Next.js域名/;
    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;
    # 重写响应中的绝对路径，避免资源加载错误
    sub_filter 'https://你的Amplify-Next.js域名/' '/directory/';
    sub_filter_once off;
}

• 若用Apache，可通过ProxyPass、ProxyPassReverse配合mod_substitute模块实现类似路径替换
• 同样需要在Next.js中配置basePath: '/directory'，保证生成的链接前缀正确

方法3：不推荐的代码迁移方案 #

把Next.js代码放到WordPress仓库子目录的方案并非最优：

• 会让两个项目的部署流程耦合，WordPress或Next.js的更新都可能互相影响
• EC2的资源可能不足以同时支撑WordPress和Next.js的Node服务，提升运维复杂度
• 会丢失Amplify自带的自动部署、CI/CD、边缘缓存等优势

之前代理失败的常见原因 #

你之前遇到的样式失效、URL异常，大概率是这两个问题：

• Next.js未配置basePath，导致资源路径仍为根路径（如/css/style.css），而非代理后的/directory/css/style.css
• 代理服务器未重写响应中的绝对URL，页面内的资源链接仍指向Amplify域名，引发路径错误或跨域问题

内容的提问来源于stack exchange，提问作者D.Lane