Ability to modify context path of the UI

[radekg]

I'd love to see the ability to specify the context path of the UI. Currently, the UI is available on http://<bind-addr>:<http-port>/ui. It would be awesome to have a -ui-content-path option available to make it work with another path.

I'd be happy to contribute if I could get some pointers on where the relevant code is. I have no knowledge about go at this moment in time but I learn quickly.

[grange74]

From looking at the code, i'd say you'll at least need to change the following:

1. Add the new field to the Config struct below the other 2 UI ones: https://github.com/hashicorp/consul/blob/master/command/agent/config.go#L387
2. Add new test below the other 2 UI ones:
   https://github.com/hashicorp/consul/blob/master/command/agent/config_test.go#L488
3. Read the new command line arg into the new field below the other 2 UI ones: https://github.com/hashicorp/consul/blob/master/command/agent/command.go#L81
4. Use the new config field, if set, to replace the hardcoded "/ui/" context path:
   https://github.com/hashicorp/consul/blob/master/command/agent/http.go#L281
5. Update the existing test and probably add a new test:
   https://github.com/hashicorp/consul/blob/master/command/agent/http_test.go#L640

There may be other places but i guess if all the unit tests pass and you can launch the ui both without the config and it defaults to /ui/ and with it set and it is available on the specified path then you'd be doing well.

[slackpad]

Sorry for delay responding to this one, and thanks for the PR @abhinavdahiya. What use case do folks have in mind for configuring this? It's a simple change, but we'd like to avoid extra complexity unless there's a compelling reason to be able to tweak this.

[radekg]

@slackpad When using location rewrites with nginx proxy, it should be possible to customize the URI on which consul ui responds. If my nginx proxy is setup to forward /server-1/consul-ui to an upstream where consul ui is running, consul ui needs to be set to use /server-1/consul-ui context path. This setting is akin to application.context from Play framework, -web.external-url from Prometheus or Jetty setContextPath.

Does this help?

[vancluever]

Just FYI - I have made a few other enhancements that I think will help this. PR will be in coming shortly.

TL;DR: Currently consul does not serve back full URL paths in its Location: headers when it's doing redirects for the UI, nor does the UI itself append on the correct HTTP origin that accessed it in the first place. These things are necessary to properly support reverse proxies not just on things like port or host but on path as well.

I'll reference back this issue on the PR when I'm ready.

@abhinavdahiya maybe if you could look at it if you'd like and see if we could combine work to have the best of both patches. @slackpad your feedback would be welcome as well.

[slackpad]

This is closely related to #1382, but that also has the idea of changing the REST prefix, not just the UI.

[pearkes]

I think #2585 should be re-opened with support for the new UI for this to be fixed.

[pletessier]

Hi @pearkes
Will this issue be addressed by Hashicorp one day ? Consul is the only service in my whole stack that can't be reverse-proxied.

[fkgre]

long waiting.
I can not change new UI due to this problem.

[jaredvacanti]

I'm finding it very difficult to track the progress of this across the last few years.

Is there a current recommended solution to serving the web-ui at a sub directory at example.com/consul? I am using nginx for my reverse proxy, but the problem is for either Apache or HAProxy. We can proxy_pass to the consul server, but the javascript/css requests at the base url still.

The problem is very well documented. Is there a solution/hack/workaround? Is the only current solution to use subdomains?

[banks]

@jaredvacanti sadly the progress has been minimal. There is clear interest here so we want to get to it, just as always a matter of prioritization since it's not a totally trivial change.

Thanks for your patience.

[rcarre]

Hi @s-christoff any progress to share on this feature please ? Thx

[schristoff]

Hey @rcarre thank you for checking in. I haven't started work on this yet, but it is on our radar to tackle in the next couple months. Thank you!

[jsynowiec]

While we wait for a proper implementation, here's a quick and dirty workaround using nginx reverse proxy and on-the-fly response rewriting. The three rules change paths for static assets, ember rest data source and ember router.

Disclaimer: Tested on 1.5.0. Didn't yet test ACL tokens but it should work or should be easy to pass upstream.

upstream consul_agents {
  server 10.10.10.10:8500;
  server 10.10.10.11:8500;
  server 10.10.10.12:8500;
}

server {
    listen      80;
    server_name consul.dc1.local;

    proxy_set_header Host              $http_host;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    location / {
      sub_filter_once   off;
      sub_filter_types  text/html application/javascript;
      sub_filter        'rootURL%22%3A%22/ui/%' 'rootURL%22%3A%22/consul/%';
      sub_filter        '/ui/assets/' 'https://$host/consul/assets/';
      sub_filter        'namespace:"v1"' 'namespace:"consul/v1"';

      proxy_pass http://consul_agents/ui/;
    }

    location /v1/ {
      proxy_pass http://consul_agents/v1/;
    }
}

[schristoff]

Hey! This should be fixed in #5950 - thank you so much for your patience while we worked on this!

[rcarre]

