Deploying a Next.js App on AWS EC2 Ubuntu Server

Deploying a Next.js App on AWS EC2 Ubuntu Server

In this guide, we'll walk through the process of deploying a Next.js application on an AWS EC2 Ubuntu Server instance. We'll cover everything from setting up the server, installing necessary software, configuring Nginx to serve the app, and setting up a custom domain.

Step 1: Launch an EC2 Instance

1. Log in to AWS Console: Navigate to the EC2 service.
2. Launch Instance: Choose an Ubuntu Server AMI and select an instance type.
3. Configure Instance: Set up networking, storage, and security groups as needed.
4. Launch: Choose or create a key pair and launch the instance.

Step 2: Connect to Your EC2 Instance

Use SSH to connect to your instance:

ssh -i "your-key-pair.pem" ubuntu@your-ec2-public-ip

Step 3: Set Up the Environment

Update the system and install necessary software:

sudo apt update
sudo apt upgrade -y
sudo apt install nginx nodejs npm -y

Step 4: Deploy Your Next.js App

1. Upload your Next.js app to the server or clone it from a Git repository.
2. Navigate to the app directory and install dependencies:

cd your-nextjs-app
npm install

1. Build your Next.js app:

npm run build

1. Start your app:

npm start

Start your app with PM2:

Instead running npm start we can run the server in background using pm2.

sudo npm install -g pm2
pm2 start npm --name "your-app-name" -- start

Replace "your-app-name" with the desired name for your application process. This command starts your Next.js app with PM2, ensuring it stays running even after system restarts or crashes.

pm2 startup
pm2 save

Step 5: Configure Nginx

Create an Nginx configuration file for your Next.js app:

sudo nano /etc/nginx/sites-available/nextjs-app

Paste the following configuration, replacing your-domain.com with your domain and your-port with your app's port (usually 3000):

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:your-port;
        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;
    }
}

Create a symbolic link to enable the configuration:

sudo ln -s /etc/nginx/sites-available/nextjs-app /etc/nginx/sites-enabled/

Test the Nginx configuration:

sudo nginx -t

If there are no errors, restart Nginx:

sudo systemctl restart nginx

Step 6: Set Up DNS Records for Your Domain

1. Log in to your domain registrar's website.
2. Navigate to the DNS management section.
3. Add an "A" record pointing to your EC2 instance's public IP address.

Step 7: Configure SSL/TLS (Optional)

To secure your website with HTTPS using Let's Encrypt:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

Follow the prompts to configure Certbot and automatically set up HTTPS.

Step 8: Verify Your Setup

Visit your domain in a web browser to ensure your Next.js app is accessible. Verify that the connection is secure if you set up SSL/TLS.

Congratulations! Your Next.js application is now deployed and accessible on AWS EC2 with Nginx serving as a reverse proxy.

Comments

[avinash Singh]

i dont think it work on fullstack nextjs project.It works on small project

[Sh Raj]

This is the ultimate way bro if you know

[Emmanuel Joseph]

The steps are quite straightforward

[Sh Raj]

Thanks ☺️