[New] Deploying NextJS and Strapi on an Ubuntu Server Using Nginx and PM2: A Step-by-Step Guide

In this article, we will walk you through the process of deploying NextJS and Strapi on an Ubuntu server using Nginx and PM2. We will cover everything from connecting to the server using an SSH key, deleting the Apache server if it exists, installing and configuring Nginx and a firewall, uploading apps using Git, and running the apps using PM2. We will also include instructions for creating a new PM2 instance for the backend Strapi folder and the frontend NextJS folder, and for creating a build file for the frontend and advanced techniques and best practices.

Before we begin, it is important to note that this guide assumes that you have already purchased a VPS and have access to the server's IP address and root login credentials. If you have not done so already, you will need to purchase a VPS from a provider such as DigitalOcean, Vultr, or Linode.

Prerequisites:

• Ubuntu server with root access
• NextJS and Strapi applications
• Git installed on your local machine
• Basic knowledge of Linux commands
• Basic understanding of Nginx and PM2

1: Connecting to the Server Using an SSH Key

The first step in deploying our NextJS and Strapi application is to connect to our VPS using an SSH key. This allows for secure and encrypted communication between your local machine and the VPS and make changes to it without having to enter your password every time. To do this, you will need to generate an SSH key on your local machine, and then add the public key to your VPS.

On your local machine, open a terminal and enter the following command to generate an SSH key:

ssh-keygen -t rsa

This will generate a public and private key in the .ssh directory in your home folder. The public key will be named id_rsa.pub and the private key will be named id_rsa.

Next, we need to add the public key to our VPS. To do this, we will use the ssh-copy-id command. Enter the following command in your terminal, replacing [username] and [server_ip] with the appropriate values:

ssh-copy-id [username]@[server_ip]

This will add your public key to the authorized_keys file on the VPS. You can now connect to the VPS using the following command:

ssh [username]@[server_ip]

2: Deleting the Apache Server (if it exists)

If your server already has Apache installed, you will need to delete it before you can install Nginx. To check if Apache is installed, use the following command:

sudo apt-get install apache2

If Apache is installed, you will see a message that says "Apache2 is already the newest version". To delete Apache, use the following command:

sudo apt-get remove apache2

3: Installing and Configuring Nginx

Once we are connected to the VPS, the next step is to install and configure Nginx. Nginx is a popular web server that can be used to serve our NextJS and Strapi applications. To install Nginx, we will use the apt package manager. Enter the following command in the terminal:

sudo apt-get update
sudo apt-get install nginx

Once Nginx is installed, you can start it using the following command:

sudo service nginx start

Now, we need to configure it to serve our applications. To do this, we will create a new Nginx server block for each application. A server block is a configuration file that tells Nginx how to handle incoming requests for a specific domain or subdomain.

To create the first server block, open the Nginx configuration file by running the following command:

sudo nano /etc/nginx/sites-available/nextjs

In this file, paste the following code:

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/nextjs;
    index index.html;


    location ^~ /_next/static/ {
        alias /var/www/nextjs/.next/static/;
        access_log on;
    }

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

Be sure to replace "yourdomain.com" with your actual domain name. Also, make sure that the root directory "/var/www/nextjs" matches the directory where you will be uploading your NextJS application.

Next, create the second server block for the Strapi application by running the following command:

sudo nano /etc/nginx/sites-available/strapi

In this file, paste the following code:

server {
    listen 80;
    server_name api.yourdomain.com;
    root /var/www/strapi;
    index index.js;

    location / {
        proxy_pass http://localhost:1337;
        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;
    }
}

Be sure to replace "api.yourdomain.com" with the actual subdomain you want to use for your Strapi API, and also make sure that the root directory "/var/www/strapi" matches the directory where you will be uploading your Strapi application.

Once you have saved the server block, you need to enable it by creating a symbolic link from the "sites-available" to "sites-enabled" directory using the following command:

sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/

Then, test the Nginx configuration by running the following command:

sudo nginx -t

If there are no errors, you can restart Nginx for the changes to take effect:

sudo service nginx restart

Delete the default server configuration

rm /etc/nginx/sites-available/default
rm /etc/nginx/sites-enabled/default

4: Configuring a Firewall

To secure your server, it is important to configure a firewall. Ubuntu has a built-in firewall called "ufw". To enable it, use the following command:

sudo ufw enable

To allow incoming traffic on port 80 (HTTP) and port 22 (SSH), use the following commands:

sudo ufw allow 80/tcp
sudo ufw allow 22/tcp

Alternatively, you can use following command to open both ports at once:

sudo ufw allow "Nginx Full"

You can check the status of your firewall by running the following command:

sudo ufw status

5: Using Git to Upload the Applications

In this step, we'll use Git to upload our NextJS and Strapi applications to the server. To do this, we'll first need to install Git on the server by running the following command:

sudo apt-get install git

Once Git is installed, navigate to the directory where you want to upload your NextJS application and run the following command to clone the repository:

git clone https://github.com/yourusername/your-nextjs-repo.git

Be sure to replace "https://github.com/yourusername/your-nextjs-repo.git" with the actual.

6: install node and npm and build apps.

installing Node.js and npm (Node Package Manager) on your server using the following command:

sudo apt install nodejs
sudo apt install npm

Next, navigate to the directory of the first app, Next.js, by using the command:

cd /var/www/nextjs

Once inside the Next.js directory, install the necessary dependencies and build the app by running:

npm install
npm run build

Repeat the same process for the second app, Strapi, by navigating to its directory:

cd /var/www/starpi

Install the dependencies by running and build the app by running:

npm install
npm run build

7: Running the Applications Using PM2

The final step is to run your NextJS and Strapi applications using PM2. PM2 is a process manager for Node.js applications, which allows you to keep your applications running in the background.

To install PM2, use the following command:

npm install pm2 -g

To run your NextJS application, navigate to the root folder of your application and use the following command:

pm2 start npm --name "nextjs" -- start

To run your Strapi application, navigate to the root folder of your backend application and use the following command:

pm2 start npm --name "strapi" -- run develop

Now, your NextJS and Strapi applications are running on your server, and you can access them by visiting your domain name in a web browser.

To ensure that your applications automatically start when your server restarts, you can use the following command:

pm2 save

To set up pm2 to start automatically on Ubuntu, you can use the pm2 startup command. This command generates and configures a startup script for PM2, which is used to start PM2 automatically at boot time

pm2 startup ubuntu 

8: SSL Certification

Install the certbot package and the python3-certbot-nginx plugin to obtain and configure an SSL certificate for your server.

To install certbot and python3-certbot-nginx, use the following command:

sudo apt-get install certbot python3-certbot-nginx

Once the packages are installed, you can use the certbot command to obtain an SSL certificate for your domain. The python3-certbot-nginx plugin will automatically configure Nginx to use the new certificate.

To obtain an SSL certificate for your domain, use the following command:

sudo certbot --nginx -d yourdomain.com

This command will automatically obtain an SSL certificate for your domain and configure Nginx to use it. It will also automatically set up a cron job to renew the certificate before it expires.

Once the certificate is obtained and configured, you can use the https protocol to access your web application. It will also improve the security of your server.

You can also check the status of the certificate by running

sudo certbot certificates

By following these additional steps, you can easily obtain and configure an SSL certificate for your domain and improve the security of your server.

Conclusion:

Deploying NextJS and Strapi on an Ubuntu server using Nginx and PM2 is a great way to create a fast and secure web application. By following the steps outlined in this article, you can easily set up and configure your server, upload your applications, and run them using PM2. Additionally, by implementing advanced techniques and best practices, you can improve the performance and security of your web application.