Thx Sarah. De : Sarah Christoff [mailto:notifications@github.com] Envoyé : mercredi 26 juin 2019 20:45 À : hashicorp/consul Cc : CARRE Richard 1 TGI/OLS; Mention Objet : Re: [hashicorp/consul] Ability to modify context path of the UI (#1930) Hey! This should be fixed in #5950<#5950> - thank you so much for your patience while we worked on this! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1930?email_source=notifications&email_token=AF4G6BKXWNBWZ3JZPUQLFLLP4O2JPA5CNFSM4CAN5XO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYUOX2Q#issuecomment-505998314>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AF4G6BJV7YFMRGDTVLRTVV3P4O2JPANCNFSM4CAN5XOQ>.

…

_________________________________________________________________________________________________________________________ Ce message et ses pieces jointes peuvent contenir des informations confidentielles ou privilegiees et ne doivent donc pas etre diffuses, exploites ou copies sans autorisation. Si vous avez recu ce message par erreur, veuillez le signaler a l'expediteur et le detruire ainsi que les pieces jointes. Les messages electroniques etant susceptibles d'alteration, Orange decline toute responsabilite si ce message a ete altere, deforme ou falsifie. Merci. This message and its attachments may contain confidential or privileged information that may be protected by law; they should not be distributed, used or copied without authorisation. If you have received this email in error, please notify the sender and delete this message and its attachments. As emails may be altered, Orange is not liable for messages that have been modified, changed or falsified. Thank you.

[Fuco1]

I set this through config.json but I'm still being redirected to /ui/ even after consul restart. My config:

{"acl":{"default_policy":"allow","enable_token_persistence":true,"enabled":true},"bind_addr":"10.0.0.7","bootstrap_expect":3,"client_addr":"127.0.0.1 10.0.0.7","data_dir":"/opt/consul","enable_script_checks":true,"retry_join":["nomad-server-0","nomad-server-1","nomad-server-2"],"server":true,"ui":true,"ui_content_path":"/consul/"}

Edit: after using the flag on the CLI things work as expected except it does not really solve the problem of reverse-proxying because the website still calls the api endpoints under <host>/v1 and not <host>/PREFIX/v1.

[hanshasselberg]

@Fuco1 which consul version are you using?

[Fuco1]

@i0rek 1.5.3 on linux 64bit, I downloaded the binary from the website.

[zopar]

I confirm the problem also in the latest docker consul container.
If for example you set the ui dir to consul
you will have:
http://host:8500/consul for the ui
but the entry point for api is always http://host:8500/v1 and not http://host:8500/consul/v1

Related issue
#1382

[Fuco1]

Something seems to set the referer header to <host>/consul so I used that in my reverse proxy setting to pass all <host>/v1 with this header to the actual consul backend. But it's not the greatest solution.

Traefik config:

[file]
  [frontends]
    [frontends.consul]
    backend = "consul"
      [frontends.consul.routes.consul]
      rule = "PathPrefix:/consul"
    [frontends.consul_api]
    backend = "consul"
      [frontends.consul_api.routes.consul]
      rule = "HeadersRegexp:referer,https://MY-HOST.com/consul/.*"

  [backends]
    [backends.consul]
      [backends.consul.servers.server1]
      url = "http://nomad-server-0:8500/"
      [backends.consul.servers.server2]
      url = "http://nomad-server-1:8500/"
      [backends.consul.servers.server3]
      url = "http://nomad-server-2:8500/"

Consul UI works correctly when I visit https://MY-HOST.com/consul/

[zopar]

Ok got it.
Firstly we need to clarify that the problem appears when we want to use a reverse proxy without dns names. I do not know if it appears with dns domain name.
I found the problem for example using traefik, I am checking if it is possible to tweak it with differen rules.

In a normal deployment we can have ui in a different path, but in any case v1 point to the root path

Anyway in case we want v1 on a different path than / we need to change some piece of code.
It is also a little bit "dirty":

Function related to it are:
https://github.com/hashicorp/consul/blob/7753b97cc7dd597a7ed3a4fbb14a6906e36ab108/agent/http.go
line 199 function registerEndpoint
we need to prepend the desired path for v1 to the pattern variable

https://github.com/hashicorp/consul/blob/8ff1f481fe6f2ea2c3f7ba28a3739bacc1c0a753/api/api.go
line 774 function newRequest
we need to prepend the desider path to the path variable

Also we need to modify a js (it is ember), because it uses v1 as namespace
https://github.com/hashicorp/consul/blob/e31c285565177a3221e3cad712a10b07f1837422/ui-v2/app/adapters/application.js
line 20
We need to prepend the desired path suppose is myv1 you will have
namespace: 'myv1/v1'

Obviously we need to do that with variables, so we need a configuration option to it (also to work in docker).
For the javascript we need to check if the use of process.env.KEY (like for node.js) works well to inject the namespace

As final result you can have the ui where you like and v1 where you like something like

http://myhost.com/myv1/v1
http://myhost.com/ui

It should works also with different ui based on ui-dir-path option.

If the consul team like this solution we could work on it.

[zopar]

Found a solution with traefik and docker
I posted it here that is probably a better place
#1382 (comment)

[hanshasselberg]

I can confirm that the config option doesn't seem to work - in contrast to the cli flag -ui-content-path. I created a bug for that: #6346.

[radioipcloud]

We implemented a solution which might be worth mentioning here with nginx i.e. sharing consul and vault ui under the same nginx location -> /ui/consul + /ui/vault

Just thought to share it here with everybody.

#11627