https://github.com/codewithmuh/react-aws-eks-github-actions

We plan to utilize GitHub Actions and Terraform to deploy our React project on AWS EKS.
https://github.com/codewithmuh/react-aws-eks-github-actions

amazon-web-services aws-eks cicd cicd-pipeline deep-learning devops-workflow docker github-actions kubectl kubernetes-cluster react reactjs slack sonarqube terraform

Last synced: about 1 month ago
JSON representation

We plan to utilize GitHub Actions and Terraform to deploy our React project on AWS EKS.

• Host: GitHub
• URL: https://github.com/codewithmuh/react-aws-eks-github-actions
• Owner: codewithmuh
• License: mit
• Created: 2024-01-10T17:57:45.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-01-20T06:55:08.000Z (11 months ago)
• Last Synced: 2024-01-20T08:43:30.575Z (11 months ago)
• Topics: amazon-web-services, aws-eks, cicd, cicd-pipeline, deep-learning, devops-workflow, docker, github-actions, kubectl, kubernetes-cluster, react, reactjs, slack, sonarqube, terraform
• Language: HCL
• Homepage: https://youtube.com/@codewithmuh
• Size: 471 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
### Hit the Star! ⭐

If you are planning to use this repo for reference, please hit the star. Thanks!

# Deploy React Applications on AWS EKS using GitHub Actions and Terraform.

We plan to utilize GitHub Actions and Terraform to deploy our React project on AWS EKS.

