How to deploy with port redirect (proxy) with nginx?

Spaces
1

Hello! I have a working containerized web solution (JS), which I wanted to test if I could deploy on HF spaces.

To run the container locally, you can simply do:

docker run -p 3000:80 ohif4hf

Problem is that HF spaces does not seem to support setting app_port=3000:80 in the README, only ints, e.g., app_port=3000. In that case I do not get the appropriate port redirect (proxy). It deploys just fine locally. What is the easiest way to get this working? Quick note, I’m not an experiences web developer.

The project is located at (although it is not working currently and is prone to changes):

2

hi @andreped,

You have to change the default port on the Ngnix conf file, since we don’t allow biding ports lower than #1024,

See this example here using Nginx as a reverse proxy for two apps running on the same Space. I’m using port 4444 with Ngnix.

1 Like
3

Aaah, that explains some things. Cheers! :]

Let me give it a go and rewrite my Dockerfile and nginx config based on the reverse proxy example. Will give you an update on how it goes.

1 Like
4

Here is another example. Note that we have to install nginx and add specific permission, since we can’t run it as root,

5

Hmm, I tried rewriting the Dockerfile and config, but when running the final container, the final website does not show.

I believe it might have to do with how the original project setup their nginx config and that they used the nginxinc/nginx-unprivileged:1.25-alpine image, which was different from the one you used (see here for original Dockerfile).

Swapping this with your solution did not even work locally, so I guess something is not compatible. Maybe the config is just wrong (see here for original config).

Basically, whatever I do, I am unable to access the website with only a single port ID. It does not redirect as it should. So I cannot deploy it on HF spaces. Even though the original 3000:80 worked fine.

6

Hi @andreped,

I had a quick look at the OHIF documentation and it appears that you can have a PORT environment variable to configure a different Nginx port. So I created a simple Dockerfile and set the PORT environment variable to 7860, which is the default port on Spaces, and it works.

FROM ohif/app:latest

However, I noticed that you would need a custom Nginx configuration file to properly configure cross-origin isolation. So, I modified the Dockerfile from the original repository appropriately and also added this extra configuration to our Spaces README. md to enable custom headers.

Feel free to duplicate.

Dockerfile: Dockerfile · radames/OHIF-Medical-Imaging-Viewer at main
Demo: Ohif - a Hugging Face Space by radames

1 Like
7

Just tried incorporating your ideas and it works wonders! Thank you so much! This was a nice thing to wake up to :]

I never would have thought about modifying the app-config.js. I also noticed that you no longer set the app_port in the README. But how does this affect local deployment? I just tried running the built container locally, but it does not show in localhost. Is there a default port I’m not setting or similar?

Screenshot 2023-09-19 at 08.34.41
Screenshot 2023-09-19 at 08.34.411920×1040 80.9 KB

8

Great!
Note on my Dockerfile I’ve skipped the entrypoint.sh and I’m copying a custom a nginx.conf to the image Dockerfile · radames/OHIF-Medical-Imaging-Viewer at main and nginx.conf

And if you run locally use docker run -ti -p 7860:7860 tag-name

1 Like