Need help?

Our experts have had an average response time of 13.52 minutes in October 2021 to fix urgent issues.

We will keep your servers stable, secure, and fast at all times for one fixed price.

API gateway CloudFront distribution | How to guide

by | Nov 22, 2021

API gateway CloudFront distribution setup guide by Bobcares.

At Bobcares, our Server Management Service offers solutions to every query, big and small.

Let’s take a look at this handy guide by our skilled Support Team to help set up API gateway with CloudFront web distribution.

All about API gateway CloudFront distribution

Are you looking for an edge-optimized API endpoint in the Amazon API Gateway that offers more control over the CloudFront distribution? You have come to the right place. Our Support Engineers are here with a handy guide to help you out.

If our API clients are geographically scattered, an edge-optimized API endpoint in the API Gateway is a better choice. It acts as a regional endpoint, but also has an AWS-managed CloudFront web distribution in front. This helps improve client connection time immensely.

In order to use a global CloudFront content delivery network as well as have more control over the distribution, we can rely on a regional API with a custom CloudFront web distribution.

Before we get started, we will create a regional API in the API Gateway and proceed with the steps mentioned below.

How to set up the GET method for the API

  1. First, we will choose the name of the new regional API in the API Gateway console.
  2. Then, we will select Actions in the Resources pane.
  3. After that, select Create Method and choose GET from the list under /resource node.
  4. Next, navigate to Integration type under / – GET – Setup and select Mock and choose Save.

How to set deploy API and identify API’s invoke URL

  1. First, we will deploy the API to a stage.
  2. After that, we have to copy the Invoke URL from the top of the Stage Editor pane to the clipboard. For instance, here is a sample API Gateway API Invoke URL:
    https://restApiId.execute-api.region.amazonaws.com/stageName.

How to test the API for a 200 OK response

We can confirm the API returns a 200 OK response by testing the API’s invoke URL via API Gateway console, curl, or Postman app.

In the following examples, remember to replace https://restApiId.execute-api.region.amazonaws.com/stageName with the API’s invoke URL before executing the commands.

For Linux:

curl -IX GET https://restApiId.execute-api.region.amazonaws.com/stageName

For Windows PowerShell:

curl https://restApiId.execute-api.region.amazonaws.com/stageName

According to our Support Engineers, in case we get a different status code after executing the command, we have to confirm the following:

  • Check whether the API is deployed to the stage.
  • Check if the stage is specified in the invoke URL.

How to create a CloudFront web distribution

  1. First, we have to choose Create Distribution in the CloudFront console.
  2. Then, we will navigate to Select a delivery method for your content in the Web section and select Get Started.
  3. After that, we will head to the Create Distribution page and paste the API’s invoke URL for Origin Domain Name. Then we have to delete the stage name.
    For instance:

    https://1a2bc3d456.execute-api.us-east-1.amazonaws.com
  4. Next, we have to enter the API’s stage name as the Origin Path with a slash (/) in front of it. However, we can also enter the stage name ourselves while invoking the URL by not entering an Origin Path.
  5. Then, we head to Minimum Origin SSL Protocol and select TLSv1.2. Our Support Techs recommend staying away from SSLv3 as it is not supported by API Gateway.
  6. After that, we select HTTPS Only for Origin Protocol Policy.
  7. We can also enter one or more custom headers to forward the custom header to the origin. However, this step is optional.
  8. If we are using IAM authentication for API or custom domain names for the distribution, the last section of this article has the required steps.
  9. We can also configure additional settings under the Distribution Settings section.
  10. Next, we will select Create Distribution.

  11. Finally, we will wait for the distribution to deploy. This may take around 15 to 20 minutes. The distribution is ready once Status changes to Deployed in the console.

How to test the CloudFront web distribution

  1. First, we have to copy the Domain Name of the distribution to the clipboard in the CloudFront console.

    For instance:

    a222222bcdefg5.cloudfront.net.
  2. After that, we can test the domain name for a 200 OK response as mentioned earlier. In case we get a 500 server error code, it indicates that the distribution is not deployed.

    Moreover, no response means that the CloudFront DNS record is not propagated yet. In both cases, our Support Team suggests confirming 20 minutes have elapsed since creating the distribution and retrying the procedure.

