Comprehensive Guide: React App Deployment Pipeline with GitHub Actions, EC2, and Linode

1. Development Environment Setup React project initialized and developed locally Version control managed through Git GitHub repository created with two primary branches: a) 'test' branch for ongoing development and testing b) 'main' branch for production-ready code
2. Local Development Workflow Developers work on features in local environments Code changes committed regularly VS Code used as the primary IDE Git integration in VS Code utilized for streamlined version control
3. Pushing to Test Branch Developers use VS Code's Git integration or command line to push changes Command: git push origin test This action triggers the test deployment pipeline
4. Test Deployment Pipeline (GitHub Actions) GitHub Action workflow triggered on push to 'test' branch Workflow file: .github/workflows/test-deploy.yml Key steps in the workflow: a) Checkout code b) Set up Node.js environment c) Install dependencies: npm install d) Build React app: npm run build e) Deploy to EC2 test server: SSH into EC2 instance Install or update Nginx if necessary Copy built files to Nginx serving directory (e.g., /var/www/html) Restart Nginx to apply changes
5. EC2 Test Server Configuration Amazon EC2 instance running Linux (e.g., Amazon Linux 2 or Ubuntu) Nginx installed and configured to serve React app Security group configured to allow inbound traffic on port 80 (HTTP) and 22 (SSH) Elastic IP assigned for consistent access
6. Review and Approval Process Lead developer accesses the test server to review deployed changes Tests functionality, performance, and user experience Provides feedback to the development team if changes are needed Approves changes for production when satisfied
7. Merging to Main Branch Upon approval, a pull request is created to merge 'test' into 'main' Lead developer reviews the pull request and approves the merge Merging triggers the production deployment pipeline
8. Production Deployment Pipeline (GitHub Actions) Separate GitHub Action workflow for production deployment Workflow file: .github/workflows/prod-deploy.yml Similar steps to test deployment, but targets Linode server: a) Checkout code b) Set up Node.js environment c) Install dependencies d) Build React app e) Deploy to Linode production server: SSH into Linode instance Install or update Nginx Copy built files to Nginx serving directory Restart Nginx
9. Linode Production Server Configuration Linode instance running Linux (e.g., Ubuntu Server) Nginx installed and configured to serve React app Firewall configured to allow inbound traffic on ports 80 (HTTP), 443 (HTTPS), and 22 (SSH) Domain name configured to point to Linode instance IP
10. Nginx Configuration (Both Servers) Nginx configured to serve static React files Example configuration in /etc/nginx/sites-available/default:
11. SSL/TLS Implementation (Production) Let's Encrypt used for free SSL/TLS certificates Certbot used to automate certificate issuance and renewal Nginx configured to redirect HTTP to HTTPS
12. Monitoring and Maintenance Regular server updates and security patches Monitoring of server health and application performance Backup strategy implemented for both code and server data

This detailed guide covers the entire deployment pipeline from local development to production, including specific steps for GitHub Actions, server configurations, and important considerations for both test and production environments.

repo: https://github.com/soundn/CICD-react-frontend.git