接入CloudFront后WordPress管理后台、路由及图片异常求助

背景 #

已在AWS EC2上部署WordPress，搭配ALB和RDS，访问ELB域名（如Instan-Wordp-adfzcxvaqwer-52453245.us-east-1.elb.amazonaws.com）时站点正常，可登录后台、创建内容。当时的UserData配置如下：

userData.addCommands(
  "yum update -y",
  "yum install -y httpd php php-mysqlnd",
  "systemctl start httpd",
  "systemctl enable httpd",
  "cd /var/www/html",
  "wget https://wordpress.org/latest.tar.gz",
  "tar -xzf latest.tar.gz",
  "cp -r wordpress/* /var/www/html/",
  "rm -rf wordpress",
  "rm -rf latest.tar.gz",
  "chown -R apache:apache /var/www/html/",
  "sudo cp /var/www/html/wp-config-sample.php /var/www/html/wp-config.php",
  `sudo sed -i "s/'database_name_here'/'wordpress'/g" /var/www/html/wp-config.php`,
  `sudo sed -i "s/'username_here'/'admin'/g" /var/www/html/wp-config.php`,
  `sudo sed -i "s/'password_here'/'password#1'/g" /var/www/html/wp-config.php`,
  `sudo sed -i "s/'localhost'/'${props.db.dbInstanceEndpointAddress}'/g" /var/www/html/wp-config.php`,
  "systemctl restart httpd",
  "sudo usermod -a -G apache ec2-user",
  "sudo chown -R ec2-user:apache /var/www",
  "sudo chmod 2775 /var/www",
  "sudo find /var/www -type d -exec chmod 2775 {} \;",
  "sudo find /var/www -type f -exec chmod 0664 {} \;",
);

引入CloudFront和GoDaddy自定义域名（mygreatdomain.xyz）后出现问题，执行的配置步骤：

1. 创建Hosted Zone #

this.hostedZone = new HostedZone(
  this,
  this.setConstructName("HostedZone"),
  {
    zoneName: this.domainName,
  },
);

2. 创建证书 #

this.certificate = new Certificate(
  this,
  this.setConstructName("Certificate"),
  {
    domainName: this.domainName, // Root domain (mygreatdomain.xyz)
    subjectAlternativeNames: [`*.${this.domainName}`], // Wildcard domain (*.mygreatdomain.xyz)
    validation: CertificateValidation.fromDns(this.hostedZone),
  },
);

3. 创建CloudFront分发及A记录 #

private createCloudfrontDistributionAndARecord(
  alb: ApplicationLoadBalancer,
  props: InstanceStackProps,
): void {
  const distribution = new Distribution(
    this,
    this.setConstructName("Distribution"),
    {
      defaultBehavior: {
        origin: new LoadBalancerV2Origin(alb, {
          protocolPolicy: OriginProtocolPolicy.HTTP_ONLY,
        }),
        allowedMethods: AllowedMethods.ALLOW_ALL,
        viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        cachePolicy: CachePolicy.CACHING_DISABLED,
        originRequestPolicy: OriginRequestPolicy.ALL_VIEWER,
      },
      domainNames: [`www.${this.domainName}`, this.domainName],
      certificate: props.certificate,
    },
  );

  // A Record for www
  new ARecord(this, "ARecord", {
    zone: props.hostedZone,
    target: RecordTarget.fromAlias(new CloudFrontTarget(distribution)),
    recordName: `www.${this.domainName}`,
  });

  // A Record for root domain
  new ARecord(this, "RootARecord", {
    zone: props.hostedZone,
    target: RecordTarget.fromAlias(new CloudFrontTarget(distribution)),
    recordName: this.domainName, // root domain
  });
}

4. 修改wp-config.php配置域名 #

在UserData中添加：

`sudo sed -i "/define( 'DB_COLLATE', '' );/a define('WP_SITEURL', 'https://${this.domainName}');" /var/www/html/wp-config.php`,
`sudo sed -i "/define( 'DB_COLLATE', '' );/a define('WP_HOME', 'https://${this.domainName}');" /var/www/html/wp-config.php`,

当前问题 #

站点可正常渲染页面，但图片全部无法显示，且无法登录WordPress管理后台。

排查解决方向 #

• 替换数据库中的旧域名地址
  WordPress数据库中存储的资源链接（如图片）仍指向原ELB域名，需执行SQL批量替换：

  UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://你的旧ELB域名', 'https://mygreatdomain.xyz');
  UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'http://你的旧ELB域名', 'https://mygreatdomain.xyz');
  

  同时在wp-config.php中添加强制HTTPS登录和后台的配置：

  define('FORCE_SSL_ADMIN', true);
  define('FORCE_SSL_LOGIN', true);
  

• 配置WordPress识别CloudFront的HTTPS请求
  CloudFront向ALB转发请求用的是HTTP，需让WordPress识别前端的HTTPS协议，在wp-config.php中添加：

  if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
      $_SERVER['HTTPS'] = 'on';
  }
  

• 优化CloudFront行为配置
  为WordPress后台路径（/wp-admin/*、/wp-login.php）单独创建行为，确保：

  • 允许所有HTTP方法（包括POST，登录依赖POST请求）
  • 禁用缓存（使用CachePolicy.CACHING_DISABLED）
  • 转发所有请求头（使用OriginRequestPolicy.ALL_VIEWER）
    避免缓存导致的登录状态异常。

• 确认DNS解析和证书状态
  检查GoDaddy域名的NS服务器已指向Route53 Hosted Zone的NS地址，确保DNS解析生效；确认ACM证书已通过DNS验证，CloudFront分发的证书状态正常。

• 检查文件权限
  重新设置uploads目录权限，确保Apache用户可读写：

  chown -R apache:apache /var/www/html/wp-content/uploads
  chmod -R 755 /var/www/html/wp-content/uploads
  

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