How to deploy a NextJS app on Digital Ocean instead of Vercel

Summary

In this tutorial, Robbie demonstrates how to migrate a Next.js site from Vercel to DigitalOcean due to Vercel's recent pricing changes. He guides viewers through setting up a droplet, installing necessary software like Node.js, Yarn, and Engine X, configuring the server, and deploying the app with Git. The video also covers setting up a PostgreSQL database, using environment variables, and securing the site with SSL and a firewall. It's a comprehensive guide for hosting personal projects on a single server.

Takeaways

• 📈 Versell, creators of Next.js, changed their pricing, leading to higher bills and prompting users to look for alternative hosting services.
• 🛠️ The video demonstrates how to migrate a Next.js site to Digital Ocean, a cloud service provider, as an alternative to Versell's hosting.
• 🔗 The code for the app being hosted is available on GitHub and is a basic Next.js app connected to a PostgreSQL database via Prisma.
• 💻 To get started with Digital Ocean, one needs to sign up, create a team, and set up a dashboard, then create a new droplet with specific configurations.
• 🔑 SSH key generation and addition to Digital Ocean for secure connection is a crucial step in setting up the server.
• 📦 The tutorial includes upgrading the server's packages, creating a new user with superuser privileges, and setting up the user's SSH key.
• 🚀 Node.js and necessary tools like NVM (Node Version Manager), Yarn, and Engine X are installed on the server for running a Node app.
• 🔄 Engine X is configured to proxy traffic to the Next.js app running on localhost, which is set up by editing the configuration files.
• 📝 Environment variables, particularly the database URL, are set for the production environment to connect to the PostgreSQL database.
• 🗄️ PostgreSQL is installed and configured on the server, creating a user and database for the Next.js app to interact with.
• 🌐 The app is deployed using Git, and environment variables are set for the database connection before running database migrations and building the app.
• 🛡️ Security measures like setting up a firewall with UFW and enabling SSL with Certbot are covered to protect the server and ensure secure connections.

Q & A

What is the main issue discussed in the video?

The main issue discussed is the recent price changes by Vercel, the creators of Next.js, which has led to many creators looking to migrate their hosting to other services due to increased costs.

What service is suggested as an alternative to Vercel's hosting for Next.js applications?

Digital Ocean is suggested as an alternative hosting service for Next.js applications.

What is the basic requirement for the server size when setting up a droplet on Digital Ocean for hosting a Next.js app?

The server size should be at least the $6 plan, as it provides more than 512 megabytes of RAM, which is necessary to build the site.

How does one create an SSH key for connecting to a Digital Ocean droplet?

An SSH key is created by opening the terminal or Git Bash and typing 'ssh-keygen', following the prompts to save the key in the default location without a passphrase, and then using 'cat' to display the public key.

What is the process for adding an SSH key to Digital Ocean?

After creating the SSH key, it is added to Digital Ocean by navigating to the 'Add SSH Key' option, pasting the public key, and labeling the key for identification purposes.

Why is it necessary to create a new user on the Digital Ocean droplet?

Creating a new user helps in managing access and permissions more securely, and making the user a superuser allows for administrative tasks to be performed.

What is the role of NVM in setting up the server for a Next.js app?

NVM, or Node Version Manager, is used to install and manage multiple versions of Node.js, allowing the server to have the correct version needed for the app.

Why is Engine X installed on the server?

Engine X is installed to proxy traffic to the Next.js application, ensuring that incoming requests are forwarded to the correct port where the app is running.

How is the Next.js application code transferred to the Digital Ocean droplet?

The code is transferred using Git, with a deploy key created in the GitHub repository settings and an SSH key generated on the server to allow read-only access.

What is the purpose of setting up PM2 on the server?

PM2 is used to manage and keep the Node.js application running in the background as a process, ensuring the app continues to run even after the terminal session ends.

How is SSL enabled for the hosted Next.js application?

SSL is enabled using Certbot, which automates the process of obtaining a Let's Encrypt certificate and configuring it with Engine X for HTTPS.

What additional step is taken to secure the server?

A firewall is enabled using UFW (Uncomplicated Firewall) to allow only necessary ports like SSH and Engine X, enhancing the server's security.