typescript - AWS CDK を使用して ApiGateway と S3 で CloudFront をセットアップする方法は?

Question

AWS CDK を使用して、2 つの異なるオリジンを持つ CloudFront ディストリビューションをセットアップしようとしています。

• S3
• APIゲートウェイ

これがスタックの図です。

私が抱えている問題は、API ゲートウェイのドメインを CloudFront ディストリビューションに正しく渡すことができないことです。これが私の試みです：

const api = new ag.RestApi(this, "RestApi", {
    deploy: true
});

api.root
    .addResource("api")
    .addResource("photo")
    .addResource("{id}")
    .addMethod("GET", new ag.LambdaIntegration(lambdaFunction));

const url = URL.parse(api.url);
const domainName = url.hostname as string;

const dist = new cf.CloudFrontWebDistribution(this, "Distribution", {
    originConfigs: [
        {
            s3OriginSource: { s3BucketSource: bucket },
            behaviors: [{ isDefaultBehavior: true }]
        },
        {
            customOriginSource: { domainName },
            behaviors: [
                {
                    pathPattern: "/api/*"
                }
            ]
        }
    ]
});

new cdk.CfnOutput(this, "ApiUrl", { value: api.url });

originConfigs配列の 2 番目のオブジェクトをコメント アウトすると、すべてが実行され、ApiUrl出力に正しい値が出力されます。ただし、上記の例のようにコードをそのままにしておくと、次のエラーが発生します。

1/2 | 12:18:13 AM | UPDATE_FAILED | AWS::CloudFront::Distribution | Distribution/CFDistribution (DistributionCFDistribution882A7313) The parameter origin name cannot be null or empty. (Service: AmazonCloudFront; Status Code: 400; Error Code: InvalidArgument; Request ID: 1606f9b3-b3e1-11e9-81fd-bb6eb7bd9c83)