Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reverse Proxy to easily allow for different domains #14

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Cnidarias
Copy link

Hey

Great work on the project - I really like it so far!

I ran into the same issue as #12 and figured it would be a nicer solution if we used a reverse proxy for the communication between frontend and backend.

Currently the frontend needs to be recompiled in order to host it on a
different domain since the "NEXT_PUBLIC_API_SERVER_URL" is compiled into
the dashboard.

If we instead compile the frontend to make requests to the backend on a
fixed root path (e.g. "/api") then we can use a proxy to forward those
requests to the backend without needing to worry about CORS.

This patch introduces traefik as a reverse proxy to give an idea on how
this would look like
@changeset-bot
Copy link

changeset-bot bot commented Sep 19, 2023

⚠️ No Changeset found

Latest commit: 90ef9cd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@Cnidarias Cnidarias changed the title Reverse Proxy to allow easily allow for different domains Reverse Proxy to easily allow for different domains Sep 19, 2023
@wrn14897
Copy link
Contributor

Hey Cnidarias,

Thanks for being the 1st contributor to HyperDX 🎉
I like the idea of having a reverse proxy.
However, it introduces some complexities:

  1. /api route is used by NextJS (https://nextjs.org/docs/pages/building-your-application/routing/api-routes)
  2. an extra dependency

To simplify the problem, I think we could put default frontend domain URL at .env file and let people rebuild the image.
A lot of great idea here, I will put things together and raise another PR to address the this issue. Thanks

Comment on lines +44 to +49
docker buildx build ./docker/hostmetrics -t ${IMAGE_NAME}:${LATEST_VERSION}-hostmetrics --target prod &
docker buildx build ./docker/ingestor -t ${IMAGE_NAME}:${LATEST_VERSION}-ingestor --target prod &
docker buildx build ./docker/otel-collector -t ${IMAGE_NAME}:${LATEST_VERSION}-otel-collector --target prod &
docker buildx build --build-arg CODE_VERSION=${LATEST_VERSION} . -f ./packages/miner/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-miner --target prod &
docker buildx build --build-arg CODE_VERSION=${LATEST_VERSION} . -f ./packages/api/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-api --target prod &
docker buildx build --build-arg NEXT_PUBLIC_API_SERVER_URL='/api' --build-arg CODE_VERSION=${LATEST_VERSION} . -f ./packages/app/Dockerfile -t ${IMAGE_NAME}:${LATEST_VERSION}-app --target prod
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good stuff here. I think we want to disable multi-platform build (for local build purpose). Will include this in the separate PR

@Cnidarias
Copy link
Author

Hey,

Thanks for pointing out the issue with the /api route - I've obviously never used NextJS before 😆

While making it easier to build the image is probably a good start I still feel like providing an option to just run it "wherever" would be really beneficial.

I am assuming there are quite a few people that would love to just throw it on a VM and use it there (that's how I stumbled upon the issue) - and I'd like to avoid having to build it first, push it into my CR and then use it.

Obviously deciding on if it's worth to add another dependency or not is always tricky. I just threw this PR together really quickly because I wanted to be able to test things and \I saw others were having similar issues. I wasn't really expecting it to get merged ;)

One should however probably remove the NEXT_PUBLIC_ env vars from the docker-compose.yml file as it gives the idea that one can simply change the URLs.

Thanks again for the cool tool!

@wrn14897
Copy link
Contributor

because I wanted to be able to test things and \I saw others were having similar issues. I wasn't really expecting it to get merged ;)

Totally make sense. Please throw any ideas. We'd appreciate and take all feedback seriously. I'm gonna remove NEXT_PUBLIC_ of course and make it more generic. Thanks

@Cnidarias
Copy link
Author

Cnidarias commented Sep 20, 2023

How about we go with less of an "integrated" approach of we're shipping this with another dependency to more of an example type deal?

We could make like an example directory for running it behind a proxy e.g.

examples/
├── traefik/
│   ├── docker-compose.traefik.yml
│   ├── README.md

And then in the README we include the steps for building the docker image with the required NEXT_PUBLIC_API_SERVER_URL - the docker-compose.traefik.yml would include traefik and the required overrides for the other services (e.g. the labels for frontend and backend) and then one would run it like so docker compose -f docker-compose.yml -f examples/traefik/dokcer-compose.traefik.yml up -d

This would allow others to also add configurations for other provides?

Then include a link in the main README so people find it quickly?

@wrn14897
Copy link
Contributor

wrn14897 commented Sep 21, 2023

How about we go with less of an "integrated" approach of we're shipping this with another dependency to more of an example type deal?

We could make like an example directory for running it behind a proxy e.g.

examples/
├── traefik/
│   ├── docker-compose.traefik.yml
│   ├── README.md

And then in the README we include the steps for building the docker image with the required NEXT_PUBLIC_API_SERVER_URL - the docker-compose.traefik.yml would include traefik and the required overrides for the other services (e.g. the labels for frontend and backend) and then one would run it like so docker compose -f docker-compose.yml -f examples/traefik/dokcer-compose.traefik.yml up -d

This would allow others to also add configurations for other provides?

Then include a link in the main README so people find it quickly?

Great idea! For the better DX, I'd prefer to not add the dependency at this moment. The goal is every dev should be able to easily start + rebuild the project meanwhile they can plug any dependency if they want to. We really appreciate the effort to solve the problem. It should be resolved in the next release :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants