MEAN Stack Deployment: How to Deploy Angular on Vercel and Node.js on AWS
Building a MEAN stack application — MongoDB, Express, Angular, and Node.js — is one thing. Deploying it to a production environment is a different challenge altogether. In this guide, we cover how to deploy your MEAN stack app using Vercel for the Angular frontend and AWS EC2 for the Node.js backend, one of the most popular and cost-effective production setups available today.
Architecture Overview
The recommended deployment architecture separates concerns across three services:
- Angular Frontend — Deployed on Vercel (free tier available)
- Node.js + Express Backend — Deployed on AWS EC2
- MongoDB — Hosted on MongoDB Atlas (cloud database)
Part 1: Deploy Angular Frontend on Vercel
Step 1: Build Your Angular App
cd your-angular-app
ng build --configuration production
This generates a dist/ folder containing your production-ready files.
Step 2: Deploy to Vercel
npm install -g vercel
vercel login
vercel
Vercel auto-detects Angular and deploys it. To handle Angular's single-page routing, create a vercel.json file in your project root:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
Then redeploy to production:
vercel --prod
Part 2: Deploy Node.js Backend on AWS EC2
Step 1: Launch an EC2 Instance
Log in to the AWS Console, go to EC2, and launch a new instance. Choose Ubuntu 22.04 LTS with a t2.micro instance type (free tier eligible). In the security group, allow HTTP (port 80), HTTPS (port 443), and your application port.
Step 2: Install Node.js on EC2
sudo apt update && sudo apt upgrade -y
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
Step 3: Upload and Configure Your Backend
git clone https://github.com/your-username/your-repo.git
cd your-repo
npm install
Create your environment file on the server:
nano .env
PORT=5000
MONGODB_URI=mongodb+srv://user:pass@cluster.mongodb.net/mydb
JWT_SECRET=your_secret_key
Step 4: Run with PM2 Process Manager
PM2 keeps your Node.js app running even after you disconnect from the server and automatically restarts it on reboot.
sudo npm install -g pm2
pm2 start server.js --name "mean-backend"
pm2 startup
pm2 save
Step 5: Configure Nginx as a Reverse Proxy
sudo apt install nginx -y
sudo nano /etc/nginx/sites-available/default
Replace the default configuration with the following:
server {
listen 80;
server_name your-ec2-public-ip;
location / {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Host $host;
}
}
sudo nginx -t
sudo systemctl restart nginx
Part 3: Connect MongoDB Atlas
Go to mongodb.com/atlas, create a free cluster, whitelist your EC2 IP address in Network Access, and get your connection string. Then connect in your Express app:
const mongoose = require('mongoose');
require('dotenv').config();
mongoose.connect(process.env.MONGODB_URI)
.then(() => console.log('MongoDB connected'))
.catch(err => console.error('MongoDB error:', err));
Key Benefits of This Deployment Setup
This architecture offers several important advantages for production MEAN stack applications:
- Vercel provides free hosting with global CDN for the Angular frontend
- AWS EC2 gives full control over the Node.js runtime and environment
- MongoDB Atlas handles database scaling and backups automatically
- PM2 ensures zero-downtime restarts and process monitoring
- Nginx adds a professional reverse proxy layer with easy SSL support
Conclusion
You have successfully deployed a full MEAN stack application with Angular on Vercel and Node.js with Express on AWS EC2 backed by MongoDB Atlas. This setup is scalable, cost-effective, and ready for real production traffic.
For additional security, consider adding an SSL certificate to your EC2 instance using Let's Encrypt and Certbot. This gives your API a proper HTTPS endpoint trusted by all browsers. Drop a comment below if you have any questions about the deployment process!
0 Comments