build(frontend): streamline frontend deployment via Docker

[CammilleCC]

This PR reorganises the frontend repo’s infra-related files to live at the repository root. The goal is to make it easier to run and reason about Docker compose workflows by standardising on the repo root as the working directory.

New structure:

.
├── Dockerfile
├── apps
│   ├── app
│   │   ├── Dockerfile
│   └── site
│       ├── Dockerfile
├── compose.dev.yml
├── compose.local.yml
├── compose.test.yml
├── nginx
│   ├── proxy_api.conf
│   └── templates
│       ├── default.app.conf.template
│       └── default.frontend.conf.template

Changes

• Moved infra-related files (Docker compose/ NGINX files) to the frontend repo root.
• Added three dedicated compose files, each with an intent:
  • compose.local.yml
    • runs two Vite preview servers
    • serves built apps/site and apps/app
  • compose.dev.yml
    • runs only apps/app
    • exposes it via Traefik at damnit-dev.xfel.eu
  • compose.test.yml
    • runs a single frontend container
    • serves:
      • apps/site at damnit-test.xfel.eu/
      • apps/app at damnit-test.xfel.eu/app/

All scripts and commands are intended to be executed from the repo root.

Usage

Examples (from repo root):

Local

docker compose -f compose.local.yml up -d

Dev

docker compose -f compose.dev.yml up -d

Test

docker compose -f compose.test.yml build
docker compose -f compose.test.yml up frontend -d

Testing

• local: validated via local Docker container
• dev: validated on damnit-dev.xfel.eu
• test: validated on damnit-test.xfel.eu

[RobertRosca]

What was this about again?

[CammilleCC]

There are two problems here:

1. Currently, the allowed redirect URLs on KeyCloak has a signature of https://domain:port/oauth/callback. Unfortunately, KeyCloak don't support wildcard in the middle https://domain:port/*/oauth/callback, where * could be any base path. If we're sure that our base path is app/, then we can ask ITDM to reflect this.

2. I have added building the callback URI in this way, mainly due to the dev frontend using Traefik which supports both http and https and making the API server a bit confused. It doesn't seem to be straightforward detecting the base path from the URL, maybe providing custom X-forwarded-headers would help.

As a workaround, I redirect /oauth/ from the KeyCloak redirect URI to /base_path/oauth. If you have any ideas on how to approach these, I would be happy to learn 😀

[RobertRosca]

TBH I find the nginx configs confusing, although that's probably just because I don't understand nginx configs...

Just to check, now we have two statically built sites, one site which has the home page and one app which is the real application, stored under /usr/share/nginx/html/{app,site}, with options to expand this in the future (e.g. for the demo).

The nginx configs are there to (with relative dirs relative to /usr/share/nginx/html):

1. Serve the site as the home page: / to ./site
2. Serve the app as the application: /app to ./app
3. Proxy backend api calls from /app/{oauth,graphql,metadata,context} to the API server host.

Is that right? If so then using caddy instead of nginx the config would be something like this (assuming the static page builds are in /app/{app,site} and certs are in /app/certs):

# use cert files for tls
tls /app/certs/server.crt /app/certs/server.key

# revere proxy the api endpoints
@api path /app/oauth* /app/graphql* /app/metadata* /app/context*
reverse_proxy @api {$API_URL}

# serve app spa
handle_path /app* {
  root * /app/app
  try_files {path} /index.html
  file_server
}

# serve site spa
handle {
  root * /app/site
  try_files {path} /index.html
  file_server
}

Either way as long as what's there now works we can think about this later.

[CammilleCC]

Thanks for the review 😊 I applied your suggestions now, I would appreciate a second look.

You got my intentions for this PR. Seems like caddy has a better developer experience, would you like to try and see if we can easily replace NGINX? The logs that we provide to IT is also something that we should keep in mind.

[CammilleCC]

Merging this now as it works in production.