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

Posted 2023-02-19

【中文标题】在 CloudFront/S3 中托管 Angular 应用程序 *无需* S3 静态网站托管

【英文标题】：Host Angular app in CloudFront/S3 *without* S3 static website hosting

【发布时间】：2022-01-08 12:45:54

【问题描述】：

我正在使用 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)),
    

【参考方案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。

【讨论】：

我不能直到明天。 :D