Deploying a Next.js Application from Scratch on Ubuntu

Deploying a Next.js application professionally involves several steps, from server setup to automated CI/CD. This guide covers everything from a fresh Ubuntu server to a production-ready Next.js deployment with PM2, Nginx, and GitHub Actions.

1. Prepare Your Ubuntu Server

Start by updating your system and installing essential tools:


sudo apt update && sudo apt upgrade -y
sudo apt install -y curl git build-essential ufw
sudo ufw allow OpenSSH
sudo ufw allow 80
sudo ufw allow 443
sudo ufw enable

2. Install Node.js via NVM

Use NVM (Node Version Manager) to install the latest stable Node.js LTS version. NVM allows easy version management.


curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts
node -v
npm -v

3. Upload or Clone Your Next.js Application

Place your project on the server. You can clone from GitHub or upload via SCP/rsync:


git clone https://github.com/yourusername/next-app-skytup.git ~/akash/next-app-skytup
cd ~/akash/next-app-skytup
npm install

4. Build and Run Your Next.js App with PM2

PM2 ensures your app stays online, restarts on failure, and can auto-start on server reboot.


npm install -g pm2
npm run build
pm2 start npm --name "next-app-skytup" -- start
pm2 save
pm2 startup

5. Configure Nginx as a Reverse Proxy

Nginx can serve your app on standard HTTP/HTTPS ports and provide SSL termination.


sudo apt install nginx
sudo nano /etc/nginx/sites-available/next-app-skytup

Add this configuration:


server {
    listen 80;
    server_name 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;
    }
}


sudo ln -s /etc/nginx/sites-available/next-app-skytup /etc/nginx/sites-enabled
sudo nginx -t
sudo systemctl restart nginx

6. Enable HTTPS with Let’s Encrypt


sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com
sudo certbot renew --dry-run

7. Professional CI/CD with GitHub Actions

Automate testing, building, and deployment using GitHub Actions. Open source contributors can fork the repository and run CI checks, while pushes to main trigger production deployment.


name: CI/CD Next.js App

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint
      - run: npm test
      - run: npm run build

  deploy:
    needs: build-and-test
    runs-on: ubuntu-latest
    if: github.repository == 'YOUR-ORG/YOUR-REPO' && github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - name: Copy code to server
        uses: appleboy/scp-action@v0.1.3
        with:
          host: ${{ secrets.DEPLOY_HOST }}
          username: ${{ secrets.DEPLOY_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: "."
          target: "/home/ubuntu/akash/next-app-skytup/"
      - name: SSH deploy and start PM2
        uses: appleboy/ssh-action@v0.1.5
        with:
          host: ${{ secrets.DEPLOY_HOST }}
          username: ${{ secrets.DEPLOY_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /home/ubuntu/akash/next-app-skytup/
            npm ci
            npm run build
            pm2 restart next-app-skytup || pm2 start npm --name "next-app-skytup" -- start

8. Benefits of This Setup

Fully automated CI/CD pipeline ensures code quality and fast deployment.
PM2 keeps your Next.js app running, automatically restarting if it crashes.
Nginx and SSL ensure secure and performant access to your website.
Open source friendly: contributors can fork safely without breaking production.

By following this setup, your Next.js application on Ubuntu is production-ready, secure, and professional. Automated CI/CD, PM2 process management, Nginx reverse proxy, and HTTPS provide reliability and ease of maintenance, while supporting open-source contributions.

Next.js Deployment on Ubuntu: Step-by-Step Guide with PM2, Nginx, and CI/CD

Comments