Before we dive into the project, make sure you have the following prerequisites in place:
AWS Account: You'll need an AWS account to use Elastic Beanstalk.
GitHub Account: You'll need a GitHub account for version control and setting up GitHub Actions.
Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed on your development machine.
AWS CLI: Install and configure the AWS Command Line Interface (CLI) to interact with AWS services from your terminal.
AWS Elastic Beanstalk Command Line Interface (EB CLI): Install EB CLI for managing Elastic Beanstalk environments.
Git: Make sure Git is installed for version control.
In this project, we'll perform the following steps:
Configure Elastic Beanstalk Environment: Set up an Elastic Beanstalk environment for deploying the React application.
GitHub Repository Setup: The source code for this project is available on GitHub: GitHub Repository.
GitHub Actions Workflow: Create a GitHub Actions workflow that automatically deploys your React application to Elastic Beanstalk when you push changes to the repository.
Deployment: Push changes to your GitHub repository and observe how GitHub Actions automatically deploys the application to Elastic Beanstalk.
Step 1: Configure Elastic Beanstalk Environment
Log in to your AWS Management Console.
Navigate to Elastic Beanstalk and create a new environment for your application.
Choose the environment type (e.g., Node.js, Web Server, or Docker) based on your application's requirements.
Configure environment variables, such as API endpoints or database connections, as needed.
Step 2: GitHub Repository Setup
Create a new GitHub repository for your React application.
Push your React application code to the GitHub repository using Git commands. Make sure your application's code is in the repository's main branch.
git init git add . git commit -m "Initial commit" git branch -M main git remote add origin <repository_url> git push -u origin main
Step 3: GitHub Actions Workflow
Create a GitHub Actions workflow to automate the deployment process. In your repository, create a
.github/workflows/main.yml file with the following content:
name: Deploy to AWS Elastic Beanstalk on: push: branches: - main jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: 14 - name: Install EB CLI run: | pip install awsebcli --upgrade --user echo 'export PATH=$PATH:$HOME/.local/bin' >> $HOME/.bashrc - name: Configure AWS credentials run: | echo AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID >> $GITHUB_ENV echo AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY >> $GITHUB_ENV echo AWS_DEFAULT_REGION=$AWS_DEFAULT_REGION >> $GITHUB_ENV - name: Deploy to Elastic Beanstalk run: | eb init -p <platform> <application-name> --region <region> eb deploy <environment-name>
<environment-name> with your specific AWS Elastic Beanstalk details.
Step 4: Deployment
Now, every time you push changes to your GitHub repository, the GitHub Actions workflow will automatically deploy your React application to AWS Elastic Beanstalk.
To trigger the initial deployment, push your React application code to the GitHub repository:
git add . git commit -m "Add new feature" git push
GitHub Actions will take care of the deployment process, and you can monitor the progress in your GitHub repository's Actions tab.