Running a Gradio App on your Web Server with Nginx

Introduction

Gradio is a Python library that allows you to quickly create customizable web apps for your machine learning models and data processing pipelines. Gradio apps can be deployed on Hugging Face Spaces for free.

In some cases though, you might want to deploy a Gradio app on your own web server. You might already be using Nginx, a highly performant web server, to serve your website (say https://www.example.com), and you want to attach Gradio to a specific subpath on your website (e.g. https://www.example.com/gradio-demo).

In this Guide, we will guide you through the process of running a Gradio app behind Nginx on your own web server to achieve this.

Prerequisites

1. A Linux web server with Nginx installed and Gradio installed
2. A working Gradio app saved as a python file on your web server

Editing your Nginx configuration file

1. Start by editing the Nginx configuration file on your web server. By default, this is located at: /etc/nginx/nginx.conf

In the http block, add the following line to include server block configurations from a separate file:

include /etc/nginx/sites-enabled/*;

2. Create a new file in the /etc/nginx/sites-available directory (create the directory if it does not already exist), using a filename that represents your app, for example: sudo nano /etc/nginx/sites-available/my_gradio_app

3. Paste the following into your file editor:

server {
    listen 80;
    server_name example.com www.example.com;  # Change this to your domain name

    location /gradio-demo/ {  # Change this if you'd like to server your Gradio app on a different path
        proxy_pass http://127.0.0.1:7860/; # Change this if your Gradio app will be running on a different port
        proxy_buffering off;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Tip: Setting the `X-Forwarded-Host` and `X-Forwarded-Proto` headers is important as Gradio uses these, in conjunction with the `root_path` parameter discussed below, to construct the public URL that your app is being served on. Gradio uses the public URL to fetch various static assets. If these headers are not set, your Gradio app may load in a broken state.

Note: The $host variable does not include the host port. If you are serving your Gradio application on a raw IP address and port, you should use the $http_host variable instead, in these lines:

        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Host $host;

Run your Gradio app on your web server

1. Before you launch your Gradio app, you'll need to set the root_path to be the same as the subpath that you specified in your nginx configuration. This is necessary for Gradio to run on any subpath besides the root of the domain.

   Note: Instead of a subpath, you can also provide a complete URL for root_path (beginning with http or https) in which case the root_path is treated as an absolute URL instead of a URL suffix (but in this case, you'll need to update the root_path if the domain changes).

Here's a simple example of a Gradio app with a custom root_path corresponding to the Nginx configuration above.

import gradio as gr
import time

def test(x):
time.sleep(4)
return x

gr.Interface(test, "textbox", "textbox").queue().launch(root_path="/gradio-demo")

2. Start a tmux session by typing tmux and pressing enter (optional)

It's recommended that you run your Gradio app in a tmux session so that you can keep it running in the background easily

3. Then, start your Gradio app. Simply type in python followed by the name of your Gradio python file. By default, your app will run on localhost:7860, but if it starts on a different port, you will need to update the nginx configuration file above.

Restart Nginx

1. If you are in a tmux session, exit by typing CTRL+B (or CMD+B), followed by the "D" key.

2. Finally, restart nginx by running sudo systemctl restart nginx.

And that's it! If you visit https://example.com/gradio-demo on your browser, you should see your Gradio app running there