Remove hardcoded 'localhost' references in Prefect Server UI Vue Apollo JavaScript

Current behavior

When deploying the Docker image for the ui component, it appears to be a simple nginx container serving static webpage assets (JavaScript, CSS, etc.).

The challenge comes when we want to customize the location of the Apollo service inside this Docker container. It seems at this location, it will attempt to read in an environment variable called VUE_APP_GRAPHQL_HTTP, but when that’s not present, it’ll simply default to http://localhost:4200/graphql/. https://github.com/PrefectHQ/prefect/blob/master/server/services/ui/src/vue-apollo.js#L9

This prevents us from modifying the location of Apollo when running the ui Docker container.

To contrast this with running on the CLI, you can get around this by calling npm run serve and passing in the desired value for VUE_APP_GRAPHQL_HTTP (although it seems to also be hardcoded for localhost). https://github.com/PrefectHQ/prefect/blob/master/server/src/prefect_server/cli/services.py#L73

Proposed behavior

It would be ideal to have the ability to pass in a dynamic location for VUE_APP_GRAPHQL_HTTP at runtime for the ui Docker container.

This way you can deploy the Prefect Server on a distributed compute platform to gain all the benefits of running on multiple servers, and you’re not gated on a single point of failure.

Example

I hacked around the solution by modifying the entrypoint for the ui container, and executing this script to perform a string sub for the desired location of Apollo: https://github.com/szelenka/prefect-ui/blob/gh-pages/prefect-ui/files/configmap/website_entrypoint.sh

This allows someone to specify the desired location via an environment variable, to dynamically adjust the location of this resource at runtime. Although I’m not sure if that’s a valid solution.

[znicholasbrown]

Quick update on this one: #2338 was merged which will point the UI to the GraphQL endpoint you’ve set in ~/.prefect/config.toml.

[jloehel]

@lauralorenz Thanks for the long answer. To be clear here, I don’t plan to deploy Prefect on bare-metal servers. I would prefer to deploy it in a swarm or k8s cluster. It would be nice to have Prefect running in k8s (helm chart) and using a k8s operator, something like eirini for cloudfoundry, to spawn light-weight containers in k8s itself for the tasks. But right now, I have the feeling, that the community setup is really tighten to the localhost. More like a dev setup. I am looking forward to seeing more deployment options soon. 😃 Thanks again for the precise and honest answer.