Deploy A NextJs App and Node API on a Linux Server
Tags: ubuntu, mern, nextjs, node
Published: 2023-12-17 19:49:05

In this tutorial, we will learn how to deploy a NextJS app and Node Api on a Linux server. NexJS will serve as the frontend view and Node as the backend. We have already discussed Node API and NextJS app in previous articles, which you can find here:

1. Making API Using Node and Express. [Link](url)
2. Scaffolding redux-toolkit in NextJs. [Link](url)
3. API Setup in NextJs. [Link](url)
4. AI Prompt setup on Nextjs. [Link](URL)

Linux is a popular and widely used server operating system. In this tutorial, we will be using Ubuntu 22.04.3. I assume you are familiar with Linux, so let's get started.

**Prerequisites Before we begin, ensure you have the following:**
1. one remote server (VPS)
2. one domain 

**Step 1:** 
Check your VPS for the following software and versions. Install them if they are not already present.

1. nginx -v
2. node -v
3. npm
4. mongod --version 
5. git --version
6. pm2 –version

**Step 2: Connect Your Domain to Your Server**
Go to your domain manager, then to the DNS Manager, and set up your IP address. First, create a sub-domain for the Node API.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwbl4cbbsbkg6riewh0g.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm45iz90911r6h31hzkm.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aii8jc2txsxhjq2wl1xx.png)
**Note: Your domain setup page may look different from this.**

Then, check your DNS here: https://dnschecker.org/

**Step 3:** 
Upload Your Node and Next App to GitHub

**Step 4: Server SSH Configuration**
Go to your server and check if there is an .ssh folder. If not, create one:

```
sudo mkdir .ssh
```
Now create a key for your Node app:

```
ssh-keygen -f node_movie_api -t ed25519 -C "your_email@example.com"
```
You should now see two files in your .ssh folder:
   1. node_movie_api 
   2. node_movie_api.pub

Open **node_movie_api.pub** and copy the code:

```
cat node_movie_api.pub
```
Then, go to your GitHub and open your Node project. Click the "Settings" button and paste the key in the key field.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn9nlwsmziedx2ml46uv.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7uw18iewkveidvhzb2f.png)

Back on your server, create a config file:

```
touch ~/.ssh/config
```
and add the following code to the config file:

```
Host node_movie_api
        HostName github.com
        User your_github_username
        IdentityFile ~/.ssh/node_movie_api
        IdentitiesOnly yes

```
Check if your GitHub project connection is okay:

```
ssh -T git@node_movie_api
```
If you see a message indicating successful authentication, the connection is okay.
Now, go to your home directory and copy the GitHub link.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ephtw7t3u8wb3dx12hgr.png)

Modify this link as shown below-

```
git clone git@node_movie_api: kamruzzamanripon/node-movie-api.git
```
here node_movie_api is your host name. you already defined in .ssh folder inside config file. And after you just copy this thing and paste it here. 
After successfully cloning, move the cloned project to the /var/www folder.
Then go to **/var/www/ node-movie-api** folder. Then run this command 

```
npm install
```
then create this

```
nano ecosystem.config.cjs
```

```
module.exports = {
  apps : [
      {
        name: "nove_movie_api",
        script: "./app.js",
        port: 8000
      }
  ]
}

```
**Step 5: Create Table on MongoDB**

```
mongosh
show dbs
use node_movie_api

```
now you create node_movie_api table. 

**Step 6: Configure Nginx for node**
Go to the Nginx folder and create a configuration file for your node app:

```
cd /etc/nginx/sites-available
sudo nano node_movie_api

```
Add the following configuration

```
server{
    listen 80;
    listen [::]:80;
    server_name your_domain www.your_domain;
    location / {
       proxy_pass http://localhost:8000;
       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;
    }
}

```

Enable the virtual host or create a symbolic link of the virtual host file:

```
sudo ln -s /etc/nginx/sites-available/node_movie_api /etc/nginx/sites-enabled/node_movie_api
```
Check if the configuration is correct:

```
sudo nginx -t
```
Restart Nginx:

```
sudo service nginx restart
```
**Step 8: env file variable define **
Go to /var/www/ node-movie-api or your project folder . open your .env file and change this 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh10ve7of8fmrzrrabw4.png)

**Step 7 : make folder for image**
In your public folder creates uploads folder then inside create two folder
   1. category 
   2. image

then  run **ecosystem.config.cjs** file below like this

```
pm2 start ecosystem.config.cjs
pm2 save

```

