React Project Continuous Deployment With Gitlab and Aws

1. Introduction

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

1.1 Prerequisites

1. NodeJS
2. Gitlab 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 Gitlab

1. Login or create a new account in Gitlab.
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 Gitlab Deployment Script

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

1. Open your project in GitLab.
2. Click the Settings / CI/DI menu on the left panel.
3. Expand the Variables section.
4. Add the following variables:
1. AWS_DEFAULT_REGION
2. AWS_ACCESS_KEY_ID
3. AWS_SECRET_ACCESS_KEY

8. Commit, Build, and Deploy

Create a GitLab configuration in our project named: .gitlab-ci.yml with the following content:

					image: maven:3.6.3-openjdk-11

variables:
  MAVEN_OPTS: >-
    -Dmaven.repo.local=.m2/repository
    -Dorg.slf4j.simpleLogger.log.org.apache.maven.cli.transfer.Slf4jMavenTransferListener=WARN
    -Dorg.slf4j.simpleLogger.showDateTime=true -Djava.awt.headless=true
  MAVEN_CLI_OPTS: >-
    --batch-mode --errors --fail-at-end --show-version -DinstallAtEnd=true
    -DdeployAtEnd=true
  CI_AWS_ECS_CLUSTER: ReactCluster
  CI_AWS_ECS_SERVICE: ReactService
  CI_AWS_REGISTRY_IMG: 981794644853.dkr.ecr.us-east-2.amazonaws.com/react-app

before_script:
  - >-
    echo " ------------------------------- Global > Before Script
    ------------------------- ------"
  - echo $CI_COMMIT_BRANCH

stages:
  - compile
  - build
  - deploy

kaniko-build-docker:
  image:
    name: gcr.io/kaniko-project/executor:debug
    entrypoint: [""]
  stage: build
  variables:
    REGISTRY: $CI_AWS_REGISTRY_IMG
  before_script:
    - ls -la
  only:
    - master
  script:
    # see https://github.com/GoogleContainerTools/kaniko/issues/1227
    - mkdir -p /kaniko/.docker
    - echo "{\"credsStore\":\"ecr-login\"}" > /kaniko/.docker/config.json
    - /kaniko/executor --cache=true --context $CI_PROJECT_DIR --dockerfile ${CI_PROJECT_DIR}/Dockerfile --destination $REGISTRY:$CI_COMMIT_SHORT_SHA --destination $REGISTRY:latest

deploy:
  image: python:3.8
  stage: deploy
  only:
    - master
  before_script:
    - pip install ecs-deploy
  needs:
    - kaniko-build-docker
  script:
    - ecs deploy $CI_AWS_ECS_CLUSTER $CI_AWS_ECS_SERVICE -t $CI_COMMIT_SHORT_SHA --timeout 600

				

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

• https://www.czetsuyatech.com/2020/09/continuous-integration-continuous-deployment.html
• https://www.czetsuyatech.com/2021/07/react-continuous-deployment-with-github-and-aws.html
• https://docs.npmjs.com/downloading-and-installing-node-js-and-npm