Have you ever wondered how to host your developer and staging branch, and make it accessible only to developers? I recently took up this challenge to privately host the React application in AWS. In this post, I’ll take you through the steps I took.
Overview
This article covers:
- Design Architecture
- Install dependencies
- Link to Git Repository
- Create React App
- Dockerfile & Nginx Config
- Create necessary AWS services (using CFN)
- Login to AWS (CLI)
- Create Makefile
Design Architecture
In this article, we will be deploying the React App in AWS Fargate accessible through Application Load Balancer. The below diagram shows high-level architecture.
Install Dependencies
Link to Git Repository
Available here.
Create React App
To create a React project run:
npx create-react-app private-hosting && cd private-hosting
Dockerfile & Nginx Config
What is Docker?
Docker is a containerisation tool which enables developers to package and run applications in containers. Containers are standardised executable components that combine application source code with the operating system libraries and dependencies required to run the code in an environment. Containers make it easier to deliver distributed applications, and as businesses move towards cloud-native development and hybrid multi-cloud environments, they are gaining popularity.
What is Nginx?
NGINX is an open source web server that can be used for reverse proxying, caching, load balancing, media streaming, and more. Since starting out as a web server designed for maximum performance and stability, NGINX can also function as a proxy server for email, and a reverse proxy and load balancer for HTTP, TCP, and UDP servers, in addition to HTTP server capabilities.
At the root of the project, create a folder named nginx. Create an nginx.conf file under the nginx folder.
server { |
At the root of the project, create a dockerfile and .dockerignore
Then, copy the below code and paste it in dockerfile.
# Build Environment |
Copy the below code and paste it in .dockerignore.
build |
Create necessary AWS services (using CFN)
What is AWS CloudFormation?
AWS CloudFormation helps to model and set up AWS resources. Create a template that includes all the required resources, and CloudFormation takes care of the provision and configuration. CloudFormation also removes the need to individually create and configure resources, or figure out what’s dependent on what, meaning you can spend less time managing those resources and more time focusing on your applications that run in AWS.
Create ECR
At the root of the project, create ecr-template.yaml. Then, copy the below code and paste it in ecr-template.yaml.
AWSTemplateFormatVersion: 2010–09–09 |
Build the infrastructure
At the root of the project, create template.yaml. Copy the below code and paste it into template.yaml.
AWSTemplateFormatVersion: 2010-09-09 |
Login to AWS CLI
Follow this documentation to login to AWS CLI.
Create a Makefile
At the project root, create a Makefile. Copy the below code and paste it into Makefile.
# TODO: Update the AwsAccountID |
Run the command make deploy
in your project root folder.
And voila! You now have a react app hosted privately.