**Step 8: Check Your Sub-Domain**
Open your browser and check if your sub-domain is working without errors.
We have successfully deployed Node app.

**Step 9: Set Up Next App**
Go to your domain manager, then to the DNS Manager, and set up your IP address for the NextJS app. Use this app on your main domain.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wasnlwjk43zxftnez1gv.png)

Then check your DNS here: https://dnschecker.org/

**Step 10: Server SSH Configuration for Nuxt App**
Repeat the SSH key generation and GitHub configuration steps as done for the node app, but this time for your NextJS app. Remember to replace the relevant names and paths.

```
sh-keygen -f next_movie -t ed25519 -C "your_email@example.com" 
```
now you can see two file in your .ssh folder
   1. next_movie
   2. next_movie.pub
Now open **next_movie.pub** file and copy the code.

```
cat next_movie.pub
```

Then go to your github and open your Next project. Click Settings button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvxky6zyj3qk37clqeuw.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8h9jrhwiojrc6jmkh5j.png)

And past his copy code on  Add deploy key
Go to your server and open config file

```
Sudo nano ~/.ssh/config
```
and add this code into config file

```
Host node_movie_api
        HostName github.com
        User kamruzzamanripon
        IdentityFile ~/.ssh/ node_movie_api
        IdentitiesOnly yes

Host next_movie
        HostName github.com
        User kamruzzamanripon
        IdentityFile ~/.ssh/next_movie
        IdentitiesOnly yes

```
Now check your github project connection is ok. Here is code

```
ssh -T git@next_movie
```
Now go to your Server home directory and copy github link

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wchln4kfctks0tan7q2n.png)
here next_movie is your host name. you already defined in .ssh folder inside config file. And after : you just copy this thing and past here. 

```
git clone git@next_movie:kamruzzamanripon/next-movie-ui-with-node-api.git
```

Your server clones this project. Now you move this file to your **/var/www** folder

```
Sudo mv next-movie-ui-with-node-api /var/www
```
Go to www/folder. And then go nuxt-movie-ui-with-laravel-api folder. Open you next.config.js
sudo nano next.config.js and change this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3td5tjlmdy4pk0kozxl.png)
Here mark 1 is your image url. And then open your .env.local file and put you AI Api key. Like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dk2o85ckihvg9z2y8s1q.png)
After Command below line

```
npm install
npm run build
sudo nano ecosystem.config.js

```
Write below code in **ecosystem.config.js** file

```
module.exports = {
  apps : [
      {
        name: "next_movie",
        script: ".output/server/index.mjs",
        port: 3000
      }
  ]
}

```
**Restart Nginx:**

```
sudo service nginx restart
```
**Start the app using pm2:**

```
pm2 start ecosystem.config.js
pm2 save
pm2 status

```
**Step 11: Configure Nginx for Next App**
Go to the Nginx folder and create a configuration file for your Next app:

```
cd /etc/nginx/sites-available
sudo nano next_movie

```
Add the following configuration:

```
server{
    listen 80;
    listen [::]:80;
    server_name your_domain www.your_domain;
    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;
    }

```
Enable the virtual host or create a symbolic link of the virtual host file:

```
sudo ln -s /etc/nginx/sites-available/next_movie /etc/nginx/sites-enabled/next_movie
```
Check if the configuration is correct:

```
sudo nginx -t
```
Restart Nginx:

```
sudo service nginx restart
```
**Step 12: Check Your Domain**
Open your browser and check if your domain is working without errors.
Now we successfully deploy NextJs app.

Remark on Git Cloning:
It's important to note that we used SSH for git cloning instead of HTTPS. This choice is strategic for ease of future development. Imagine you've made some changes to your project locally. With SSH, all you need to do to update your project on the server is a simple git push from your local machine, followed by a git pull on the server. This process updates your app with the latest changes. Using HTTPS wouldn't offer this straightforward workflow, as it would require repeating the entire process from the beginning for every update.
Furthermore, you can streamline the process even more by implementing auto-deployment. With this setup, any update you push to GitHub automatically reflects on your server. This automation can be achieved through GitHub Actions. In a subsequent tutorial, I plan to delve into the features of GitHub Actions and how you can use them for auto-deployment.
Stay tuned for that, and in the meantime, enjoy the benefits of easy project updates with SSH!


full Project github
Node
https://github.com/kamruzzamanripon/node-movie-api
NextJs
https://github.com/kamruzzamanripon/next-movie-ui-with-node-api
NextJs UI
https://github.com/kamruzzamanripon/next-movie-ui

That's all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]