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