|
# Running a Gradio App on your Web Server with Nginx |
|
|
|
Tags: DEPLOYMENT, WEB SERVER, 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](https://hf.space) 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](https://www.nginx.com/), 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](https://www.nginx.com/blog/setting-up-nginx/) and [Gradio installed](/quickstart) |
|
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: |
|
|
|
```bash |
|
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: |
|
|
|
```bash |
|
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; |
|
} |
|
} |
|
``` |
|
|
|
## 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. |
|
|
|
Here's a simple example of a Gradio app with a custom `root_path`: |
|
|
|
```python |
|
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 |
|
|