Day 87 Task: Project-8

Day 87 Task: Project-8

Streamlining React Deployment on AWS Elastic Beanstalk with GitHub Actions: Automate Your Success

·

4 min read

Play this article

Project Description

The project involves deploying a react application on AWS Elastic BeanStalk using GitHub Actions. Git Hub actions allow you to perform CICD with GitHub Repository integrated.

🔶 Task: Automated React application Deployment on AWS Elastic BeanStalk with GitHub Actions


  • Setup AWS Elastic BeanStalk:

    Create an application

    Configure environment:

    Select docker as a platform:

    Select a service existing if you have one or use an existing one, and make a role for elastic beanstalk on IAM with the given permission as AWSElasticBeanstalkWebTier, AWSElasticBeanstalkWorkerTier, AWSElasticBeanstalkMulticontainerDocker

    Select Default VPC:

    Select the instance subnets:

    Select security group as default:

    Use t3.medium instance type.

    Proceed with the default settings and submit it.

    After clicking "Submit," wait for the environment to be set up.

    To access your deployed app, go to the "Domain" section and follow the provided URL. This link will lead you to your live React app running on AWS Elastic Beanstalk

    Check that the instance is running.

  • Get source code from GitHub.

  • Enable CI/CD with GitHub Actions:

  • Check Dockerfile:

  •       FROM node:14-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
    
  • Configure CI/CD pipeline with GitHub Actions:
    Locate the "deploy-react.yml" file and move it under the ".github/workflows" directory. Update the file with relevant parameters such as branch name, application name, environment name, AWS access key, AWS secret access key and region.

      name : Deploy react application in BeanStalk
      on :
          push:
              branches:
                  - "main"
      jobs:
          deploy: 
              runs-on: ubuntu-latest
              steps:
              - name: Checkout source code
                uses: actions/checkout@v2
    
              - name: Generate deployment package
                run: zip -r deploy.zip . -x '*.git*'
    
              - name: Deploy to EB
                uses: einaregilsson/beanstalk-deploy@v21
                with:
                  aws_access_key: ${{ secrets.AWS_ADMIN_ACCESS_KEY_ID }}
                  aws_secret_key: ${{ secrets.AWS_ADMIN_SECRET_ACCESS_KEY_ID }}
                  application_name: reactapp
                  environment_name: Reactapp-env-1
                  version_label: ${{ github.sha }}
                  existing_bucket_name: elasticbeanstalk-us-east-1-<your-AWS account ID>
                  region: us-east-1
                  deployment_package: deploy.zip
    
  • Add your AWS access key and AWS secret access key as secrets in your GitHub repository settings.

  • Trigger the GitHub Action CI/CD pipeline by pushing changes to the "main" branch.

  • Check and verify the successful deployment of instances.

  • Confirm the Elastic Beanstalk environment link for your React application.

Conclusion

In this project, we successfully deployed a React application on AWS Elastic Beanstalk using GitHub Actions for Continuous Integration and Continuous Deployment (CICD). Here's a summary of the key steps and achievements:

  • We set up an AWS Elastic Beanstalk environment, creating an application, configuring the environment, selecting the platform, and specifying instance settings.

  • IAM roles with appropriate permissions were established to support Elastic Beanstalk operations.

  • The GitHub Actions workflow was created to automate the deployment process, ensuring that changes pushed to the "main" branch trigger the CICD pipeline.

  • The AWS access key and secret access key were securely stored as secrets in the GitHub repository settings.

  • Instances were successfully deployed and confirmed to be running.

  • The Elastic Beanstalk environment's URL was checked and verified, making the React application accessible.

This project demonstrates a streamlined process for deploying applications using modern DevOps practices, integrating GitHub Actions for automation and AWS Elastic Beanstalk for scalability and ease of deployment. By following best practices for AWS resources and secure key management, we've achieved a robust CI/CD pipeline for our React application.

This project serves as an example of how to deploy applications to AWS Elastic Beanstalk while maintaining a high level of automation and security. It's a valuable reference for anyone looking to deploy web applications in a scalable and efficient manner.


Happy Learning :)

Stay in the loop with my latest insights and articles on cloud ☁️ and DevOps ♾️ by following me on Hashnode, LinkedIn (https://www.linkedin.com/in/chandreshpatle28/), and GitHub (https://github.com/Chandreshpatle28).

Thank you for reading! Your support means the world to me. Let's keep learning, growing, and making a positive impact in the tech world together.

#Git #Linux Devops #Devopscommunity #90daysofdevopschallenge #python #docker #Jenkins #Kubernetes #Terraform #AWS #Grafana

Did you find this article valuable?

Support CHANDRESH PATLE by becoming a sponsor. Any amount is appreciated!