如何将cloudfront转发到具有自定义域的HTTP API

Question

我在/路径上为s3和cloudfront的静态网站提供服务。

我想从HTTP API服务/api/*。

我的静态网站使用cloudfront进行了正确配置。我还用cdk 配置了自定义域到HTTP的api

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

这是我的cloudfront 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

我在代码片段中没有看到HttpApi的路由定义，但我怀疑问题是它们不是从/api开始的。

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

我知道有两种解决方案

• 在所有路线前准备/api路径段
• 使用lambda@edge以在调用原点之前删除路径段

对于第二个选项，请参阅此处接受的答案：具有行为路径重定向的多个Cloudfront起源