React Project Continuous Deployment with GitHub and AWS

1. Introduction

In this article, I will explain how we can automate the deployment of a React project hosted in Github using Amazon services.

  1. NodeJS
  2. GitHub account
  3. AWS account

2. Create a React project

Make sure that you have NodeJS installed on your local machine and you have access to npm. Open your terminal and type npm -version.

To create a new React project type the following command in your terminal:

>npx create-react-app react-app.

Add the following Dockerfile in the root directory of the project.

FROM node:alpine as builder
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY ./ ./
RUN npm run build
FROM nginx
EXPOSE 80
COPY --from=builder /app/build /usr/share/nginx/html

3. Push the Project to GitHub

  1. Login or create a new account in GitHub.
  2. Create a new repository named react-app.
  3. Follow the procedure on how to link the remote repository to our local project.
  4. Commit all the files.
  5. Push the changes.

4. Create Amazon ECR

  1. Login to your AWS account.
  2. Click the Services menu and search “ECR”.
  3. In the dropdown select Elastic Container Registry.
  4. On the Amazon ECR page, click Create Repository.
  5. Enter the repository name “react-app”.
  6. Click Create Repository.
  7. Copy the Repository URI. We will use this when we create an ECS task definition.

5. Create Amazon ECS

  1. Login to your AWS account.
  2. Click the Services menu and search “ECS”.
  3. In the dropdown select Elastic Container Service.
  4. On the left side click Amazon ECS / Task Definitions.
  5. Click Create new Task Definition.
  6. Select EC2 and click Next.
  7. Set the following values:
  8. In the Task Definition Name enter “DeployContainer”. No Space.
  9. Task memory (MiB)=128
  10. Task CPU (unit)=1 vCPU
  11. Click the Add Container button.
  12. In the Container name enter “ReactAppContainer”. No Space.
  13. In the Image, input enter the ECR URI.
  14. Under Port mappings set
  15. Host port=80, which will let us access the react application in port 80
  16. Container port=80, nginx port
  17. Click Add.
  18. Click Create.
  19. On the left side, click Amazon ECS / Clusters.
  20. Click Create Cluster.
  21. Select EC2 Linux + Networking.
  22. Click Next Step.
  23. Set the following fields
  24. Cluster name=”ReactCluster”.
  25. EC2 instance type*=t2.micro (very important)
  26. Under the Networking section, select a VPC if you already have one, otherwise, let it create for you.
  27. Select the Subnets if you already have them.
  28. Select a Security Group that allows public access or in our case expose port 80 to the world.
  29. Click Create.
  30. Click View Cluster.
  31. Under the Services tab, click Create.
  32. Set the following fields
  33. Launch type=EC2
  34. Task Definition=DeployContainer
  35. Service name=ReactService
  36. Number of tasks=1
  37. Minimum healthy percent=0
  38. Maximum percent=100
  39. Click Next Step.
  40. Click Next Step, as we don’t need a load balancer for this demo.
  41. Click Next Step.
  42. Click Create Service.
  43. Click View Service.

6. Create AWS Access Key

  1. Login to your AWS account.
  2. Click the Services menu and search for “IAM”, click it.
  3. On the left side, click Users.
  4. Click Add user.
  5. Enter a username and select Programmatic user.
  6. Click Next:Permissions.
  7. Click Attach Existing Policies directly.
  8. Check “AdministratorAccess”. This is for testing purposes only.
  9. Click Next: Tags.
  10. Click Next: Review.
  11. Click Create user
  12. Download the CSV that contains the Access Key ID and Access Key. We will use it later when setting up the Github action.

7. Adding and Configuring GitHub Action

  1. Open your project in Github.
  2. Click the Settings tab.
  3. Click the Secrets menu and enter the 2 keys.
  4. AWS_ACCESS_KEY_ID
  5. AWS_SECRET_ACCESS_KEY
  1. Browse Github in your browser and open your project.
  2. Click the Actions tab.
  3. Click New Workflow.
  4. Search “Deploy to Amazon ECS” action.
  5. Under it, click “Setup this Workflow”.
  6. Follow the instructions on the top of the script.

8. Commit, Build and Deploy

  1. Fire up your Visual Studio Code.
  2. Open the react-app folder.
  3. Modify the App.js file and add a Hello Amazon line.
  4. Commit and push the change.
  5. Access the URL using the EC2 URL of the container.

9. References

Originally published with video at https://www.czetsuyatech.com/2020/08/react-project-continuous-deployment-with-github-and-aws.html.html

--

--

--

Senior Java Developer with 15 years of professional experience | Startup enthusiast.

Love podcasts or audiobooks? Learn on the go with our new app.

How to be a better learner of coding or anything else!

Flutter @sealed Classes

Tuple in Python

Knoldus-blog-footer-image

How to create a serverless REST API in AWS within 15 minutes

What to Look for When Hiring Full Stack Developers?

What to Look for When Hiring Full Stack Developers?

“Why do you always choose Microservices over me?” said the Monolithic architecture

monolithic_vs_microservices

Want to write better code? Compose a symphony

6 Pitfalls of Agile Transformation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
czetsuya

czetsuya

Senior Java Developer with 15 years of professional experience | Startup enthusiast.

More from Medium

Validating the concept: Creating an api to access the data

Board with postits

Serve Reactjs app using express and deploy it to AWS using bitbucket pipeline

Authentication for Dummies

REST API Guide to HTTP Status Codes