Fix isssue with running with nginx

[abidlabs]

Fixes: #3472 by adding a root_path parameter to launch() which should be set to the same as the subpath of the nginx reverse proxy. I looked pretty hard to see if there was a way that we didn't have to manually specify this parameter but it seems that FastAPI apps (or any web apps) have no way of knowing what the path of the proxy is so this needs to be manually specified: https://fastapi.tiangolo.com/advanced/behind-a-proxy/#setting-the-root_path-in-the-fastapi-app

Hard to write a test for this, but I replicate the nginx conf & test code from this comment: #3472 (comment)

And you can see it running successfully here: http://54.191.13.1/app/gradio/

[gradio-pr-bot]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-4133-all-demos

[freddyaboulton]

@abidlabs Thanks for the fix! If we're reading the root_path from the request, why do we need an argument in blocks?

[abidlabs]

Good question. The root_path from the request will include the subpath if you mount Gradio within a FastAPI app. However, it will not include any subpath that comes from the nginx reverse proxy since the FastAPI app does not know about that. So you need to have both

[aliabid94]

where is the Blocks.root_path used? I only see the root_path from the request being used.

[abidlabs]

In configure_app. The FastAPI's app's root_path is set to Blocks's root_path

[abidlabs]

When you do request.scope.get("root_path"), it combines both the FastAPI app's explicit root path (the same one coming from the nginx reverse proxy), along with any subpath that your app may have because it's mounted within a larger FastAPI

[abidlabs]

I am planning on writing a Guide that explains this more (#3260). But for now, yes you need both

[abidlabs]

Take a look at this user's 2 examples to see why you need both: #3472 (comment)

[aliabid94]

I see it being set to self.root_path but never being used, is that something the FastAPI app automatically recognizes?

[abidlabs]

Yup the root_path is used internally by request.scope.get("root_path"). This is kinda mentioned here: https://fastapi.tiangolo.com/advanced/behind-a-proxy/#setting-the-root_path-in-the-fastapi-app

[aliabid94]

where is the Blocks.root_path used? I only see the root_path from the request being used.

[aliabid94]

Looking at where we use root in the frontend:

File requests, in normalise_file

export function normalise_file(
	file: Array<FileData> | FileData | string | null,
	root: string,
	root_url: string | null
): Array<FileData> | FileData | null {
  // ...     
	if (file.is_file) {
		if (root_url == null) {
			file.data = root + "/file=" + file.name;
		} else {
			file.data = "/proxy=" + root_url + "/file=" + file.name;
		}
	}
	return file;
}

a) root will never end in slash, correct?
b) can we get rid of root_url? If not, can you explain where that's used real quick

Loading theme / stylesheets

		await mount_css(config.root + "/theme.css", document.head);

Looks fine.

API Docs

	if (root === "") {
		root = location.protocol + "//" + location.host + location.pathname;
	}
	if (!root.endsWith("/")) {
		root += "/";
	}
        
// ...
	let response = await fetch(root + "info");

// ...
		let [response, status_code] = await post_data(
			`${root}run/${dependency.api_name}`,
			{
				data: inputs
			}
		);

EDIT: We can leave API docs as is for now, and clean it up another PR

[abidlabs]

a) root will never end in slash, correct?

It shouldn't as long as the user sets it up correctly. Here's what I say in the docstring for root_path:

The root path (or "mount point") of the application, if it's not served from the root ("/") of the domain. Often used when the application is behind a reverse proxy that forwards requests to the application. For example, if the application is served at "https://example.com/myapp", the root_path should be set to "/myapp".

We could check for a trailing slash and remove it just in case

b) can we get rid of root_url? If not, can you explain where that's used real quick

Nope we need root_url because that's used in place of root when a Gradio app is loaded from an external source like Spaces using gr.load(). All files, etc. should use the root_url of the Space (since that's where they'd be generated and stored), not the root_url of the current Space.

We could rename root_url to be remote_url to be more clear. But let's do that later as this field appears in the config and I don't want to break anything with loading external Spaces, etc.

[aliabid94]

ok LGTM

[abidlabs]

a) root will never end in slash, correct?

I just checked and even if a user does put the additional trailing slash, FastAPI removes it, so we should be good.

It looks like all questions have been answered so I'll go ahead and merge! Thanks @aliabid94 @freddyaboulton for the detailed review.

[meijunfeng2019]

    location / {
        proxy_pass http://xx.xx.xx.xx:7860;
        proxy_set_header  Host  $host;
    }
   location /theme.css{
       proxy_pass http://xx.xx.xx.xx:7860/app/theme.css;
       proxy_set_header Host $host;
       proxy_set_header X-Real-Ip $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
   }

加上下面的 location /theme.css可以解决这个问题