DEV Community

Cover image for Deploy Next.js on AWS EC2 with PM2, Nginx, and Cloudflare CDN
Dinh Hoang Duy
Dinh Hoang Duy

Posted on

Deploy Next.js on AWS EC2 with PM2, Nginx, and Cloudflare CDN

#webdev #devops #nextjs #react

Deploying a Next.js application on AWS EC2 can be an efficient way to host a scalable web application. This guide will provide a detailed step-by-step approach to setting up and deploying a Next.js application on an EC2 instance, managing the process using PM2, configuring Nginx as a reverse proxy, and optimizing the domain with Cloudflare CDN.

Prerequisites

  • AWS EC2 instance running Ubuntu (20.04 or later)
  • A Next.js application ready for deployment
  • Domain registered on Namecheap
  • A Cloudflare account
  • Basic knowledge of Linux commands

1. Setting Up an AWS EC2 Instance

Step 1: Launch an EC2 Instance

  1. Log in to your AWS Console and navigate to EC2.
  2. Click on Launch Instance.
  3. Choose Ubuntu 22.04 LTS as the OS.
  4. Select an instance type:
    • t2.micro (Free-tier eligible for testing/small apps)
    • t3.medium or higher for production apps
  5. Configure security groups:
    • SSH (port 22): Allow only your IP for security.
    • HTTP (port 80): Allow public access.
    • HTTPS (port 443): Allow public access.
    • Custom TCP (port 3000): Allow only if testing Next.js directly.

Update Security Group

  1. Launch the instance and download the key pair for SSH access.

Step 2: Connect to the Instance

Use SSH to connect:

ssh -i your-key.pem ubuntu@your-ec2-public-ip
Enter fullscreen mode Exit fullscreen mode

If got permission error, please run this before:

chmod 400 your-key.pem
Enter fullscreen mode Exit fullscreen mode

2. Install Node.js and PM2

Step 1: Install Node.js and npm

Update and install Node.js:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
Enter fullscreen mode Exit fullscreen mode

Verify installation:

node -v
npm -v
Enter fullscreen mode Exit fullscreen mode

Step 2: Install PM2 for Process Management 

npm install -g pm2
pm2 startup
Enter fullscreen mode Exit fullscreen mode

3. Deploy the Next.js Application

Step 1: Clone Your Repository

Navigate to the home directory and clone your Next.js project:

cd ~
git clone https://github.com/yourusername/your-nextjs-app.git
cd your-nextjs-app
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Dependencies 

npm install
Enter fullscreen mode Exit fullscreen mode

Step 3: Build the Next.js Application 

npm run build
Enter fullscreen mode Exit fullscreen mode

Step 4: Start the App with PM2 

pm2 start npm --name "nextjs-app" -- start
pm2 save
Enter fullscreen mode Exit fullscreen mode

Check status:

pm2 list
Enter fullscreen mode Exit fullscreen mode

4. Setting Up Nginx as a Reverse Proxy

Step 1: Install Nginx 

sudo apt install nginx -y
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure Nginx

Open the Nginx configuration file:

sudo nano /etc/nginx/sites-available/default
Enter fullscreen mode Exit fullscreen mode

Replace its contents with:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
Enter fullscreen mode Exit fullscreen mode

Save and exit (CTRL+X, then Y, then ENTER).

Step 3: Restart Nginx 

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

Check status:

sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

5. Configure Namecheap DNS Settings

  1. Log in to your Namecheap account.
  2. Go to Domain List > Select your domain > Click Manage.
  3. Under the Advanced DNS tab, add an A Record:
    • Host: @
    • Value: Your EC2 public IP address
    • TTL: Automatic
  4. Add a CNAME Record:
    • Host: www
    • Value: yourdomain.com
    • TTL: Automatic
  5. Save changes and wait for propagation (~30 minutes to a few hours).

6. Optimize with Cloudflare CDN

Step 1: Add Your Site to Cloudflare

  1. Sign up/log in to Cloudflare.
  2. Click Add a Site and enter your domain.
  3. Cloudflare will scan your DNS records.
  4. Choose Free Plan and continue.
  5. Update your Namecheap nameservers with the ones provided by Cloudflare.
  6. Wait for DNS propagation.

Step 2: Enable CDN and Security Features

  • Enable Automatic HTTPS Rewrites.
  • Enable Always Use HTTPS.
  • Turn on CDN caching for improved performance.
  • Enable DDoS protection and security features.

7. Secure Your Site with SSL

Once Cloudflare is active:

  1. Go to Cloudflare dashboard > SSL/TLS.
  2. Set SSL mode to Full (Strict).
  3. Restart Nginx to apply changes: 
sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

8. Deploying Updates

To deploy updates, SSH into the instance and run:

cd ~/your-nextjs-app
git pull origin main
npm install
npm run build
pm2 restart nextjs-app
Enter fullscreen mode Exit fullscreen mode

9. Common Errors and Solutions

Error 1: PM2 Not Restarting on Reboot

Run:

pm2 startup
pm2 save
Enter fullscreen mode Exit fullscreen mode

Error 2: Nginx 502 Bad Gateway

Check if the Next.js app is running:

pm2 list
Enter fullscreen mode Exit fullscreen mode

If not running, restart:

pm2 restart nextjs-app
Enter fullscreen mode Exit fullscreen mode

Error 3: DNS Propagation Delay

Check DNS propagation:
www.whatsmydns.net

Conclusion

Congratulations! Your Next.js application is now live on AWS EC2 with PM2 for process management, Nginx as a reverse proxy, and a custom domain from Namecheap optimized with Cloudflare CDN. This setup ensures high availability, security, and performance for your web application.
In the next post, I'll show you how to add a GitHub Action to automate CI/CD for your application.

Top comments (0)