Deploy your Next.js application

Creating a deploy user

You should use a specific user to deploy on you server, to prevent the usage of root that have a full control on your server, for this example, i will use deploy as a user.

useradd -m -s /bin/bash -G sudo deploy
passwd deploy
mkdir /home/deploy/.ssh*
chmod 700 /home/deploy/.ssh

After doing this, you now have an user to permit the deploiement of the NextJS application.

Installing prerequiste

NGINX

You need a proxy server to allow all incoming HTTP(S) request to your Nextjs local port.

sudo apt install nginx

Node

You will need to install node on your server, multiple choice are possible, for this one, i will connect to the user deploy and use NVM, it permit to have multiple instance of Node.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Configure your bash profile with those lines :

export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Restart your shell to use NVM,then simply install the last version of node using :

nvm install node

If you want to learn more about NVM check this : https://github.com/nvm-sh/nvm

PM2

You will need to install a node process manager, to keep your node runtime alive, like NextJS.

npm install pm2 -g

Deploy Your Application

Now you want to deploy your NextJS application on your server, we will use the Azure Pipeline service to release everything.

Shell Script

First, we will create a shell script to deploy in /var/www/yourFoldern, put this script in your root folder of your application like src/deploy.sh

cd /var/www/example
npm i
npm run build
pm2 delete yourPM2Process
pm2 start npm --name "yourPM2Process" -- start

We destroy the old process because using the restart option on production mode with NextJS not work well.

Now let's push the code on a repository like Github, I will use Github as example, but you could use another git provider.

Azure Project

Let's create a project on Azure.

Just complete the form as you want, but check if you use Git or TFS for your repository, as i said, I assume you use Github for this one, so check git.

Now just use Github like below and connect Azure to your Github and give access.

Then just select the repository you have created for your NextJS application, now let's create a release pipeline, to push the code on your server.

Now let's create the artifact in the release pipeline, go to Release and click on Edit, just check that it's point on your master branch, point the Default version to Latest from the default branch.

Task to pull on the server

First create a stage and select an Empty Job, add a task and select "Securely copy files to the remote machine", you will have to create a Generic connection, use your deploy user and his password or if you prefer, setup an ssh public/private key and use it.

After doing this, return to your task "Securely copy files to the remote machine", add your source folder and then configure file you want to add or not using the Contents aera.

I've setup mine to allow everything but not the .git folder, like this :

**
!.git/**

Then add you target folder like you've made it on the deploy.sh /var/www/example.

Run shell script

Now the last part of the Azure pipeline, we need a task to run the deploy.sh, add a SSH task that allow you to run command on the server, use the previous connection that we created.

Then just click on Script File and just select the deploy.sh file, if you need to add arguments to your script, you got the option.

That all we finished the Azure pipeline, now everytime you will push on the master branch, your website will redeploy on your server.

Nginx configuration

As i said before, we have to setup Nginx as a proxy server, so we need to change the configuration and first of all we have to delete the default configuration.

server {
listen 80 default_server;
listen [::]:80 default_server;
server_name example.com;
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;
       }
    }

If you have set up your DNS correctly, you should have access to your application. Otherwise, since we used the default_server directive in our listen command, your application will be displayed by default when hitting the IP of your server.

Bonus

Setup SSL certificate

We will setup SSL certificate on your website, in order to redirect all HTTP request to HTTPS one, to permit this we will use certbot that will deploy a Let's Encrypt certificate.

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx

Then just use those command, in order to generate and setup your certificate automatically.

service nginx stop
pm2 stop "YourNextJSApplication"
sudo certbot --nginx
service nginx start
pm2 start "YourNextJSApplication"```