Streamlining Awesome App Deployment with Terraform and AWS Serverless Services
AWS Infra Diagram
Welcome to the detailed guide on deploying Awesome App, a full-stack AWS Serverless project, using Terraform for infrastructure provisioning and CircleCI for continuous integration and deployment. In this tutorial, we’ll cover storing the frontend app content in AWS CodeCommit, deploying it using AWS Amplify, setting up a DynamoDB table, creating Lambda functions, configuring API Gateway, and adding a custom domain to the AWS Amplify Application.
Introduction
Awesome App showcases the power of serverless architecture by deploying frontend (HTML, CSS, JS), backend (Python), and a DynamoDB table on AWS Serverless Services. This guide focuses on the Terraform approach for infrastructure provisioning and CircleCI for automating the deployment process.
Prerequisites
Before proceeding, ensure you have the following prerequisites:
An active AWS account with appropriate permissions.
Familiarity with AWS services such as CodeCommit, Amplify, DynamoDB, Lambda, and API Gateway.
Basic knowledge of Terraform for infrastructure provisioning.
CircleCI account and understanding of its basic functionalities.
Implementation Options
You have two implementation options to deploy Awesome App based on your preference:
Manual Setup
For users who prefer a hands-on approach and want to understand the individual components and their configurations, follow the below blog link where I deployed our Awesome App on AWS Serverless Services. This approach is suitable for users who want to explore and learn the details of each service.
- Manual Approach: Link to Manual Setup Guide
Terraform Setup
If you prefer a Terraform approach and want to automate the configurations, follow the steps outlined in the main guide. This approach is suitable for users who want to become experts and deploy each service.
Step-by-Step Guide
We have to store our front-end app content. To do that, we will use AWS CodeCommit.
Click on Create repository.
Enter the name of the repository and click on Create.
Now, we have some instructions on how to use the repository.
Let’s follow the instructions.
In Step 1, we have to generate our credentials to push and pull the repository.
Navigate to the IAM Services -> IAM Users.
Now, click on your user and click on the Security Credentials tab.
Click on Generate credentials to generate the credentials.
Once you click on the Generate credentials. You will get a popup like the below screenshots in which the credentials have been given.
Now, go to the instructions page of the AWS CodeCommit service and copy the step 3 command to clone the repository.
You have to provide the credentials that you have generated in the above steps.
You can validate by checking whether the directory is present or not.
Now, we need our frontend code to push it on the CodeCommit repository.
Download or Clone the entire code which includes frontend and backend both code.
Source Code Repo- https://github.com/AmanPathak-DevOps/Cloud-Serverless-Project/tree/master/Frontend
So, copy all the files of the frontend directory in your CodeCommit repository and push it on the CodeCommit repository.
You can refer to the below screenshot to push it on the CodeCommit repository.
You can validate whether the code is pushed or not on the CodeCommit repository.
Now, we have two lambda functions and for that, our lambda code should not be in the terraform repo or with the terraform file. So, we will push our Code to the AWS S3 bucket.
Backend Code Repo- https://github.com/AmanPathak-DevOps/Cloud-Serverless-Project/tree/master/Backend
Click on Create bucket.
Enter the unique name of the S3 bucket.
Select both files and click on upload.
As you can see, both files have been uploaded to the S3 bucket.
Now, we have to add our custom domain to our AWS Amplify Application which is one of our Prerequisites.
To do that, we will use AWS managed service Route53.
Click on Created hosted zone.
Provide the domain name that you have and click on Create hosted zone.
Once the hosted zone is created you will get Name servers.
Now, copy all the name servers.
Go to your domain provider and click on NS.
Now, paste the Name Servers that we have copied in the earlier steps into your domain provider NS.
To automate our AWS Infrastructure through Terraform, we will use the CircleCI CI/CD tool.
If you don’t know how to integrate your existing Infrastructure Code repository with CircleCI then follow my blog. It will take 3 to 5 minutes so don’t miss it.
https://aman-pathak-devops.medium.com/integrate-circle-ci-with-github-repository-b97f90747659
This is the repository where infrastructure code is placed.
To deploy that code, we have to update our code with the code that you are viewing in the below screenshot.
You can get the code from this link and modify it accordingly.
https://github.com/AmanPathak-DevOps/Terraform-for-AWS/blob/master/.circleci/config.yml
Once you replaced the code with the new code.
Go to CircleCI and add access and secret access key into the CircleCI environment variables.
Select the project and Click on Project Settings.
Click on Add Environment Variable.
Add your both access key and secret access key.
Once you add the environment variables, you can go to the project again click on the build-and-deploy workflow, and click on the Rerun workflow from the start.
After running the workflow, you will see our pipeline successfully ran.
Let’s verify the main services that should be created by the CircleCI pipeline.
Amplify service was created but we have to deploy our changes manually by clicking on Run buil which we will do later.
If you click on Domain management from the Amplify App console. You will see our Domain and SSL added to our Amplify Application.
Our API Gateway has also been created with the POST and GET methods.
Both GET and POST Lambda functions have been created as well.
A trigger has been added for the POST lambda function.
A trigger has been added for the GET lambda function.
Our Student-Details DynamoDB table has been created.
Now, our Infra has been created. So, we are all set to deploy our application.
To do that, go to your GET-lambda function and click on the API Gateway trigger.
Copy the API endpoint that is highlighted in the below screenshot.
Do the same for the POST-lambda function.
After copying both endpoints, paste them into the editor.
Now, open the index.html file that you have pushed to the CodeCommit repository.
You will get the endpoint variable in the 15th line.
Replace the GET-lambda API Endpoint that you have copied with the ‘<API_GET_ENPOINT>’ like below screenshot.
Now, go to the line number 70th.
Replace the same for the POST-lambda API Endpoint. Replace your POST-lambda API Endpoint that you have copied with the ‘<API_GET_ENPOINT>’ like below screenshot.
Once you made the changes, kindly push the fresh changes to the CodeCommit repository.
Once you push your changes to the CodeCommit repository and go to the AWS Amplify, you will see that the new changes are deployed automatically.
Now, hit your domain from the browser.
Enter data and click on the Add button. You will see our data has been stored in the DynamoDB table and we are able to view the data in the table.
We have added some more data to validate from the DynamoDB table.
If you see the domain name in the below screenshot, you will that our application has a secure connection.
Now, go to the DynamoDB table and click on Explore table items. You will see our same application records in the DynamoDB table.
One more thing to observe, if you check the domain management from the AWS Amplify app you will see that the SSL certificate configuration successfully completed like the below screenshot.
Now, if you want to destroy all the services. Go to the CircleCI console and click on the project that we are using to build and deploy our infrastructure.
Click on deploy-infrastructure.
Click on rerun then Rerun workflow from start.
Services were destroyed successfully.