AWS CDK and Typescript: Using the New ApiGatewayV2

Enrico Gruner
Nov 23, 2020 · 2 min read

Migrating from API Gateway to API Gateway V2 using Typescript and the AWS CDK.

Image for post
Image for post
Photo by Jason Leung on Unsplash

Some months ago, it was not that easy to use ApiGatewayV2 in your CDK projects since it was in beta and not really ready to use. Parts of the V2 are still experimental — but you can use the most important bits now. See my post on Stackoverflow for a quick way of converting ApiGateway to ApiGatewayV2. I have also made a video on YouTube for migrating from V1 to V2 (links to SO and YouTube below).

Using the new API Gateway V2 is a 3-steps-process:

  • Create an integration.
  • Define an HTTP API.
  • Add Routes.

Note that there’s still no easy way to use WebSockets.

The integration is used to tell API Gateway where it should send incoming requests to. In the most simplistic case, this would be your Lambda handler. But Load Balancers or an HTTP Proxy are also possible. What might be strange is that this comes in its own package @aws-cdk/aws-apigatewayv2-integrations.

const httpApiIntegration = new LambdaProxyIntegration({
handler: fn,
});

You have to create an HTTP API that will hold all of your routes. This instance is the equivalent of the LambdaRestApi from V1, but it has a different API.

const httpApi = new HttpApi(this, "MyApi");

There’s also a third parameter for options, such as a CORS configuration or the default integration.

With routes, you can specify which integration will be triggered depending on the path that has been entered or the HTTP Method that has been used.

httpApi.addRoutes({
path: "/",
methods: [HttpMethod.ANY],
integration: httpApiIntegration,
});

Putting a Cloudfront in front of your API Gateway V2 is luckily not that different from V1.

const feCf = new CloudFrontWebDistribution(this, "MyCf", {
defaultRootObject: "/",
originConfigs: [{
customOriginSource: {
domainName: `${httpApi.httpApiId}.execute-api.${this.region}.${this.urlSuffix}`,
},
behaviors: [{
isDefaultBehavior: true,
}],
}],
enableIpV6: true,
});

Done. If you want to create an Output to your console to get the Cloudfront Domain Name, you will have to use distributionDomainName now, instead of domainName.

new cdk.CfnOutput(this, "myOut", {
value: feCf.distributionDomainName,
});

That’s it!
Thank you very much for your attention; I hope that this was any help for you.

The Startup

Medium's largest active publication, followed by +771K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store