■ Frontend Deployment to AWS EC2 (with NGINX) — Step-by-Step Notes
■ 1. Create & Launch EC2 Instance
- OS: Ubuntu 22.04 LTS
- Instance type: [Link]
- Key pair: Created for SSH access
- Security Group: Port 22 (SSH) and Port 80 (HTTP) allowed
■ 2. SSH into EC2 Instance
ssh -i [Link] ubuntu@your-ec2-public-ip
■ 3. Install [Link]
node -v
npm -v
If needed, install another version using NVM:
curl -o- [Link] | bash
source ~/.bashrc
nvm install 20
nvm use 20
■ 4. Upload Project to EC2
- Navigate to home directory: cd ~
- Clone or push project folder (Frontend/)
■ 5. Install Project Dependencies
cd ~/Frontend
npm install
■ 6. Build the Production App
npm run build
■ 7. Install & Configure NGINX
sudo apt update
sudo apt install nginx -y
sudo systemctl status nginx
■ 8. Copy Build Files to Nginx Directory
sudo cp -r dist/* /var/www/html/
■ 9. Clean Up Default NGINX File (Optional)
sudo rm /var/www/html/[Link]
■ 10. Allow Traffic to Port 80
- Add inbound rule for port 80 in AWS Security Group
■ 11. Verify Public Access
curl [Link]
■ You accessed your app successfully at:
[Link]
■■ Errors You Faced and Solutions
- cd Frontend failed → You were in wrong directory (/var/www/html)
- Node version mismatch → [Link] v22 confirmed working
- Nginx not serving app → Files not copied to /var/www/html
- App not opening → Port 80 was initially blocked
■ Summary of Key Commands
node -v
npm -v
cd ~/Frontend
npm install
npm run build
sudo apt update
sudo apt install nginx -y
sudo cp -r dist/* /var/www/html/
curl [Link]
■ Optional: What's Next?
- Custom domain & SSL
- Backend with [Link]/Express & Nginx reverse proxy
- GitHub Actions for CI/CD
