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

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
bash

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
bash

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
bash

Step 5: Building and Starting the Application

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

npm install
npm run build
bash

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

npm start
bash

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
bash

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

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

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 {
    }
}
bash

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
bash

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
bash

Finally, I restarted Nginx to apply the changes:

sudo systemctl restart nginx
bash

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
bash

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

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

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

pm2 startup
bash

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!