在 CloudFront/S3 中托管 Angular 应用程序 *无需* S3 静态网站托管

Question

我正在使用 AWS CDK 构建一个 Angular 应用程序。这是为了我的工作，InfoSec 不赞成公开访问的 S3 存储桶。我想使用新的Distribution API 而不为网站托管配置 S3 存储桶。在这种情况下，“存储桶将作为存储桶来源处理，并将使用 CloudFront 的重定向和错误处理”。当我使用以下代码设置分发时，应用程序的根目录工作（即/index.html）但身份验证重定向（/login/callback）会产生“拒绝访问”XML 响应。如何告诉 CloudFront 将所有内容重定向到 index.html？

    const bucket = new Bucket(this, "WebUIBucket", {
      versioned: false,
      removalPolicy: RemovalPolicy.DESTROY,
      autoDeleteObjects: true,
    })

     new BucketDeployment(this, "DeployWebUI", {
      sources: [Source.asset(path.resolve(__dirname, "../../frontend/dist/myapp"))],
      destinationBucket: bucket,
    })

    const cloudFront = new Distribution(this, "CloudFront", {
      defaultBehavior: {
        origin: new S3Origin(bucket),
        viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      },
      domainNames: [this.frontendFQDN],
      certificate: this.certificate,
      priceClass: PriceClass.PRICE_CLASS_100,
      defaultRootObject: "index.html",
    }

    const zone = HostedZone.fromLookup(this, 'Zone', { domainName: 'my.tld' })

    new ARecord(this, "frontendDNS", {
      zone: this.zone,
      recordName: 'my-angular-app',
      target: RecordTarget.fromAlias(new CloudFrontTarget(cloudFront)),
    }

Answer 1

整理好了。感谢this SO question，我发现我必须将我的 CloudFront 分配更新为以下内容：

    const cloudFront = new Distribution(this, "CloudFront", {
      defaultBehavior: {
        origin: new S3Origin(bucket),
        viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      },
      domainNames: [this.frontendFQDN],
      certificate: this.certificate,
      priceClass: PriceClass.PRICE_CLASS_100,
      defaultRootObject: "index.html",
      errorResponses: [
        {
          httpStatus: 404,
          responseHttpStatus: 200,
          responsePagePath: "/index.html",
        },
        {
          httpStatus: 403,
          responseHttpStatus: 200,
          responsePagePath: "/index.html",
        },
        {
          httpStatus: 400,
          responseHttpStatus: 200,
          responsePagePath: "/index.html",
        },
      ],
    }

我在这里所做的是通过index.html 将错误 400、403 和 404 重定向回 Angular。