Comprehensive Guide: Deploying a React Visitor Counter with AWS Elastic Beanstalk and GitHub Actions

Welcome to this step-by-step guide on deploying a React-based visitor counter application using AWS Elastic Beanstalk and GitHub Actions. This guide covers everything from initial setup to deployment and best practices.

Prerequisites

• AWS Account with administrative access

• GitHub account

• Basic knowledge of React, Git, and AWS services

• Node.js and npm installed locally

Part 1: Initial Setup and Local Development

1.1 Getting the Code

git clone https://github.com/SlayerK15/Visitor-Counter-EBS-React.git
cd Visitor-Counter-EBS-React

1.2 Local Testing

npm install
npm start

Part 2: AWS Elastic Beanstalk Configuration

2.1 Creating the Application

1. Log into AWS Console

2. Navigate to Elastic Beanstalk

3. Click "Create Application"

4. Enter application details:

   • Application name: visitor-counter

   • Platform: Docker running on 64bit Amazon Linux 2023/4.4.2

2.2 Environment Setup

Create a new environment with the following specifications:

• Environment name: visitor-counter-env

• Environment type: Web server environment

The initialization process takes approximately 5 minutes. Monitor the progress in the Events tab:

Part 3: IAM Configuration

3.1 Creating IAM User

1. Navigate to IAM in AWS Console

   

2. Create new user: "github-actions-visitor-counter"

   

3. Attach required policies:

   • AmazonS3FullAccess

   • AdministratorAccess-AWSElasticBeanstalk

3.2 Generating Access Keys

After user creation, generate and save the access credentials:

⚠️ Important: Save these credentials securely - you won't be able to access the secret key again.

Part 4: GitHub Repository Configuration

4.1 Adding Repository Secrets

1. Go to your GitHub repository settings

   

2. Navigate to Secrets and Variables → Actions

   

3. Add two new repository secrets:

AWS_ACCESS_KEY_ID     : [Your AWS Access Key]
AWS_SECRET_ACCESS_KEY : [Your AWS Secret Key]

Part 5: Deployment Process

5.1 GitHub Actions Setup

The workflow configuration will automatically:

• Build the React application

• Deploy to Elastic Beanstalk

• Handle environment updates

5.2 Deploy and Monitor

1. Commit and push your changes:

git add .
git commit -m "added workflows for actions"
git push origin main

2. Monitor deployment:

   • Check GitHub Actions tab for workflow status

   • Monitor Elastic Beanstalk Events tab

5.3 Verify Deployment

Once deployed, your application will be accessible via the Elastic Beanstalk URL:

Part 6: Best Practices

6.1 Security Best Practices

• Regular rotation of AWS access keys

• Use of least privilege principle for IAM roles

• Secure storage of credentials

• Regular security audits

6.2 Deployment Best Practices

• Use staging environments for testing

• Implement proper health checks

• Set up monitoring and alerts

• Regular backup procedures

6.3 Application Management

• Regular dependency updates

• Proper error handling

• Performance monitoring

• Resource optimization

Part 7: Troubleshooting Common Issues

7.1 Deployment Failures

• Issue: Environment health degradation

  • Solution: Check application logs and security group configurations

• Issue: Permission denied errors

  • Solution: Verify IAM permissions and GitHub secrets

7.2 Application Issues

• Issue: Application not loading

  • Solution: Verify environment variables and port configurations

• Issue: Build process failures

  • Solution: Check dependencies and build scripts

Part 8: Monitoring and Maintenance

8.1 Regular Monitoring

• Monitor application health status

• Review CloudWatch metrics

• Check error logs regularly

• Monitor resource usage

8.2 Cost Management

• Set up billing alerts

• Monitor resource utilization

• Clean up unused resources

• Optimize instance types

Conclusion

You now have a fully functional React visitor counter application deployed on AWS Elastic Beanstalk with automated deployments via GitHub Actions. Remember to:

• Regularly monitor your application

• Keep dependencies updated

• Follow security best practices

• Maintain proper documentation

Your application URL will be available in the Elastic Beanstalk console, typically following the format:

visitor-counter-env.eba-[unique-id].region.elasticbeanstalk.com

For ongoing maintenance and updates, simply push changes to your main branch, and GitHub Actions will handle the deployment automatically.