no

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 se...

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.1 Prerequisites

  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. In 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.
    1. Select EC2 and click Next.
    2. Set the following values:
      1. In the Task Definition Name enter "DeployContainer". No Space.
      2. Task memory (MiB)=128
      3. Task CPU (unit)=1 vCPU
      4. Click the Add Container button.
        1. In the Container name enter "ReactAppContainer". No Space.
        2. In the Image, input enter the ECR URI.
        3. Under Port mappings set
          1. Host port=80, which will let us access the react application in port 80
          2. Container port=80, nginx port
      5. Click Add.
    3. Click Create.
  6. On the left side, click Amazon ECS / Clusters.
    1. Click Create Cluster.
    2. Select EC2 Linux + Networking.
    3. Click Next Step.
    4. Set the following fields
      1. Cluster name="ReactCluster".
      2. EC2 instance type*=t2.micro (very important)
      3. Under the Networking section, select a VPC if you already have one, otherwise, let it create for you.
      4. Select the Subnets if you already have them.
      5. Select a Security Group that allows public access or in our case expose port 80 to the world.
    5. Click Create.
  7. Click View Cluster.
  8. Under the Services tab, click Create.
    1. Set the following fields
      1. Launch type=EC2
      2. Task Definition=DeployContainer
      3. Service name=ReactService
      4. Number of tasks=1
      5. Minimum healthy percent=0
      6. Maximum percent=100
  9. Click Next Step.
  10. Click Next Step, as we don't need a load balancer for this demo.
  11. Click Next Step.
  12. Click Create Service.
  13. 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

Before we add action, we need to set the AWS secret keys first.

  1. Open your project in Github.
  2. Click the Settings tab.
  3. Click the Secrets menu and enter the 2 keys.
    1. AWS_ACCESS_KEY_ID
    2. AWS_SECRET_ACCESS_KEY

Add the action.

  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

Related

react 902142810653313760

Post a Comment Default Comments

2 comments

celebwiki said...

I want to start an online business where I can earn money. I am planning an online parent coaching business where I can help parents through email and telephone conversations. I've never started a website and would like it to be fairly easy (if possible). Are there any free or inexpensive places where I can do this? What methods of payment are best to use? Thanks!.

czetsuya said...

@celebwiki, in your case the best would be to create a website using WordPress. It's the framework of choice for non-coder business owners. There are many websites where you can host your WordPress website: https://www.techradar.com/web-hosting/best-web-hosting-service-websites. But personally, I prefer the one provided by Amazon, but unfortunately, it will require a bit of tech knowledge. You can use your credit card for monthly subscription.

item