Deploying a Next.js App on AWS EC2: A Beginner's Guide

Learn how to deploy a Next.js application on AWS EC2 with Amazon Linux, Nginx, and PM2. This step-by-step guide is perfect for beginners and covers everything from launching an EC2 instance to configuring Nginx and ensuring continuous application uptime with PM2.

As a software developer, deploying applications has often been abstracted away by managed services or handled by dedicated DevOps teams. However, I recently had the opportunity to roll up my sleeves and deploy a Next.js application on AWS EC2. This experience was both enlightening and rewarding, and I hope that by sharing my journey, I can help others who might be new to this process.

Step 1: Launching the AWS EC2 Instance

The first step in deploying any application on AWS is to create an EC2 instance. For this deployment, I opted for an Amazon Linux 2 AMI, which provides a stable and performant environment ideal for web applications.

Instance Selection: I chose the t2.micro instance type, which is part of AWS's free tier, making it cost-effective for small-scale applications.
Security Groups: Configuring security groups was crucial. I allowed HTTP (port 80) and HTTPS (port 443) traffic from anywhere, and restricted SSH (port 22) access to my IP address for security purposes.
Key Pair: Finally, I downloaded the key pair (.pem file), which would allow me to securely connect to the instance via SSH.

Step 2: Connecting to the EC2 Instance

Once the instance was up and running, I connected to it using SSH. This was as simple as running the following command in my terminal:

ssh -i /path/to/your-key.pem ec2-user@your-ec2-public-dns

Step 3: Installing Dependencies

With the EC2 instance ready, the next step was to install the necessary software packages. Amazon Linux 2 uses yum as its package manager, so I updated the package lists and installed Git, Nginx, Node.js, and npm:

sudo yum update -y
sudo yum install -y git nginx nodejs npm

Step 4: Cloning the Repository

After setting up the environment, I navigated to the home directory and cloned the repository containing my Next.js application:

cd ~
git clone <https://github.com/your-username/your-repo.git>
cd your-repo

Step 5: Building and Starting the Application

Next, I installed the application dependencies and built the Next.js application:

npm install
npm run build

To verify that everything was working correctly, I started the application using:

npm start

At this point, the application was running on port 3000 of the EC2 instance, but it wasn't accessible externally just yet.

Step 6: Configuring Nginx

Nginx serves as a reverse proxy, directing traffic from the default HTTP port (80) to the application running on port 3000. To configure this, I opened the Nginx configuration file:

sudo vim /etc/nginx/nginx.conf

Within the http block, I added the following line to include additional site configurations:

include /etc/nginx/sites-enabled/*;

Step 7: Editing the Nginx Site Configuration

Next, I configured Nginx to route incoming traffic to my Next.js application. I updated the existing server block in the configuration file:

server {
    listen 80;
    server_name YOUR-EC2-PUBLIC-DNS-HERE;
 
    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;
    }
 
    error_page 404 /404.html;
    location = /40x.html {
    }
 
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

This configuration ensures that all HTTP requests to the EC2 instance's public DNS are forwarded to the Next.js application.

Step 8: Testing and Restarting Nginx

Before restarting Nginx, it's important to test the configuration for any syntax errors:

sudo nginx -t

If everything is correct, you should see:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Finally, I restarted Nginx to apply the changes:

sudo systemctl restart nginx

Step 9: Installing and Configuring PM2

To ensure that my application runs continuously, even if the SSH connection is closed, I used PM2, a process manager for Node.js applications. I installed PM2 globally:

sudo npm install -g pm2

Then, I started the application with PM2 and saved the process list:

pm2 start yarn --name "my-nextjs-app" -- start
pm2 save

Lastly, I configured PM2 to start the application on system boot:

pm2 startup

The command output provides a startup script command, which I ran to complete the setup.

Final Thoughts

By following these steps, I successfully deployed a Next.js application on AWS EC2. The process, while new to me, turned out to be straightforward, thanks to the powerful tools and services provided by AWS, Nginx, and PM2.

If you're also new to deploying applications, I hope this guide helps demystify the process. Remember, the key to mastering deployment is practice and patience. Happy coding!

Table of Contents

Deploying a Next.js App on AWS EC2: A Beginner's Guide