title: How to setup CloudFront with ApiGateway and S3 using AWS CDK?
body: <p>I'm trying to use the AWS CDK to setup a CloudFront distribution with 2 different origins:</p>
  
  <ul>
  <li>S3</li>
  <li>ApiGateway</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/tQyGY.jpg" rel="noreferrer">Here's a diagram of the stack.</a></p>
  
  <p>The problem I am having is that I can't pass the domain of the API Gateway to the CloudFront distribution properly. Here's my attempt:</p>
  
  <pre class="lang-js prettyprint-override"><code>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 });
  </code></pre>
  
  <p>If I comment out the second object in the <code>originConfigs</code> array, everything goes through, and the <code>ApiUrl</code> output prints the correct value. However, if I leave the code as in the above example, I get the following error:</p>
  
  <pre><code>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)
  </code></pre>