Explore

"Frontend Environment Template: Setup with Terraform"

This document provides a concise and technical guide on how to efficiently set up a Next Js frontend static website environment on AWS using Terraform. By utilizing AWS Codebuild, S3 and CloudFront, we can streamline the process and create a pre-defined accelerator template. This approach saves valuable time and effort, eliminating the need to repeatedly configure repositories and deployment pipelines. Let's dive in and explore the straightforward steps to create a powerful, automated frontend environment that enhances your web application's performance and scalability. Let's begin!

Prerequisites:

Before you proceed with setting up the frontend accelerator, ensure you have the following prerequisites in place:

Terraform Installation: To install Terraform, follow the official installation guide for your operating system:

⁠

Terraform Installation Guide⁠

⁠

AWS Account and Credentials: You'll need an AWS account with the necessary permissions to create and manage resources. If you don't have an AWS account, sign up for one at

AWS Console⁠

AWS CLI and Credentials Configuration: Ensure you have the AWS Command Line Interface (CLI) installed on your machine. The CLI is used to manage AWS services and provides essential commands for Terraform to interact with your AWS account.

⁠

AWS CLI Installation Guide⁠

⁠

After installing the AWS CLI, configure it with your AWS credentials by running the following command and providing your Access Key ID, Secret Access Key, AWS Region, and default output format (JSON):

aws configure

Make sure that the IAM user associated with the credentials has the required permissions to create and manage resources like S3 buckets, CloudFront distributions, and CodeBuild projects.

Setup:

Follow the steps below to set up the frontend accelerator using the template repository:

DevBaseDev/web-starter⁠

Create GitHub Repository from Template: Start by creating a new repository on GitHub using the template provided at

DevBaseDev/web-starter⁠

. Click on the "Use this template" button to create your repository.

Configure Terraform Variables: Navigate to the ci/s3-cloudfront/ folder in your newly created repository. Open the variables.tf file and review the variables for your project. Modify the following variables according to your requirements:

github_repo: Update this variable with the name of your GitHub repository.

s3_bucket_name: Choose a unique name for your S3 bucket to store the static website content.

aws_region: Set the AWS region where you want to deploy the resources.

aws_account_id : 12 numbers of your aws account id

Configure AWS CLI Profile: In the provider.tf file located in the ci/s3-cloudfront/ folder, you will find the AWS provider configuration. By default, it uses the profile named "devbase" to authenticate with AWS. If you already have an AWS CLI profile configured and want to use it, update the profile field with your desired profile name.

If you don't have an existing profile or need to add more profiles, follow the instructions in the link below to learn how to change the profile or add new profiles in your AWS credentials file:

AWS CLI Configuration Guide⁠

⁠

Initialize and Apply Terraform Configuration: Open your terminal or command prompt and navigate to the ci/s3-cloudfront/ folder. Run the following commands in sequence:

terraform init

terraform plan

terraform apply

The terraform init command initializes the Terraform configuration and downloads the required providers.

The terraform plan command generates an execution plan, outlining the changes Terraform will apply.

The terraform apply command applies the changes and creates the necessary resources in your AWS account.

Connect GitHub Repository to CodeBuild: After the Terraform apply completes successfully, go to the AWS Management Console and navigate to the CodeBuild service. Create a new CodeBuild project and connect it to your GitHub repository as the source. Follow the steps in the link below to set up the integration:

⁠

Connecting GitHub to AWS CodeBuild⁠

⁠

Run CodeBuild Pipeline: With the CodeBuild project connected to your GitHub repository, trigger a build either manually or through a commit to your repository. CodeBuild will automatically build and deploy your static website to the S3 bucket configured during the Terraform setup.

Test Your Application: Once the CodeBuild pipeline successfully deploys your application to the S3 bucket, open the AWS Management Console and navigate to the CloudFront service.

Find the CloudFront distribution associated with your website (it should have the same name as your S3 bucket).

Locate the "Domain Name" in the CloudFront distribution details. This unique CloudFront URL acts as a front-end proxy for your S3 bucket.

Access your website by entering the CloudFront URL in your web browser. If everything is set up correctly, your application should be live and accessible via this URL.

Make updates to your frontend code, push the changes to your GitHub repository, and let the automated CI/CD pipeline (powered by CodeBuild) build and deploy your static website to the S3 bucket. The changes will be reflected on the CloudFront URL once the deployment is completed.

Exploring Other Alternatives: Inside the ci folder, you will find two additional folders, lambda and amplify. These demonstrate alternative approaches for deploying your frontend application.

Lambda with Terraform: The lambda folder contains an example to deploy the frontend app using AWS Lambda with Terraform. This approach allows you to host your frontend as a serverless function, providing scalability and cost efficiency.

Amplify with Terraform: The amplify folder demonstrates how to deploy the frontend app using AWS Amplify with Terraform. AWS Amplify provides a simplified and fully managed way to build and deploy scalable web applications.

Different Pipeline Options: While the current setup uses CodeBuild for the CI/CD pipeline, you can explore other options that fit your specific needs. In the .github/workflows folder, you will find GitHub Actions examples. GitHub Actions allow you to build, test, and deploy your code directly from GitHub. You can customize and extend these workflows to suit your project requirements.

Local Development:

To start the app locally and test it in your browser, you can use Docker Compose. Open your terminal or command prompt and navigate to the root folder of the project. Run the following command:

make start

This will start the app using Docker Compose and make it available at

http://localhost:3000/⁠

. You can now interact with your frontend application locally.

When you are done testing the app, you can stop the container by running:

make stop

Prerequisites: To use the make command, you need to have it installed on your system. The make utility is typically pre-installed on Unix-based systems like Linux and macOS. For Windows users, you can install make using tools like

Chocolatey⁠

To run the app locally with Docker Compose, you need to have Docker and Docker Compose installed

Docker: Docker allows you to build, ship, and run applications inside containers. It is available for various operating systems. Follow the links below to install Docker for your specific platform:

⁠

Install Docker on Linux⁠

⁠

Install Docker on macOS⁠

⁠

Install Docker on Windows⁠

⁠

Docker Compose: Docker Compose is a tool for defining and running multi-container Docker applications using a docker-compose.yml file. It simplifies the process of managing complex applications that require multiple containers. To install Docker Compose, follow the instructions provided in the link below:

⁠

Install Docker Compose⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.