Running Strapi and Next.js on a VPS with Dokku

In this article I am going to show you how easy it is to setup a dokku server on a VPS like Hetzner, DigitalOcean etc. With Dokku you can host multiple apps, proxy them with just a command and on top have zero-downtime deployments with health checks, all ready to go with just a few command lines.

So let's setup balatinac.dev (a website built with Next.js and Strapi) with dokku in the background, these are the steps I took into making that possible. I've made a few changes the commands so you can easily just copy paste it into your own project and be ready in minutes.

1. Install Dokku via Bash Script

wget -NP . https://dokku.com/install/v0.32.3/bootstrap.sh

sudo DOKKU_TAG=v0.32.3 bash bootstrap.sh

This step downloads and executes a Bash script from the Dokku website to install Dokku on a Debian-based system. The specified version tag is v0.32.3, but you can adjust it to a newer version if available.

2. Add SSH Key

cat "ssh public key" | dokku ssh-keys:add admin

This command adds an SSH key for the "admin" user to allow secure access to the Dokku server. Replace "ssh public key" with the actual public key you want to add.

3. Set Domain or IP Address

dokku domains:set-global dokku.me

Configures the global domain or IP address for Dokku. This step is crucial for routing requests to the correct apps.

4. Install dokku-monorepo Plugin (optional if not working with a monorepo)

dokku plugin:install https://gitlab.com/notpushkin/dokku-monorepo

Installs the Dokku-monorepo plugin, which is useful for managing monorepository setups where multiple apps share a codebase.

5. Add Next.js & Strapi Apps

dokku apps:create nextjs

dokku apps:create strapi

Creates two Dokku apps named "nextjs" and "strapi." These will be used to host the Next.js frontend and Strapi backend, respectively.

6. Create .dokku-monorepo File (optional if not working with a monorepo)

touch .dokku-monorepo

Creates a configuration file named .dokku-monorepo in the project folder. This file is used to specify the folder locations for the Next.js and Strapi apps within the monorepository.

7. Set Remotes for Apps (optional if not working with a monorepo)

git remote add nextjs [email protected]:nextjs

git remote add strapi [email protected]:strapi

Optionally, sets Git remotes for local deployment convenience. This step is beneficial if you plan to push code changes directly from your local machine.

8. Install Dokku-mariadb Plugin

sudo dokku plugin:install https://github.com/dokku/dokku-mariadb.git mariadb

Installs the Dokku-mariadb plugin, enabling support for MariaDB databases in Dokku.

9. Add Database for Strapi

dokku mariadb:create strapi_database

Creates a MariaDB database named "strapi_database" specifically for the Strapi backend.

10. Link Database to Strapi App

dokku mariadb:link strapi strapi_database

Establishes a link between the Strapi app and the created MariaDB database, allowing the app to interact with the database.

11. Set Environment Configuration

dokku config:set nextjs KEY=VALUE

dokku config:set strapi KEY=VALUE

Sets environment variables for both the Next.js and Strapi apps. This step is crucial for configuring various settings, such as API URLs and database connections.

12. Create Internal Network

dokku network:create internal-network

Creates an internal network named "internal-network" within Dokku. This network facilitates communication between apps.

13. Connect Apps to Internal Network

dokku network:set <nextjs|strapi> attach-post-create internal-network

Ensures that both the Next.js and Strapi apps are connected to the created internal network. This step enhances communication between the apps.

14. Push Apps and Monitor Build

Push apps to the correct remote (nextjs or strapi) and monitor the build

Pushes the Next.js and Strapi apps to their respective Dokku remotes. Monitor the build process to ensure successful deployment.

15. Make Apps Accessible via Domain

dokku domains:add nextjs nextjs.acme.com

dokku domains:add strapi strapi.acme.com

Configures domain names for the Next.js and Strapi apps, making them accessible over the internet. Replace "acme.com" with your actual domain.

16. Install LetsEncrypt Plugin

dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git

Installs the LetsEncrypt plugin, enabling the use of HTTPS for secure communication.

17. Enable LetsEncrypt for Apps

dokku letsencrypt:enable nextjs

dokku letsencrypt:enable strapi

Enables LetsEncrypt for both the Next.js and Strapi apps, securing their communication with SSL/TLS encryption.