| # 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 | |