Setup API Gateway
Tags: webdev, javascript, aws, devops
Published: 2023-12-21 00:00:00

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzpttr7anghomfk8dyjj.png)

- Enter the API name and click Create API.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a3n8py6l31m14wvlc2x.png)


# **Create Resource**

- Open the API, then click the **`Create resource`** button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8u7jlohp9hyjgtzcyj2.png)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f20t6d7tg8r5v7t3kfky.png)

- Click on ANY resources, then click `Edit integration` button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0e0uay7hgf8l1515myl.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfkq1rvqqvwcujpin6kq.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrz1nly301m4mf6vxb3j.png)



# **Deploy the API**

- In the resources page, click **`Deploy API`**.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fpqnvlmqajb6od6d8up.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1g3v6ycq2iqfwxjwqwvn.png)


- Finally, after the deployment finishes, we can access our API [here](https://29wt2m89y2.execute-api.ap-southeast-2.amazonaws.com/prod/api/todo).

# **Handling error path**

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo8r2vry2xfwufme87jt.png)

We can fix this issue by following these several steps.

- In the **`Resources`** page, click **`Create Method`** button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bq40kszzu4zvv0f27u24.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7v264mle3rzbnpye4hsk.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fm20ynp799qdleg3j3zr.png)