Day 87 of 90 Days of DevOps Challenge: Deploying a React Application on AWS Elastic Beanstalk Using GitHub Actions
Table of contents
In the modern development landscape, Continuous Integration and Continuous Deployment (CI/CD) practices are essential for streamlining application deployment. In this blog post, we will walk through the steps to deploy a React application on AWS Elastic Beanstalk using GitHub Actions, enabling a seamless and automated deployment process.
Project Overview
This project aims to automate the deployment of a React application hosted on AWS Elastic Beanstalk. We will leverage GitHub Actions to create a CI/CD pipeline that will automatically deploy our application whenever changes are made to the GitHub repository.
Key Components
1. AWS Elastic Beanstalk
AWS Elastic Beanstalk is a Platform as a Service (PaaS) that allows developers to deploy and manage applications easily. It automatically handles the deployment, from capacity provisioning and load balancing to application health monitoring.
2. GitHub Actions
GitHub Actions is a CI/CD automation tool integrated directly into GitHub, allowing developers to create workflows for building, testing, and deploying their applications automatically.
Implementation Steps
Step 1: Get the Source Code
Clone the Repository: Start by obtaining the React application code from GitHub.
git clone <your-react-app-repo-url> cd <your-react-app-directory>
Step 2: Set Up AWS Elastic Beanstalk
Create an Elastic Beanstalk Environment: Log in to the AWS Management Console, navigate to Elastic Beanstalk, and create a new application. Choose the platform as "Node.js" since React applications are built on Node.js.
Configure Environment Settings: During the environment setup, specify the application name, environment name, and other required configurations.
Obtain Your AWS Access Key and Secret Key: These credentials will be used to authenticate the GitHub Actions workflow with your AWS account.
Step 3: Build the GitHub Actions Workflow
Create the Workflow File: In your React application directory, create a
.github/workflows
directory if it doesn't already exist. Inside this directory, create a new YAML file (e.g.,deploy.yml
).Add Workflow Configuration: Edit the
deploy.yml
file and add the following configuration:name: Deploy to Elastic Beanstalk on: push: branches: - main # Change to your main branch 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' # Change to your Node.js version - name: Install dependencies run: npm install - name: Build application run: npm run build - name: Configure AWS Credentials uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: <your-region> - name: Deploy to Elastic Beanstalk run: | zip -r my-app.zip build/* eb init <your-application-name> --region <your-region> eb deploy <your-environment-name>
Replace
<your-region>
,<your-application-name>
, and<your-environment-name>
with your specific details.
Step 4: Configure GitHub Secrets
Add AWS Credentials: For security reasons, store your AWS credentials in GitHub Secrets. Go to your GitHub repository settings, then to "Secrets" and add the following secrets:
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
Enter your AWS access key and secret key in their respective fields.
Step 5: Push Changes and Deploy
Commit and Push: Commit your changes and push them to the main branch of your GitHub repository.
git add . git commit -m "Set up GitHub Actions workflow for Elastic Beanstalk deployment" git push origin main
Check the GitHub Actions Tab: After pushing your changes, navigate to the "Actions" tab in your GitHub repository to see your workflow running. If everything is set up correctly, your React application should be deployed to AWS Elastic Beanstalk.
Step 6: Access Your React Application
- Access the Application: Once the deployment is complete, you can access your React application through the URL provided by Elastic Beanstalk.
Conclusion
By following the steps outlined in this blog post, you can successfully deploy your React application on AWS Elastic Beanstalk using GitHub Actions. This project not only showcases your ability to work with cloud services but also demonstrates your proficiency in CI/CD practices. Automating the deployment process will save you time and ensure that your application is always up-to-date with the latest changes.