如何使用自定义域将云端转发到 HTTP API

Question

我在 / 路径上使用 s3 和 cloudfront 提供静态网站。

我想通过 HTTP API 提供 /api/*。

我的静态网站已通过 cloudfront 正确配置。而且我还配置了custom domain to HTTP api with cdk

但是当我尝试访问我的 http API 时，我得到 404 not found 响应。基本上 Cloudfront 不会将我的 /api/* 请求转发到 HTTP API。

这是我的云端 CDK 代码

const distribution = new CloudFrontWebDistribution(this, 'CloudfrontWebDistribution', {
      httpVersion: HttpVersion.HTTP2,
      priceClass: PriceClass.PRICE_CLASS_ALL,
      viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
      originConfigs: [
        {
          s3OriginSource: {
            s3BucketSource: bucket,
            originAccessIdentity
          },
          behaviors: [{
              isDefaultBehavior: true,
              defaultTtl: Duration.hours(1)
            }]
        }, 
        {
          customOriginSource: {
            domainName: website_domain
          },
          behaviors: [{
            pathPattern: '/api/*',
            isDefaultBehavior: false,
            allowedMethods: CloudFrontAllowedMethods.ALL,
            defaultTtl: Duration.seconds(0),
            minTtl: Duration.seconds(0),
            maxTtl: Duration.seconds(0),
            forwardedValues: {
              queryString: true,
              cookies: {
                forward: 'all'
              }
            }
          }]
        }
      ],
      errorConfigurations: [
        {
          errorCode: 404,
          responseCode: 404,
          responsePagePath: '/404.html'
        }
      ],
      viewerCertificate: ViewerCertificate.fromAcmCertificate(certificate, {
        aliases: [website_domain],
        securityPolicy: SecurityPolicyProtocol.TLS_V1_2_2018
      })
    })

这不是必需的，但我也提供了我的 HTTP API 自定义域 CDK 代码

    const certificate = Certificate.fromCertificateArn(this, 'ssl_cert', certArn)
    
    const domain = new DomainName(this, 'domain', {
      domainName: website_domain,
      certificate
    }) 

    const api = new HttpApi(this, 'endpoint', {
      defaultDomainMapping: {
        domainName: domain,
        mappingKey: 'api'
      },
      corsPreflight: {
        allowCredentials: true,
        allowHeaders: ['Content-Type'],
        allowMethods: [HttpMethod.GET, HttpMethod.POST, HttpMethod.OPTIONS, HttpMethod.HEAD],
        allowOrigins: [
          "https://cdn.ampproject.org",
          "https://www.bing-amp.com"
        ]
      },
      apiName: 'myAPI'
    })

Answer 1

我没有在代码 sn-p 中看到您对 HttpApi 的路由定义，但我怀疑问题是它们不是以 /api 开头的。

CloudFront 行为中的 pathPattern 只是为了匹配 url 并路由到适当的源。但 CloudFront 不会将其从转发到源的路径中删除。

我知道有两种解决方案

• 在所有路线前面添加 /api 路径段
• 在调用源之前使用 lambda@edge 删除路径段。

对于第二个选项，请参阅此处接受的答案：Multiple Cloudfront Origins with Behavior Path Redirection