![readme (11)](https://github.com/codewithmuh/react-aws-eks-github-actions/assets/51082957/f4d89609-e506-4d10-b733-578202e27d6e)

## Overview:

We will deploy React Application on aws Elastic Kubernetes(EKS). We will use Github actions for the ci/cd pipeline. We will use EC2 as the self-hosted runner for our GitHub Actions. We will integrate Sonarcube for code analysis and Trivy Image scan to scan our docker images. Also, we will integrate slack to get Build/deployment notifications.

### Youtube Video Tutorial: https://www.youtube.com/live/HkGMxxjBt8g?si=PzSJEGwPrJmn8yli

## Support



### Prerequisite

You should have basic Knowledge of AWS services, Docker, Kubernetes, and GitHub Actions.

### Table of Content/Steps:

**1.** Create an AWS EC2 Instance and an IAM Role 

**2.** Add a Self Hosted Runner To AWS EC2

   

**3.** Docker Installation and Running SonarQube Container

**4.** Integrate SonarQube with GitHub Actions

**5.** Installation of tools (Java JDK, Terraform, Trivy, Kubectl, Node.js, NPM, AWS CLI)

**6.** Provision AWS EKS With Terraform

**7.** Dockerhub and Trivy Image Scan Setup

**8.** Deploy Application(image) to AWS EKS

**9.** Integrate Slack Notifications

**10.** Running Final/Complete Github actions Workflow

**11.** Delete the infrastructure (To Avoid Extra Billing, if you are just using it for learning Purposes)

### Step 01:  Create an AWS EC2 Instance and an IAM Role 

#### Create IAM Role

You have to Navigate to **AWS Console**.






Then Search/Enter **IAM**









Click **Roles**










 

Then Click **Create role**







 




Now Click **AWS Service**, And Then Click **Choose a service or use case**





 






Now Click **EC2** and Click **NEXT**







 




Click the **Search** Fileds, Then Add permissions Policies







 




Add These **Four Policies**:

1.  EC2 full access

2.  AmazonS3FullAccess

3.  AmazonEKSClusterPolicy

4.  AdministratorAccess

   


 


 

Click NEXT and Then click the **Role Name** Field.

Type **cicd-jenkins**

Click **Create role**


 




 


 

**Note** We will use/attach this AIM Role during AWS EC2 instance Creation.

#### Create AWS EC2 Instance

To launch an AWS EC2 instance running Ubuntu 22.04 via the AWS Management Console, start by signing in to your AWS account and accessing the EC2 dashboard. Click on "Launch Instances" and proceed through the steps. In "Step 1," select "Ubuntu 22.04" as the AMI, and in "Step 2," opt for "t2.medium" as the instance type. Configure instance details, storage, tags, and security group settings according to your requirements. Additionally, attach the previously created IAM role in the advanced details. Review the settings, create or select a key pair for secure access, and then launch the instance. Once launched, utilize the associated key pair to connect via SSH for access, ensuring the security of your connection. (Look at image Below)


 


 





### Step 02: Add a Self Hosted Runner To AWS EC2

Now Go to GitHub Repository and  click on **Settings -> Actions -> Runners**

Click on New self-hosted runner









 

Now select Linux and Architecture X64



Use the below commands to add a self-hosted runner

**Note:** In pic Commads are related to my account, Use your commands, it appears on your GitHub  self-hosted runner Page. 



Now SSH to your AWS instance to connect with your Instance.

And Past/Run these commands.

  ```bash

  mkdir actions-runner && cd actions-runner

  ```



Command "mkdir actions-runner && cd actions-runner" serves to generate a fresh directory named "actions-runner" within the present working directory. Subsequently, it swiftly switches the current working directory to this newly created "actions-runner" directory. This approach streamlines file organization and facilitates executing successive actions within the newly formed directory without the need for separate navigation.

Download the latest runner package

```bash

curl -o actions-runner-linux-x64-2.311.0.tar.gz -L https://github.com/actions/runner/releases/download/v2.311.0/actions-runner-linux-x64-2.311.0.tar.gz

```



Validate the hash.

```bash

echo "29fc8cf2dab4c195bb147384e7e2c94cfd4d4022c793b346a6175435265aa278  actions-runner-linux-x64-2.311.0.tar.gz" | shasum -a 256 -c

```



Now Extract the installer

```bash

tar xzf ./actions-runner-linux-x64-2.311.0.tar.gz

```

Create the runner and start the configuration experience

```bash

./config.sh --url https://github.com/codewithmuh/react-aws-eks-github-actions --token AMFXNTP3IVE6IAZSWO3ZEGDFT2QV6

```



If you have provide multiple labels use commas for each label.

The last step, run it!

```bash

./run.sh

```



Let's close Runner for now.

```bash

ctrl + c  # To close Run this Command.

```

### Step 03:  Docker Installation and Running SonarQube Container

Connect with your Instance using SSH or Putty.(The Method you are using). If already connected, ignore.

Run these commands

```bash

sudo apt-get update

sudo apt install docker.io -y

sudo usermod -aG docker ubuntu

newgrp docker

sudo chmod 777 /var/run/docker.sock

```

Now We will Pull SonarQube Docker Image and run the SonarQube Container.

**Note** Make sure to add a port in the security group of your instance.

```bash

docker run -d --name sonar -p 9000:9000 sonarqube:lts-community

```





Now copy the IP address of Your EC2 instance

```bash

```



Now Login with these creds.

```bash

login admin

password admin

```

Now Update your Sonarqube password.



This is the Sonarqube dashboard.



### Step 04: Integrate SonarQube with GitHub Actions

Integrating SonarQube with GitHub Actions allows you to automatically analyze your code for quality and security as part of your continuous integration pipeline.We already have Sonarqube up and running

Now On Sonarqube Dashboard click on Manually



On the Next Page, You have to provide the name of your project and provide a branch name. The Click on SetUp Button.



On the Next Page, You have to click on "With GitHub Actions"



This will provide an overview of the project and provide some instructions to integrate.



Now Let's open your Giuthub Repository. 

Now Click on Settings. (if you are using my repo, make sure you have forked it)



Click on Secrets and variables and then click on actions.



It will open a page, Clock on **New Repository secret**.



Now Go to your Sonarqube dashboard

Copy SONAR_TOKEN and click on Generate Token



Click on Generate



Let's copy the Token and add it to GitHub secrets



Now Go back to GitHub and Paste the copied name for the secret and token

Name: SONAR_TOKEN

Secret: Paste Your Token and click on Add secret



Now go back to the Sonarqube Dashboard

Copy the Name and Value



Go to GitHub now and paste-like this and click on add secret



Our Sonarqube secrets are added and you can see it.



Go to Sonarqube Dashboard and click on continue



Now create your Workflow for your Project. In my case, I am using React Js. That's why I am selecting Other.



Now it Generates and workflow for my Project

**Note:** Make sure to use your files for this Section.

Go back to GitHub. click on Add file and then create a new file



Go back to the Sonarqube dashboard and copy the file name and content



Add in GitHub like this (Look at image)



Let's add our workflow

To do that click on Add file and then click on Create a new file



Here is the file name

```bash

.github/workflows/sonar.yml  #you can use any name I am using sonar.yml

```

Copy content and add it to the file

```bash

name: Sonar Code Review Workflow

on:

  push:

    branches:

      - main

jobs:

  build:

    name: Build

    runs-on: self-hosted

    steps:

      - uses: actions/checkout@v2

        with:

          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis

      - uses: sonarsource/sonarqube-scan-action@master

        env:

          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}

      # If you wish to fail your job when the Quality Gate is red, uncomment the

      # following lines. This would typically be used to fail a deployment.

      # - uses: sonarsource/sonarqube-quality-gate-action@master

      #   timeout-minutes: 5

      #   env:

      #     SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

```



Click on commit changes



Now workflow is created.

Start again GitHub actions runner from the Ec2 instance

Run These Commands

```bash

cd actions-runner

./run.sh

```

Click on Actions now

Now it's automatically started the workflow



Let's click on Build and see what are the steps involved



Click on Run Sonarsource and you can do this after the build completion



Build complete.

Go to the Sonarqube dashboard and click on projects and you can see the analysis



If you want to see the full report, click on issues.

### Step 05: Installation of tools (Java JDK, Terraform, Trivy, Kubectl, Node.js, NPM, AWS CLI)

Use this script to automate the installation of these tools.

Create script on Your aws ec2.

```bash

vim  run.sh

```

Copy the Below given content

```bash

#!/bin/bash

sudo apt update -y

sudo touch /etc/apt/keyrings/adoptium.asc

sudo wget -O /etc/apt/keyrings/adoptium.asc https://packages.adoptium.net/artifactory/api/gpg/key/public

echo "deb [signed-by=/etc/apt/keyrings/adoptium.asc] https://packages.adoptium.net/artifactory/deb $(awk -F= '/^VERSION_CODENAME/{print$2}' /etc/os-release) main" | sudo tee /etc/apt/sources.list.d/adoptium.list

sudo apt update -y

sudo apt install temurin-17-jdk -y

/usr/bin/java --version

# Install Trivy

sudo apt-get install wget apt-transport-https gnupg lsb-release -y

wget -qO - https://aquasecurity.github.io/trivy-repo/deb/public.key | gpg --dearmor | sudo tee /usr/share/keyrings/trivy.gpg > /dev/null

echo "deb [signed-by=/usr/share/keyrings/trivy.gpg] https://aquasecurity.github.io/trivy-repo/deb $(lsb_release -sc) main" | sudo tee -a /etc/apt/sources.list.d/trivy.list

sudo apt-get update

sudo apt-get install trivy -y

# Install Terraform

sudo apt install wget -y

wget -O- https://apt.releases.hashicorp.com/gpg | sudo gpg --dearmor -o /usr/share/keyrings/hashicorp-archive-keyring.gpg

echo "deb [signed-by=/usr/share/keyrings/hashicorp-archive-keyring.gpg] https://apt.releases.hashicorp.com $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/hashicorp.list

sudo apt update && sudo apt install terraform

# Install AWS CLI 

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

sudo apt-get install unzip -y

unzip awscliv2.zip

sudo ./aws/install

# Install kubectl

sudo apt update

sudo apt install curl -y

curl -LO https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl

sudo install -o root -g root -m 0755 kubectl /usr/local/bin/kubectl

kubectl version --client

# Install Node.js 16 and npm

curl -fsSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo gpg --dearmor -o /usr/share/keyrings/nodesource-archive-keyring.gpg

echo "deb [signed-by=/usr/share/keyrings/nodesource-archive-keyring.gpg] https://deb.nodesource.com/node_16.x focal main" | sudo tee /etc/apt/sources.list.d/nodesource.list

sudo apt update

sudo apt install -y nodejs

```

Now Run this script:

```bash

chmod +x run.sh

./run.sh

```

Now Check if these tools are installed or not. By checking Their versions.

```bash

kubectl version

aws --version

java --version

trivy --version

terraform --version

node -v

```

### Part 06: Provision AWS EKS With Terraform

Note: Before starting this part 06, Make sure Terraform and AWS CLI are installed and an aws account is configured on your system. You can see my [article](https://medium.com/@codewithmuh/installing-and-configuring-terraform-and-aws-cli-preparing-your-environment-for-infrastructure-as-1be1d3d0e92) to get aws and terraform installation and configuration done.

Now let's clone repo:

```bash

https://github.com/codewithmuh/react-aws-eks-github-actions.git

cd react-aws-eks-github-actions

cd terraform-eks

```

This will change your directory to terraform-eks files.

Now Change your s3 bucket in the backend file. (You can create S3 Bucket on AWS S3)

Now initialize the terraform.

```bash

terraform init

```



Now validate the configurations and syntax of all files.

```bash

terraform validate

```



Now Plan and apply your infrastructure.

```bash

terraform plan

terraform apply

```



It can take up to 10 Minutes to create your AWS EKS cluster.

You can check by going to aws EKS service.



Also, check your Node Grpup EC2 Instance, by going to EC2 Dashboard.



### Part 07: Dockerhub and Trivy Image Scan Setup

Now you have to create a Personal Access token for your Dockerhub account.

Go to docker hub and click on your profile --> Account settings --> security --> New access token





Copy This Token.



Add this Token to your Github actions Secret.



Also, add another secret of your dockerhub username.



Now create a new workflow with the name build.yaml . Make sure to replace the username and image name with yours.

```bash

name: Code Build Workflow

on:

    workflow_run:

      workflows: 

        - Sonar Code Review Workflow

      types:

        - completed

        

jobs:

  build:

    name: Build

    runs-on: self-hosted

    steps:

      - name: Checkout code

        uses: actions/checkout@v2

      - name: Docker build and push

        run: |

          docker build -t react-aws-eks-github-actions .

          docker tag react-aws-eks-github-actions codewithmuh/react-aws-eks-github-actions:latest

          docker login -u ${{ secrets.DOCKERHUB_USERNAME }} -p ${{ secrets.DOCKERHUB_TOKEN }}

          docker push codewithmuh/react-aws-eks-github-actions:latest

        env:

          DOCKER_CLI_ACI: 1

```



Now you can check image is pushed to your Dockerhub Account.



Now add another Workflow for the docker image scan, using the name 'trivy.yml'. Use the content below, but make sure to replace the image with your one.

```bash

name: Trivy Image Scan Workflow

on:

    workflow_run:

      workflows: 

        - Code Build Workflow

      types:

        - completed

  

jobs:

    build:

      name: Docker Image Scan

      runs-on: self-hosted

      steps:

        - name: Checkout Repository

          uses: actions/checkout@v2

        - name: Pull the Docker image

          run: docker pull codewithmuh/react-aws-eks-github-actions:latest

  

        - name: Trivy image scan

          run: trivy image codewithmuh/react-aws-eks-github-actions:latest

```

Here is the output of the build.



```bash

Now add these lines into build.yml steps, so we can test image on our aws ec2 instance.

   - name: Pull the Docker image On AWS EC2 For Testing

        run: docker pull sevenajay/tic-tac-toe:latest

      

      - name: Stop and remove existing container

        run: |

            docker stop react-aws-eks-github-actions || true

            docker rm react-aws-eks-github-actions || true

  

      - name: Run the container on AWS EC2 for testing

        run: docker run -d --name react-aws-eks-github-actions -p 3000:3000 codewithmuh/react-aws-eks-github-actions:latest

  

```

When Build is completed , visit the websiet in your browser.

Note: Make sure port 3000 is added on your Ec2.

```bash

"Your_EC2_IP:3000"

```



If it's not working, Try to pull an image on your system and check for errors. Fix them then build the GitHub actions again.

### Part 08: Deploy Application(image) to AWS EKS

Now create our final deploy.yml file to deploy on aws eks.

And Paste this content there. (Do not commit yet, commit it after part  09)

**Note**. Make sure to repalce cluster name and region nname with your one.

```bash

name: Deploy To EKS

on:

    workflow_run:

      workflows: 

        - Code Build Workflow

      types:

        - completed

  

jobs:

    build:

      name: Docker Image Scan

      runs-on: self-hosted

      steps:

        - name: Checkout Repository

          uses: actions/checkout@v2

        - name: Pull the Docker image

          run: docker pull codewithmuh/react-aws-eks-github-actions:latest

  

        - name: Update kubeconfig

          run: aws eks --region us-west-1 update-kubeconfig --name EKS_cluster_codewithmuh

  

        - name: Deploy to EKS

          run: kubectl apply -f deployment-service.yml

```

This will updates the kubeconfig to configure kubectl to work with an Amazon EKS cluster in the region with the name of your cluster, Also deploys Kubernetes resources defined in the deployment-service.yml file to the Amazon EKS cluster using kubectl apply.

### Part 09: Integrate Slack Notifications

No Go to Your Slack and create a new channel for notifications.

Now Click on your slack account name --> settings & Administration --> Manage Apps



t will open a new tab, select build now



Now Click on Create an app



Select from scratch



Provide a name for the app and select workspace and create



Select Incoming webhooks



Now Set incoming webhooks to on



Click on Add New webhook to workspace



Select Your channel that created for notifications and allow



It will generate a webhook URL copy it



Now come back to GitHub and click on settings

Go to secrets --> actions --> new repository secret and add



Add the below code to the deploy.yml workflow and commit and the workflow will start.

```bash

      - name: Send a Slack Notification

        if: always()

        uses: act10ns/slack@v1

        with:

          status: ${{ job.status }}

          steps: ${{ toJson(steps) }}

          channel: '#git'

        env:

          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

```

This step sends a Slack notification. It uses the act10ns/slack action and is configured to run "always," which means it runs regardless of the job status. It sends the notification to the specified Slack channel using the webhook URL stored in secrets.

If you get this error, Try to configure aws cli on the ec2 instance to resolve this matter.



Now our build is completed.



And here is the Slack notification.



Let’s go to the Ec2 ssh connection

Rn this command.

```bash

kubectl get all

```

Open the port in the security group for the Node group instance.

After that copy the external IP and paste it into the browser



Here is the Output: The website is Live.



### Part 10: Delete the infrastructure (To Avoid Extra Billing, if you are just using it for learning Purposes)

To destroy, Follow these Steps:

1. comment this line run: kubectl apply -f deployment-service.yml in deploy.yaml, adn add this line run: kubectl delete -f deployment-service.yml . You can say it replacement between lines. It will delete the container and delete the Kubernetes deployment.

2. Stop the self-hosted runner.

3. To delete the Eks cluster

   

```bash

cd /home/ubuntu

cd Project_root_folder

cd terraform-eks

terraform destroy --auto-approve

```

Then Delete ths dockerhub token. Once cluster is destroyed, delete the ec2 instance and iam role.

## Acknowledgements

Special thanks to codewithmuh for creating this incredible Devops Project and simplifying the CI/CD process.