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. 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. 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 Gitlab Deployment Script

  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:
  5. AWS_DEFAULT_REGION
  6. AWS_ACCESS_KEY_ID
  7. 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-11variables:
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

Originally published with video at https://www.czetsuyatech.com/2020/09/react-project-continuous-deployment-with-gitlab-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.

Understanding Spark’s Logical and Physical Plan in layman’s term

Cross-Account VPC Peering Connection With Terraform

Two Number Sum in Golang

Using the Payment Request API with moltin

Sailing With Spinnaker: Deploying a Better CD Pipeline To Dozens of Engineers and Services

Always Think Before You Print

Nextcloud on AWS

Writing a Linux Kernel Module

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

Get your Serverless API in the Cloud

Deploy a React App to Brilliant Cloud with Docker & Nginx

Amazon API Gateway: Securing Endpoints using API Keys

Continuous Deployment Pipeline for React App on AWS S3 + CloudFront