How to set up a reverse proxy with Nginx, configure SSL and connect a subdomain

Hidde — Tue, 15 Mar 2022 14:15:14 +0000

Hello Devs,

Today i am going to explain you what a reverse proxy is and how to configure it using Nginx.

What is a reverse proxy?

A reverse proxy server is an intermediate connection point positioned at a network's edge. It receives initial HTTP connection requests, acting like the actual endpoint. Essentially your network's traffic cop, the reverse proxy serves as a gateway between users and your application origin server.

Get Started

Prerequisites
I assume you have a domain and a Linux server with Ubuntu, Debian or Centos installed. In this example, I'm using Ubuntu 20.04.

Install Nginx
To get started, open a ssh connection to your server, and install Nginx with the following commands.

Update your machine:
sudo apt update
Install nginx:
sudo apt install nginx

After the installation process, Ubuntu 20.04 starts Nginx, so the web server should already be up and running. We can check this to make sure the service is running with this command:
systemctl status nginx

If nginx is not running, it can be possible that port 80 is already in use by Apache. In this case, you need to stop / remove Apache.

Configuration
To configure the reverse proxy, edit the domain's server block configuration using Nano:
nano /etc/nginx/sites-available/default

Add this at the bottom of the config file:

server {
    listen 80;
    server_name www.example.com example.com;

    location / {
       proxy_pass http://127.0.0.1:8080;
    }
}

Change the value of server_name with your domain / subdomain, and change the port of proxy pass to the port that your web server is running on.

Restart the Nginx service:
systemctl restart nginx

The reverse proxy should work now. If this is not the case, comment below to get help.

Configure DNS
Now let's connect your domain.
Go to the DNS settings of your domain (Cloudflare for example) and add an A record with your domain / subdomain as name and the ip address of your server as value. Save it and you're done!

Generate an SSL certificate
You can generate a SSL certificate (for free) with Letsencrypt to encrypt your traffic and enable your domain to be accessed from the HTTPS protocol.

Install Certbot and dependencies:
sudo apt install certbot python3-certbot-nginx

Generate the certificate:
sudo certbot --nginx -d example.com
replace example.com with your (sub)domain.

Enter your email and agree to the TOS.
After Certbot completes generating the certificate, it should automaicly reload Nginx with the new settings.

That's it!

Thanks for reading.
I hope this was a helpful article. If so, let me know :)

Get started creating beautiful designs with daisyUI

Hidde — Mon, 14 Mar 2022 16:19:46 +0000

Hello Devs.

If you're looking for an efficient and modern way to use Tailwind CSS, look no further than daisyUI. daisyUI is a Tailwind CSS component library that helps you to quickly create efficient and consistent designs. It includes everything you need to get started with Tailwind, including buttons, modals, themes, a color palette, and typography.

To get started with daisyUI, simply install the plugin using npm:
npm i daisyui
Or if you are using Yarn:
yarn add daisyui

Then add daisyUI to your tailwind.config.js files:
module.exports = { //... plugins: [require("daisyui")], }

Now to start using daisyUI in your project, open a component and start using the CSS Classes.

For example:
<button class="btn btn-active btn-primary">Button</button>

Documentation

I hope this was helpful.
Thanks for reading!

DEV Community: Hidde

How to set up a reverse proxy with Nginx, configure SSL and connect a subdomain

What is a reverse proxy?

Get Started

Get started creating beautiful designs with daisyUI