In today’s digital landscape, master the art of building, deploying and automating ReactJS Apps using Docker, NGINX and GitHub actions on AWS EC2. Dive into this comprehensive guide and transform your coding journey into an adventure of innovation, efficiency and cutting-edge technologies.

build_and_deploy_React.js_App_with_docker_to_AWS_EC2_via_Github_Actions.yml

name: Continuous Integration and Delivery

on:
  push:
    branches: [main]

env:
  #
  WEBSITE_IMAGE: ghcr.io/$(echo $GITHUB_REPOSITORY | tr '[:upper:]' '[:lower:]')/website
  NGINX_IMAGE: ghcr.io/$(echo $GITHUB_REPOSITORY | tr '[:upper:]' '[:lower:]')/nginx
  REGISTRY: ghcr.io

jobs:
  build:
    name: Build the Docker Image
    runs-on: ubuntu-latest

    steps:
      - name: checkout main
        uses: actions/checkout@v3

      - name: Set environment variables to .env
        run: |
          echo "WEBSITE_IMAGE=$(echo ${{env.WEBSITE_IMAGE}} )" >> $GITHUB_ENV
          echo "NGINX_IMAGE=$(echo ${{env.NGINX_IMAGE}} )" >> $GITHUB_ENV

      - name: Log in to GitHub Packages
        env:
          PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
        run: echo ${PERSONAL_ACCESS_TOKEN} | docker login ghcr.io -u ${{ secrets.NAMESPACE }} --password-stdin

      - name: Pull images
        run: |
          docker pull ${{ env.WEBSITE_IMAGE }} || true
          docker pull ${{ env.NGINX_IMAGE }} || true

      - name: Build images
        run: |
          docker-compose -f docker-compose.ci.yml build

      - name: Push images
        run: |
          docker push ${{ env.WEBSITE_IMAGE }}
          docker push ${{ env.NGINX_IMAGE }}

  checking-secrets:
    name: Checking secrets
    runs-on: ubuntu-latest
    needs: build
    outputs:
      secret_key_exists: ${{steps.check_secrets.outputs.defined}}
    steps:
      - name: Check for Secrets availabilities
        id: check_secrets
        shell: bash
        run: |
          if [[ -n "${{ secrets.PRIVATE_KEY }}" && -n "${{secrets.AWS_EC2_IP_ADDRESS}}" && -n "${{secrets.AWS_HOST_USER}}" ]]; then
            echo "defined=true" >> $GITHUB_OUTPUT;
          else
            echo "defined=false" >> $GITHUB_OUTPUT;
          fi

  deploy:
    name: Deploy to AWS EC2
    runs-on: ubuntu-latest
    needs: checking-secrets
    if: needs.checking-secrets.outputs.secret_key_exists == 'true'
    steps:
      - name: Checkout main
        uses: actions/checkout@v3

      - name: Add environment variables to .env
        run: |
          echo WEBSITE_IMAGE=${{ env.WEBSITE_IMAGE }} >> .env
          echo NGINX_IMAGE=${{ env.NGINX_IMAGE }} >> .env
          echo NAMESPACE=${{ secrets.NAMESPACE }} >> .env
          echo PERSONAL_ACCESS_TOKEN=${{ secrets.PERSONAL_ACCESS_TOKEN }} >> .env

      - name: Add the private SSH key to the ssh-agent
        env:
          SSH_AUTH_SOCK: /tmp/ssh_agent.sock
        run: |
          mkdir -p ~/.ssh
          ssh-agent -a $SSH_AUTH_SOCK > /dev/null
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          ssh-add - <<< "${{ secrets.PRIVATE_KEY }}"

      - name: Deploy images on AWS EC2
        env:
          SSH_AUTH_SOCK: /tmp/ssh_agent.sock

        run: |
          scp -o StrictHostKeyChecking=no -r ./.env ./docker-compose.prod.yml ${{secrets.AWS_HOST_USER}}@${{ secrets.AWS_EC2_IP_ADDRESS }}:
          ssh -o StrictHostKeyChecking=no ${{secrets.AWS_HOST_USER}}@${{ secrets.AWS_EC2_IP_ADDRESS }} << EOF
              docker-compose down --rmi all -v 
              docker login ghcr.io -u ${{secrets.NAMESPACE}} -p ${{secrets.PERSONAL_ACCESS_TOKEN}}
              docker pull $WEBSITE_IMAGE
              docker pull $NGINX_IMAGE 
              docker-compose --env-file=.env -f docker-compose.prod.yml up -d
              docker logout
          EOF

new update on the yml file