Using IAM authentication for the API or custom domain names for the CloudFront web distribution

  1. First, create a CloudFront web Distribution as demonstrated earlier.
  2. Then, navigate to Cache and origin request settings on Create Distribution page and select Use a cache policy and origin request policy. Then, head to Cache Policy and create a new cache policy or select an existing one that adds the Authorization header to the CloudFront allow list.
  3. If we are using an existing cache policy, we have to choose Whitelist for Cache Based on Selected Request Header. Then we will add Authorization to the list for Whitelist Headers.

  4. Then we will test the setup. Furthermore, this is optional.

Setting up a regional Custom domain name in the API Gateway to access the API

    1. First, create a new Regional API in the API Gateway. We can also change the edge-optimized API Gateway to a Regional API.
    2. Next, set up a Regional custom domain name for the API. Then create an API mapping for the API.
    3. After that, we have to create a CloudFront web distribution where the Origin Domain Name is the API Gateway target domain name.
    4. Then, we will select Use a cache policy and origin request policy for Cache and origin request settings on the Create Distribution page.

Then, head to Cache Policy and create a new cache policy or select an existing one that adds the Authorization and host header to the CloudFront allow list.

  1. If we are using an existing cache policy, we have to choose Whitelist for Cache Based on Selected Request Header. Then, we will add Authorization and host to the list of permitted headers for Whitelist Headers.
  2. Then, we will head to Distribution Settings and enter the custom domain name for Alternate Domain Name.
  3. After that, we will select Custom SSL Certificate for SSL Certificate. Additionally, we have to add the ACM certificate for that domain.
  4. After deploying the CloudFront web distribution, we have to configure the DNS Record in order to map the custom domain to the CloudFront web distribution. This is done by creating CNAME records or an alias.
  5. Finally, we can test the setup by creating a Signature Version 4 signed request for the custom domain name.

[Need help with a different query? We are available 24/7.]

Conclusion

In conclusion, we learned how to set up API Gateway with a CloudFront web distribution under the guidance of the skilled Support Engineers at Bobcares.

PREVENT YOUR SERVER FROM CRASHING!

Never again lose customers to poor server speed! Let us help you.

Our server experts will monitor & maintain your server 24/7 so that it remains lightning fast and secure.

GET STARTED

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Privacy Preference Center

Necessary

Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies.

PHPSESSID - Preserves user session state across page requests.

gdpr[consent_types] - Used to store user consents.

gdpr[allowed_cookies] - Used to store user allowed cookies.

PHPSESSID, gdpr[consent_types], gdpr[allowed_cookies]
PHPSESSID
WHMCSpKDlPzh2chML

Statistics

Statistic cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously.

_ga - Preserves user session state across page requests.

_gat - Used by Google Analytics to throttle request rate

_gid - Registers a unique ID that is used to generate statistical data on how you use the website.

smartlookCookie - Used to collect user device and location information of the site visitors to improve the websites User Experience.

_ga, _gat, _gid
_ga, _gat, _gid
smartlookCookie

Marketing

Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.

IDE - Used by Google DoubleClick to register and report the website user's actions after viewing or clicking one of the advertiser's ads with the purpose of measuring the efficacy of an ad and to present targeted ads to the user.

test_cookie - Used to check if the user's browser supports cookies.

1P_JAR - Google cookie. These cookies are used to collect website statistics and track conversion rates.

NID - Registers a unique ID that identifies a returning user's device. The ID is used for serving ads that are most relevant to the user.

DV - Google ad personalisation

IDE, test_cookie, 1P_JAR, NID, DV, NID
IDE, test_cookie
1P_JAR, NID, DV
NID
hblid

Security

These are essential site cookies, used by the google reCAPTCHA. These cookies use an unique identifier to verify if a visitor is human or a bot.

SID, APISID, HSID, NID, PREF
SID, APISID, HSID, NID, PREF