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

Question

我正在使用AWS CDK构建一个Angular应用程序。这是为了我的工作，InfoSec不赞成公开访问S3存储桶。我想使用新的分发API，而不配置S3存储桶用于网站托管。在这种情况下；该桶被处理为桶原点并且CloudFront的重定向和错误处理将被使用"；。当我使用下面的代码设置分发时，应用程序的根起作用(即/index.html(，但身份验证重定向(/login/callback(产生"0"；访问被拒绝"；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

已排序。由于这个SO问题，我发现我必须将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。