Running Next.js App on a Linux Ubuntu Virtual Machine (Namecheap) with Let's Encrypt SSL and Nginx Reverse Proxy - Step-by-Step Guide

Introduction:

In this tutorial, we will walk through the process of running a Next.js app on a Linux Ubuntu virtual machine hosted on Namecheap. We'll cover additional steps that include installing a TLS certificate for the domain geist.live using Let's Encrypt, configuring Nginx as a reverse proxy with SSL termination using the Let's Encrypt certificate, and adding an SSH public key for remote server access. By the end, you'll have a fully functional Next.js app with secure HTTPS access via Nginx and SSH access to the virtual machine.

Prerequisites:

• A Linux Ubuntu virtual machine hosted on Namecheap
• A domain name (e.g., geist.live) pointing to your virtual machine's IP address
• Basic knowledge of the Linux command line

Let's get started!

Step 1: SSH into the Ubuntu Virtual Machine

Launch your preferred terminal application.
Enter the following command, replacing and with your actual credentials:

ssh <username>@<IP address>

Provide the password when prompted to establish an SSH connection to your Ubuntu virtual machine.

Step 2: Add SSH Public Key for Remote Access

Generate an SSH key pair on your local machine if you haven't already done so:

ssh-keygen -t rsa -b 4096

Follow the prompts to generate the key pair (public and private keys).
Copy the public key to your virtual machine by executing the following command on your local machine:

ssh-copy-id <username>@<IP address>

Provide the password for your virtual machine when prompted.
SSH key-based authentication is now set up, allowing you to access the virtual machine without a password.

Step 3: Install Node.js and npm

Here are the instructions for installing Node.js version 16 on Ubuntu using the official Node.js APT repository:

Add Node.js APT Repository

Open a terminal on your Ubuntu virtual machine.
Install the curl package if it is not already installed by executing the following command:

sudo apt update
sudo apt install curl

Download and add the Node.js APT repository's GPG key by running the following command:

curl -fsSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo gpg --dearmor -o /usr/share/keyrings/nodesource.gpg

Add the Node.js APT repository to your system's sources.list.d directory:

echo "deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_16.x $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/nodesource.list

Install Node.js

Update the package list to include the packages from the newly added Node.js repository by running the following command:

sudo apt update

Install Node.js by executing the following command:

sudo apt install nodejs

Verify the Installation

To verify that Node.js has been installed successfully, run the following command to check the Node.js and npm versions:

node -v
npm -v

Congratulations! You have successfully installed Node.js version 16 on your Ubuntu virtual machine using the official Node.js APT repository. Now you can start developing and running your applications with Node.js 16.

Step 4: Install and Configure Next.js App

Move to the desired directory where you want to store your Next.js app:

cd /path/to/nextjs-app

Clone your Next.js app repository or copy the codebase to the current directory.
Install the project dependencies by running the following command:

npm install

Build the Next.js app using the following command:

npm run build

Step 5: Installing Let's Encrypt SSL Certificate

Install the Certbot package by executing the following command:

sudo apt install certbot

Request a TLS certificate for your domain by running the command below. Replace with your actual domain name (e.g., geist.live):
css

sudo certbot certonly --nginx -d <your-domain>

Follow the prompts to provide your email address and agree to the terms of service. The Let's Encrypt certificate will be automatically installed for your domain.

Step 6: Configuring Nginx as a Reverse Proxy with SSL Termination

Install Nginx by running the following command:

sudo apt install nginx

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

sudo vim /etc/nginx/sites-available/nextjs-app

Paste the following content into the file:

server {
    listen 80;
    listen [::]:80;
    listen 443 ssl;
    server_name <your-domain>;

    ssl_certificate /etc/letsencrypt/live/<your-domain>/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/<your-domain>/privkey.pem;

    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;
    }
}

Note: Replace with your actual domain name (e.g., geist.live).

Save the file and exit the text editor.

Step 7: Enabling Nginx Server Block and Restarting Nginx

Create a symbolic link to enable the Nginx server block configuration:

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

Verify the Nginx configuration syntax:

sudo nginx -t

If the syntax is valid, restart Nginx to apply the changes:

sudo systemctl restart nginx

Step 8: Verifying the Next.js App with HTTPS

Open your web browser and enter your domain name (e.g., geist.live) in the address bar.
If everything is set up correctly, you should see your Next.js app running securely over HTTPS.

Conclusion:

Congratulations! You have successfully configured a Next.js app on a Linux Ubuntu virtual machine hosted on Namecheap with a Let's Encrypt SSL certificate and Nginx as a reverse proxy with SSL termination. Additionally, you have set up SSH key-based authentication for secure remote server access.

Remember, this tutorial covered the essential steps to get your Next.js app up and running with HTTPS, Nginx reverse proxy, and SSH access. Depending on your specific requirements, you may need to further customize the setup or add additional configurations.

Happy coding and secure hosting!

Desiderata

Go placidly amid the noise and the haste, and remember what peace there may be in silence. As far as possible, without surrender, be on good terms with all persons.

Speak your truth quietly and clearly; and listen to others, even to the dull and the ignorant; they too have their story.

Avoid loud and aggressive persons; they are vexatious to the spirit. If you compare yourself with others, you may become vain or bitter, for always there will be greater and lesser persons than yourself.

Enjoy your achievements as well as your plans. Keep interested in your own career, however humble; it is a real possession in the changing fortunes of time.

Exercise caution in your business affairs, for the world is full of trickery. But let this not blind you to what virtue there is; many persons strive for high ideals, and everywhere life is full of heroism.

Be yourself. Especially do not feign affection. Neither be cynical about love; for in the face of all aridity and disenchantment, it is as perennial as the grass.

Take kindly the counsel of the years, gracefully surrendering the things of youth.

Nurture strength of spirit to shield you in sudden misfortune. But do not distress yourself with dark imaginings. Many fears are born of fatigue and loneliness.

Beyond a wholesome discipline, be gentle with yourself. You are a child of the universe no less than the trees and the stars; you have a right to be here.

And whether or not it is clear to you, no doubt the universe is unfolding as it should. Therefore be at peace with God, whatever you conceive Him to be. And whatever your labors and aspirations, in the noisy confusion of life, keep peace in your soul. With all its sham, drudgery and broken dreams, it is still a beautiful world. Be cheerful. Strive to be happy.

by Max Ehrmann ©1927