Reverse Proxy Grafana with Nginx in Azure

Introduction

Using a proxy server is a common way of changing the port number of a service. In our previous article, we learned how to map a DNS name to our public IP address in Azure. In this article, we’ll exclude a port number from the DNS name when accessing to Grafana service hosted in Azure.

What is a reverse proxy server?

A reverse proxy server acts as a middleman between the internet and your web servers. It sits at the edge of your network, receiving requests from users (like those browsing your website) and then forwarding them to the appropriate web server behind the scenes.

Think of it like a receptionist for your web servers. The receptionist (reverse proxy) receives all the visitors (client requests) and directs them to the correct office (webserver) based on their needs.

Here are our use cases for reverse proxy

1. Load Balancing: Distributes incoming traffic among multiple web servers for better performance and scalability. This ensures no single server gets overloaded, especially during high-traffic periods.
2. Security: Provides an extra layer of security by hiding the real web servers behind the proxy. The reverse proxy acts as a shield, protecting the origin servers from malicious attacks.
3. SSL Termination: Handles SSL/TLS encryption and decryption, offloading work from web servers. This frees up resources on the web servers to focus on processing requests.
4. Caching: Can cache frequently accessed content to improve response times. The reverse proxy can store frequently requested static content (like images or HTML pages) and serve them to clients without having to go back to the origin server each time, improving performance.
5. Static Content Serving: Can serve static content (like images, videos, or JavaScript files) efficiently. By offloading static content serving to the reverse proxy, the web servers can focus on dynamic content that requires more processing power.

For this article, we’ll use a reverse proxy to change the port number. As a proxy server, we will use Nginx.

Installing and configuring Nginx

First things first, we need to install the Nginx server on our VM.

1. Connect to VM using Putty. (Check out our previous article to learn more about it)
2. Check if we have an nginx server using nginx -v
   
3. We don’t have it, so we need to install it. Run the following command to install the nginx server.

   sudo apt install nginx

4. After installation, run the same version checking command to see if nginx is installed.
   
5. The system should automatically run nginx but anyway, let's see if it is running or not. Run the following command.

   sudo service nginx status

Great, now we have s simple hosted Nginx server page but it is not possible to see it when you just run.

http://mygrafana.eastasia.cloudapp.azure.com (use your configured DNS name) or via your public IP address. Because we don’t have an inbound rule we need to configure it.

Here is how you can configure it.

• Select your VM and search for network settings
• Add inbound rule for port 80
  
• Click the “Add” button and try to navigate via the browser again. And here we are,
  

Now let's configure Nginx to redirect our request directly to the internal 3000 port for Grafana.

Here is what you should do to handle it.

1. From the terminal, let's navigate to the same level as the/etc folder using the cd ../../ command
2. Then run the following command cd etc/nginx/sites-enabled
3. When you run the ls command here, you should see only the “default” file
4. Now, let's create a new config file using sudo nano mygrafana. conf. You can use any name instead of mygrafana.conf
5. Type the following.

server {
            listen 80;
            listen [::]:80;
            server_name mygrafana.eastasia.cloudapp.azure.com;
            location / {

                        proxy_pass              http://localhost:3000/;
            }
   }

Then, hit Ctrl+X and the “Enter” button.

The provided .conf file snippet is for the Nginx web server configuration and defines how Nginx should handle requests for a website named "mygrafana.eastasia.cloudapp.azure.com". Let's break down the directives:

1. server { ... } block: This block defines a configuration for a single virtual server. Everything within this block applies specifically to the website or application managed by this server.
2. listen 80: This directive tells Nginx to listen for incoming connections on port 80, the standard HTTP port.
3. listen [::]:80: This directive instructs Nginx to also listen for connections on port 80 for IPv6 traffic. The [::] notation represents IPv6 addresses.
4. server_name mygrafana.eastasia.cloudapp.azure.com: This directive specifies the domain name that this server block should handle requests for. In this case, it's "mygrafana.eastasia.cloudapp.azure.com". Nginx will only serve content from this block when a request arrives for that specific domain name.
5. location / { ... } block: This block defines a configuration for handling all requests (indicated by the "/") that are routed to this server.
6. proxy_pass http://localhost:3000/: This is the key directive. It tells Nginx to act as a reverse proxy for incoming requests. Here's what it does:
7. proxy_pass: This keyword indicates that Nginx should function as a reverse proxy.
8. http://localhost:3000/: This specifies the destination server to which Nginx should forward the request. In this case, it's sending the request to http://localhost:3000/, which likely points to a Grafana service running on the same server (localhost) on port 3000.

Summary

this .conf file configures Nginx to act as a reverse proxy for the domain "mygrafana.eastasia.cloudapp.azure.com". When a request arrives for that domain, Nginx intercepts it, forwards it to the Grafana service running on localhost:3000, and then returns the response from Grafana to the client's web browser. This approach offers benefits like centralized management and potential security improvements.

Important Note. While this configuration might work for a basic setup, it's important to consider security implications when exposing services directly to the internet. You might want to add authentication or use a secure connection method for production environments.

Before moving forward,s we need to check if the nginx config is valid or not. That is why we need to run

sudo nginx -t

Command

Now, let's restart nginx.

sudo service nginx restart

After that, let's restart Grafana.

sudo service grafana-server restart

Now running your URL without a port should work.