Deploying a NestJS and Next.js Application on Dokku: Full-Stack Architecture

Introduction

Deploying a full-stack application that consists of a NestJS backend and a Next.js frontend on a Dokku server can be a powerful yet cost-effective solution. This article will guide you through the process of orchestrating both applications on a single Dokku instance.

Prerequisites

Before proceeding, ensure you have the following:

• A server with Dokku installed (installation guide in this article)

• A domain name (optional but recommended)

• Basic knowledge of NestJS, Next.js, and Docker

Step 1: Setting Up the Dokku Applications

On your server, create two Dokku applications:

Create applications

dokku apps:create my-nestjs-app
dokku apps:create my-nextjs-app

Set up database and environment variables

# Example for database
dokku plugin:install https://github.com/dokku/dokku-postgres.git

dokku postgres:create mydatabase

dokku postgres:link mydatabase my-nestjs-app

# Example for environment variables
dokku config:set my-nestjs-app \
    APP_PORT=5000 \
    NGINX_ROOT=dist \
    JWT_SECRET=xxxxxxxxxxxxxxxxxx

Step 2: Configuring NestJS for Deployment

Ensure your NestJS project has a Procfile on the root folder:

web: npm run prod

Then, deploy your NestJS backend:

git remote add dokku dokku@your-server-ip:my-nestjs-app
git push dokku main

Step 3: Configuring Next.js for Deployment

Next.js can be deployed similarly, but with custom environment variables:

dokku config:set my-nextjs-app \
    NEXT_PUBLIC_API_URL="https://api.yourdomain.com" \
    NGINX_ROOT=.next

Ensure your Next.js project has a Procfile:

web: npm run prod

Deploy with:

git remote add dokku dokku@your-server-ip:my-nextjs-app
git push dokku main

Step 4: Configuring Nginx and Domains

If using domains, set them up with:

dokku domains:set my-nestjs-app api.yourdomain.com
dokku domains:set my-nextjs-app yourdomain.com

Enable SSL with Let's Encrypt:

dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git
dokku letsencrypt my-nestjs-app
dokku letsencrypt my-nextjs-app

Step 5: Testing the Deployment

Verify both applications are running:

dokku logs my-nestjs-app
dokku logs my-nextjs-app

Visit https://yourdomain.com for the frontend and https://api.yourdomain.com for the backend.

Conclusion

By following this guide, you've successfully deployed a full-stack NestJS + Next.js application on a Dokku server. This setup allows for scalability, easy updates, and a structured separation between the frontend and backend.

Further Reading

• Deploying a NestJS Application with Dokku

• Deploying a Next.js Application with Dokku

Let me know in the comments if you have any questions or need clarifications!