API Gateway is a powerful tool you can use to create a frontend for your application hosted on AWS. It let developers create, maintain, secure and monitor API on a large scale. This API is a gateway to access your data, functions, logic or any web application hosted on AWS. Logic is based on RESTful API framework used in an example by web servers and can be used to eliminate physical or virtual servers from infrastructure. API Gateway is a tool for a dynamic and flexible approach for data transformation. Let me show you how to display HTML page using only AWS API Gateway.

Most of the tutorials available on the Internet will show you how to host static web pages on AWS using S3 buckets and CloudFront CDN. This approach is not wrong at all and suitable for most cases. However, if you need to have basic HTML-only content that you display in the browser or embed in another page, you may consider another approach. You can use only APIGateway service to achieve the same result. With some more coding, you can even create dynamic pages using only API Gateway or Lambda and API Gateway together. In this example, I want yo show you how to return static web page only.

There are endless ways how you can use API Gateway for your product. You can easily think of multiple ways to use them with the simple program I described in article AWS Lambda guide part II – Access to S3 service from Lambda function. If you want to know more about this service please check the documentation.

Step 1: Create new API Gateway, resource, and method

First, create a new API by providing its name and optionally some description

Create new API Gateway

Now create new Resource by selecting Create Resource from Action button menu. If you want you may skip this step and define methods in root resource

Create new resource for your API Gateway

To get data from our API web browser, or any other client uses GET method. It is the same approach that your web browser uses when it connects to any web server. To create it select first the resource that we just created and from Action button menu chose Create Method. Now you need to select GET method from drop down list and accept configuration by ticking the checkmark.

Step 2: Configure method type and parameters

Now we need to set new method. First, change the type to Mock and save it. If we use Mock type, then all method processing base on transformations and mappings defined in method configuration in Gateway API. Method type is stored in Integration Request type definition. W can’t use external resources or other AWS services if we select Mock type.

Every method has its flow of actions. Let’s focus a little on each of them

Method execution flow configuration in Gateway API

•  Client – it is the entry and end point where everything starts and ends. Depending on method you can or can’t simulate some parameters that client can pass to the method
• Method Request – this is public configuration of the method API so cover everything that API client has or may pass while calling the method including authorization
• Integration Request – it is a definition of how API communicates with backend service. If input data require transformation before we send it to other AWS service, we need to define it here
• Mock Endpoint – representation of backend service
• Integration Response – backend service usually return some data. Here we can manipulate the response or map response code to your API response code
• Method Response – it is again public interface of our API but containing response configuration. You can define codes, header or body models that API can return.

In our short example, we do not care about request body or headers. We are going just to manipulate the response – we will just define one way the API responds when the method is called.

First open Method Response. By default response code 200 is defined which is called “OK”. This means HTTP request was successful. You need to expand the definition of each code to edit it. You can manipulate both response header and body. By default, the body of reply is application/json. It’s not the type of response we are expecting so delete it and create text/html and assign Empty model.

Edit code 200 Method Response parameters

Now open Integration Response and expand the definition of code 200 to edit it. In Body Mapping Templates delete the default application/json type and add text/html type. Then in template definition just put some HTML code and save the changes – remember to <HTML> and <BODY> section, we want to have proper HTML web page!

Method Content-Type definition

Let’s look back at the deployed configuration. What we defined is response type of text/html which is a default for web pages, and we assigned static HTML code as a response. We also left it as the only response definition. We also assigned text/html as response method to code 200, and we left it as the only one allowed.

Step 3: Deploy and test API Gateway

The API we created is inactive by default. To activate it we need to go to Resources configuration and from Action button menu select Deploy API. Our API can have multiple stages – we need to create just one, and we will call it prod.

Deploy API Gateways and give it stage name

When we create the stage console will automatically move to its configuration. The first thing you should notice it’s Invoke URL. This is the URL we need to call if we want to use our API. As you can see it has suffix prod which represents the stage. But remember we put our GET method under resource not in root so expand the stage configuration tree and select GET method from our resource. Again dashboard will provide us correct URL. Each URL of our API by default is in the format:

https://<random string>.execute-api.<region>.amazonaws.com/<stage>/<resource>

Random string in the first part of the name is generated automatically for each Gateway API we create. Rest of the parameters are straightforward.

It’s time to test our API. Open the URL provided for GET method in a new window. If the execution is successful, we should see our web page in the browser.

It’s working! If you are going to make further changes to the API, remember you have to redeploy it each time to the same or new stage to make them active.

Our API Gateway method is open to the public, so no authentication is required. That’s the usual model for public web page methods but id you need protection you should add authorization or key authentication or both.

Summary

The AWS API Gateway is powerful tools for developers and application architects. It provides frontend API that we can use in other application, other AWS services, provide to external users and connect them to back-end service. I showed just one simple way of using API Gateway as a replacement of S3 storage service for hosting static HTML pages. But as with almost all cloud services sky is the limit of possible scenarios and usages. It’s also very cheap – the eu-west-1 price of using API Gateway at this moment is $3.50 per million API calls plus data transfer in and out.