webui: prepare containers with NextJS

maany commented 11 months ago

The current containers for webui were written for the React project developed during GSoC 2022. The webui has been re-written since then and we should update the containers for the latest codebase.

The steps ( from the top of my head) are:

Dockerfile

clone the src code from a release tag in rucio/webui. The release tag is supplied as a build-arg to the docker build command
npm run build

Entrypoint

Prepare a .env file ( look at the .env.development.local.template in rucio/webui). The env variables can be provided via --env arg to docker run command or a file mounted to the container.
npm run (to start the nextjs server)

Some concerns

We need to investigate where the SSL certs for the webui should be placed. Until the last version, we had an httpd server for TLS termination, however, it should be possible to run the container behind a reverse proxy/load balancer that also takes care of TLS termination.
We need to check if the SSL Peer Certificate requests are not blocked anywhere in the pipeline so that the end-users see the popup to select a x509 certificate in their browser.
We need a way to mount images to the container in k8s ( logos of the collaboration, branding content). I don't know how we want to do this. At least from the container's point of view, we can have a dedicated volume mount and the entrypoint should move the image to the public directory before running the npm build command. In this case, the npm build should happen within the entrypoint and not in the Dokcerfile.

esilvaju commented 9 months ago

Started working on this issue: https://github.com/rucio/containers/tree/issue_255

maany commented 9 months ago

@esilvaju I have added a utility in the webui that can generate the .env files from environment variables. It does all the necessary checks to ensure the generated .env file is consistent. I have documented the utility here: https://github.com/rucio/webui/tree/master/tools/env-generator and this will tell you exactly what environment variables that should be passed to the docker containers.

Could you adapt the Docker container/Entrypoint to use this. Also, please extract any relevant information from NextJS deployment guidelines, they have some example containers here that use multi-stage builds.

For TLS Termination, we should use a reverse-proxy in front of the nextjs server ( I believe). This could be nginx, traefik or whatever. Preferably, if we proxy layer-4 traffic to the nodejs app, we can be sure that the streaming pipelines work. They could work with regular layer-7 forwarding, but this needs to be tested.

For sample certificates, you can deploy the webui container on a CERN VM and use the CERN CA to generate the certificates for that VM.

Additionally, please update the README for the new webui containers accordingly.

maany commented 9 months ago

A DO guide for nodejs apps behind an nginx proxy: https://gist.github.com/bradtraversy/cd90d1ed3c462fe3bddd11bf8953a896

One way would be to run npm run start on an internal port and proxy all traffic to this internal port from nginx/apache from ports 80, 443. ( traffic from port 80 must be automatically redirected to port 443). You could re-use a big part of the existing httpd config for the webui I believe

rucio / containers