Workflow file to deploy react app automatically on multiple domains from single runner
This blog post guides you through setting up automated deployment for your React application on different environments based on the branch you push to using GitHub Actions.
Benefits:
Saves time and effort by automating deployments.
Reduces human error by removing manual deployment steps.
Provides a clear separation between development, UAT, and production environments.
Prerequisites:
A React application
A GitHub repository
A self-hosted runner configured for your GitHub Actions workflow
Here is the yml file using which you can do deployment on testing and production domain at the same time
name: Deploy React App
on:
push:
branches:
- main
- production# Update with your production branch name
jobs:
deploy:
runs-on: self-hosted
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Create environment based on branch
run: |
if [[ ${{ github.ref_name }} == "main" ]]; then
echo "REACT_APP_BASE_URL=your api endpoint" >> .env.development
echo "UAT environment created"
else
echo "REACT_APP_BASE_URL=your api endpoint" >> .env.production
echo "Production environment created"
fi
- name: Install Node.js
uses: actions/setup-node@v2
with:
node-version: 16# Adjust as needed
- name: Install dependencies
run: npm i
- name: Build React app
run: |
if [[ ${{ github.ref_name }} == "main" ]]; then
echo "UAT build creating"
CI=false npm run build:development
else
echo "Production build creating"
CI=false npm run build:production
fi
- name: Deploy to EC2
run: |
if [[ ${{ github.ref_name }} == "main" ]]; then
echo "UAT build deploying"
scp -r ./build/* /home/builds/uatBuild
else
echo "Production build deploying"
scp -r ./build/* /home/builds/prodBuild
fi
Explanation:
Conditional Environment Creation:
The workflow checks the current branch name (${{ github.ref_name }}).
Based on the branch (main or production), appropriate environment variables are set in the .env.development file.
Deployment Steps:
The workflow fetches code from the repository.
Node.js is installed.
Dependencies are installed.
The React app is built using the build:development script (adjust if needed).
Conditional scp commands deploy the build to the designated directory on your EC2 instances based on the branch pushed.
More Secure Methods:
Environment Variables:
Consider using a secrets management solution in GitHub Actions to store sensitive information like base URLs. This prevents accidentally committing them to your public repository.
You can access secrets within your workflow using the ${{ secrets.<SECRET_NAME> }} syntax.
SSH Keys:
For scp deployments, avoid committing your SSH key to the repository. Instead, configure a deployer user on your EC2 instances and use a key pair specifically for this user.
You can configure a deployer user with limited privileges for security.
Conclusion:
This approach streamlines React app deployments based on branches, improving development efficiency and reducing manual configuration. By incorporating more secure practices for secrets and SSH access, you can further enhance the security of your deployment process.
