Setup API Gateway

akbarnafisa

Akbar Nafisa

Posted on December 21, 2023

Setup API Gateway

In the previous post, we successfully deployed our server app to EC2. However, it still uses http. To overcome this issue, we can use API Gateway to act as a front door to our server app. Here are the steps to connect the EC2 to API Gateway:

Create API

  • Open API Gateway Service and click the Create API button.
  • Select REST API and then click the Build button.

Image description

  • Enter the API name and click Create API.

Image description

Create Resource

  • Open the API, then click the Create resource button.

Image description

  • Check the Proxy resource and enter {proxy+} as the resource name, then click Create resource.

Image description

  • Click on ANY resources, then click Edit integration button.

Image description

  • Select HTTP method, check the HTTP proxy integration, set HTTP method to ANY, set the Endpoint URL to our server app URL http://3.27.113.187:3000/{proxy}, and finally, set Content handling to Passthrough.

Image description

  • The last step is to add a new URL path parameter with the key proxy and the value method.request.path.proxy, then click the Save button.

Image description

Deploy the API

  • In the resources page, click Deploy API.

Image description

  • Let’s create a new stage and click Deploy button.

Image description

  • Finally, after the deployment finishes, we can access our API here.

Handling error path

If you access the index page, you will receive an error page.

Image description

We can fix this issue by following these several steps.

  • In the Resources page, click Create Method button.

Image description

  • Then we set the Method to be GET, check the HTTP proxy integration, and enter our server app public URL. Finally, click Create method.

Image description

  • Finally, let’s redeploy our API to prod stage, and when we open our index API, it should not show any error.

Image description

💖 💪 🙅 🚩
akbarnafisa
Akbar Nafisa

Posted on December 21, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Add Portainer Stack
webdev Add Portainer Stack

January 26, 2024

Setup EC2 Instance
webdev Setup EC2 Instance

December 19, 2023

Setup CloudFront for Client App
webdev Setup CloudFront for Client App

January 4, 2024

Create Access Key for AWS S3
webdev Create Access Key for AWS S3

December 29, 2023