Deploying a Next.js App on AWS EC2 Ubuntu Server
Tags: aws, ec2, nextjs, ubuntu
Published: 2024-05-14 14:47:35

**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:

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

### Step 3: Set Up the Environment

Update the system and install necessary software:

```bash
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:

```bash
cd your-nextjs-app
npm install
```

3. Build your Next.js app:

```bash
npm run build
```

4. Start your app:

```bash
npm start
```

### Start your app with PM2:

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


```bash
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.
```bash
pm2 startup
pm2 save
```

### Step 5: Configure Nginx

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

```bash
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):

```nginx
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:

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

Test the Nginx configuration:

```bash
sudo nginx -t
```

If there are no errors, restart Nginx:

```bash
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:

```bash
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.