The Batuhan's Blog

/

Blog

How I deploy my NextJS projects with Nginx and Cloudflare Tunnel.

Tue Sep 05 2023

As you all know, I love to deploy my things on my own servers and today I’m going to talk about how I deploy my NextJS projects with Nginx + Cloudflare Tunnel.

Why not use Vercel?

Vercel is actually a great place to deploy your projects but when your projects becomes more complicated and needs to use more server functions it becomes less usable. For example we created a new website for our smp server and it has a markdown based blog like this site. When we deploy our site over at Vercel blog section stops working becouse it needs to read files from /public/posts but Vercel doesn't allows that and we end up with a non functional website.

Another reason is pricing of course. I know there is a free tier but after some point it's not enough. Maybe 20$ per month isn't that much for some people but in Turkey, it's half of my weekly salary (yes I do work cheap don't question it).

So after talking about my reasons to avoid Vercel, let's talk about how I deploy my projects on my Dell Optiplex 7050 homeserver.

Configuring server.

  • On my server I do run Rocky Linux 9.2 as main operating system and Debian 11 inside a virtual machine and this guide will be based on my setup. ### Installing packages
  • You need to have NodeJS, pm2 and Nginx installed on your server. You can use the commands down below to get them installed. #### NodeJS Source sudo apt install -y ca-certificates curl gnupg sudo mkdir -p /etc/apt/keyrings curl -fsSl https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_18.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list sudo apt update && sudo apt install -y nodejs

Nginx

sudo apt update
sudo apt install nginx

pm2

sudo npm install -g pm2

Configuring Nginx

  • Before configuring Nginx we need to build our NextJS project. I assume you know how to do it so I'm going to skip that part. ##### pm2
  • Once your project is ready to go, we need to setup pm2. Pm2 is simply like Systemd but for NodeJS. It keeps our projects running in background and restarts them if they crash. Usage of pm2 is actually very simple. Only thing we need to do is cd onto our project dir and run the command down below.
pm2 start npm --name "project-name" -- start

After running this command you should see something like this. ![[Screenshot 2023-09-05 at 14.30.54.png]] This indicates that our project is successfully started by pm2. Now we can configure our Nginx.

Nginx Reverse Proxy
  • Setting up Nginx as a reverse proxy may sound like a complicated process but actually it's very simple. What we need is only create a new file under /etc/nginx/sites-avabile/ directory with the code down below. server { listen 80; server_name www.your-domain-name.com; location / { proxy_pass http://localhost:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

Lastly restart nginx with the command sudo systemctl restart nginx and we're done!

Configuring Cloudflare Tunnel

  • Reason I use Cloudflare tunnel is, it saves us from lot's of handwork like configuring HTTPS, DNS and port forwarding. It's a single command setup and works pretty great.

    To setup Cloudflare Tunnel first log into CloudFlare Zero Trust. Than go to Access > Tunnels and click to create a tunnel button. After giving a name to your tunnel you should see a page just like the one down below. On that page select your distro and copy the command on the left side and paste it into your server's shell.

    After it finishes up go to Public Hostname tab at the top of your screen and from there click to Add public hostname button and configure it as you need. Here is my configration for my site: And after clicking to Save Hostname button. You're good to go!

HTTPS

  • Now only thing you left to do is configuring HTTPS. To setup it first you need to log into your Cloudflare Dashboard (Not zero trust dashboard!) And from there select your domain and navigate to SSL/TLS > Overview section.

At this page select the Full encryption and finally our deployment is done. Now you can head over to your websites domain trough a https connection and it will work like a charm.

I hope that post helps you, if it doesn't my mailbox is always open for people. Until next time!

Reply via E-Mail

Thank You!

Batuhan Y. Yılmaz - 05.09.2023 - 30/100