Skip to content
This repository has been archived by the owner on Mar 27, 2019. It is now read-only.

VaultUI Blank Screen - Docker Swarm behind NGINX proxy #243

Open
isuftin opened this issue Feb 9, 2018 · 3 comments
Open

VaultUI Blank Screen - Docker Swarm behind NGINX proxy #243

isuftin opened this issue Feb 9, 2018 · 3 comments

Comments

@isuftin
Copy link

isuftin commented Feb 9, 2018

Not sure where to go with this. I am testing in Chrome, Firefox and Safari. When I load Vault UI, the page is blank. Dev tools console shows nothing and all of the files seem to load as expected.

I have a Docker Swarm running with VaultUI (2.4.0-rc3), Vault and Consul as services and NGINX as a service.

I can point Chrome to http://ip-of-a-worker-node/vault/

All documents seem to load as expected.

image

The tab has Vault's favico.

What am I missing? I see no errors either in dev tools or in NGINX...

compose.yml:

 ---
version: '3.4'

configs:
  vault_config:
    file: ./vault/data/config/vault.json

secrets:
  vault_cert_file.crt:
    file: ./vault/data/swarm_certs/wildcard.crt
  vault_key_file.key:
    file: ./vault/data/swarm_certs/wildcard.key
  vault_tls_ca_file.cer:
    file: ./consul/data/certificates/consul-root.cer
  vault_tls_cert_file.cer:
    file: ./consul/data/certificates/consul-server.cer
  vault_tls_key_file.key:
    file: ./consul/data/certificates/consul-server.key

networks:
  production_enterprise_overlay:
    external: true

services:
  server:
    image: vault:0.9.3
    networks:
      production_enterprise_overlay:
        aliases:
          - vault.swarm.container
    deploy:
      mode: replicated
      replicas: 0
      update_config:
        parallelism: 1
        failure_action: pause
        delay: 10s
      restart_policy:
        condition: on-failure
        delay: 5s
        max_attempts: 3
        window: 120s
      placement:
        constraints:
          - node.role == worker
    ports:
      - "8200:8200"
      - "8201:8201"
      - "8125:8125"
    volumes:
      - /usr/local/share/nfs/project/enterprise/management/docker/swarm/manager/vault/server:/shared
    environment:
      - VAULT_REDIRECT_INTERFACE=eth0
      - SKIP_SETCAP=true
    command: "vault server -config=/vault/config/00-vault.json"
    configs:
      - source: vault_config
        target: /vault/config/00-vault.json
    secrets:
      - vault_cert_file.crt
      - vault_key_file.key
      - vault_tls_ca_file.cer
      - vault_tls_cert_file.cer
      - vault_tls_key_file.key

  ui:
    image: djenriquez/vault-ui:2.4.0-rc3
    networks:
      production_enterprise_overlay:
        aliases:
          - vault.ui.container
    deploy:
      mode: replicated
      replicas: 0
      placement:
        constraints:
          - node.role == worker
    ports:
      - "8000:8000"
    environment:
      - VAULT_URL_DEFAULT=https://vault.swarm.container:8200/vault
      - NODE_TLS_REJECT_UNAUTHORIZED=0
      - PORT=8000

NGINX.confg

events {
  worker_connections  4096;  ## Default: 1024
}

http {

  proxy_redirect          off;
  proxy_set_header        X-Real-IP       $remote_addr;
  proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
  client_max_body_size    10m;
  client_body_buffer_size 128k;
  proxy_connect_timeout   90;
  proxy_send_timeout      90;
  proxy_read_timeout      90;
  proxy_buffers           32 4k;

  resolver 127.0.0.11 valid=5s ipv6=off;

  server {
    listen       80;
    server_name  nginx;

    location /portainer/ {
      set $upstream_endpoint http://portainer:9000;
      rewrite ^/portainer/(.*) /$1 break;
      proxy_http_version 1.1;
      proxy_set_header Connection "";
      proxy_set_header   Host $host;
      proxy_set_header   X-Forwarded-Host $server_name;
      add_header         X-Upstream $upstream_addr;
      proxy_pass $upstream_endpoint;
    }

    location /portainer/api/websocket/ {
      set $upstream_endpoint http://portainer:9000/api/websocket;
      rewrite ^/portainer/api/websocket/(.*) /$1 break;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header   Host $host;
      proxy_set_header   X-Forwarded-Host $server_name;
      add_header         X-Upstream $upstream_addr;
      proxy_http_version 1.1;
      proxy_pass $upstream_endpoint;
    }

    location /vault/ {
      set $upstream_endpoint http://vault.ui.container:8000/;
      rewrite ^/vault/(.*) /$1 break;
      proxy_http_version 1.1;
      proxy_set_header Connection "";
      proxy_set_header   Host $host;
      proxy_set_header   X-Forwarded-Host $server_name;
      add_header         X-Upstream $upstream_addr;
      proxy_pass $upstream_endpoint$1;
      proxy_redirect off;
    }

    location /dist/ {
      set $upstream_endpoint http://vault.ui.container:8000/dist/;
      rewrite ^/dist/(.*) /$1 break;
      proxy_http_version 1.1;
      proxy_set_header Connection "";
      proxy_set_header   Host $host;
      proxy_set_header   X-Forwarded-Host $server_name;
      add_header         X-Upstream $upstream_addr;
      proxy_pass $upstream_endpoint$1;
      proxy_redirect off;
    }

    location /consul/ {
      set $upstream_endpoint http://server.consul.swarm.container:8500/ui/;
      rewrite ^/consul/(.*) /$1 break;
      proxy_set_header Host server.consul.swarm.container:8500;
      proxy_set_header X-Forwarded-Host $host:$server_port;
      proxy_set_header X-Forwarded-Server $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header   X-Real-IP $remote_addr;
      proxy_pass $upstream_endpoint$1;
      proxy_redirect off;
    }

    location /v1/ {
      set $upstream_endpoint http://server.consul.swarm.container:8500/v1/;
      rewrite ^/v1/(.*) /$1 break;
      proxy_set_header Host server.consul.swarm.container;
      proxy_set_header X-Forwarded-Host $host:$server_port;
      proxy_set_header X-Forwarded-Server $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header   X-Real-IP $remote_addr;
      proxy_pass $upstream_endpoint$1;
      proxy_redirect off;
    }

  }

  types {
    text/html                             html htm shtml;
    text/css                              css;
    text/xml                              xml rss;
    image/gif                             gif;
    image/jpeg                            jpeg jpg;
    application/x-javascript              js;
    text/plain                            txt;
    text/x-component                      htc;
    text/mathml                           mml;
    image/png                             png;
    image/x-icon                          ico;
    image/x-jng                           jng;
    image/vnd.wap.wbmp                    wbmp;
    application/java-archive              jar war ear;
    application/mac-binhex40              hqx;
    application/pdf                       pdf;
    application/x-cocoa                   cco;
    application/x-java-archive-diff       jardiff;
    application/x-java-jnlp-file          jnlp;
    application/x-makeself                run;
    application/x-perl                    pl pm;
    application/x-pilot                   prc pdb;
    application/x-rar-compressed          rar;
    application/x-redhat-package-manager  rpm;
    application/x-sea                     sea;
    application/x-shockwave-flash         swf;
    application/x-stuffit                 sit;
    application/x-tcl                     tcl tk;
    application/x-x509-ca-cert            der pem crt;
    application/x-xpinstall               xpi;
    application/zip                       zip;
    application/octet-stream              deb;
    application/octet-stream              bin exe dll;
    application/octet-stream              dmg;
    application/octet-stream              eot;
    application/octet-stream              iso img;
    application/octet-stream              msi msp msm;
    audio/mpeg                            mp3;
    audio/x-realaudio                     ra;
    video/mpeg                            mpeg mpg;
    video/quicktime                       mov;
    video/x-flv                           flv;
    video/x-msvideo                       avi;
    video/x-ms-wmv                        wmv;
    video/x-ms-asf                        asx asf;
    video/x-mng                           mng;
  }

}
@isuftin
Copy link
Author

isuftin commented Feb 27, 2018

An update (still not fixed). This is a boiled down version of the configuration setup:

docker-compose:

---
version: '3.4'

networks:
  production_enterprise_overlay:
    external: true

configs:
  nginx_config:
    file: ./nginx.conf

services:
  proxy:
    image: nginx
    ports:
      - '80:80'
      - '443:443'
      - '8009:8009'
    command: ['nginx-debug', '-g', 'daemon off;']
    configs:
      - source: nginx_config
        target: /etc/nginx/nginx.conf
    networks:
      production_enterprise_overlay:
        aliases:
          - nginx
  ui:
    image: djenriquez/vault-ui:2.4.0-rc3
    networks:
      production_enterprise_overlay:
        aliases:
          - vault.ui.container
    deploy:
      mode: replicated
      replicas: 0
      placement:
        constraints:
          - node.role == worker
    ports:
      - "8000:8000"
    environment:
      - VAULT_URL_DEFAULT=https://vault.swarm.container:8200/vault
      - NODE_TLS_REJECT_UNAUTHORIZED=0
      - PORT=8000

nginx.conf:

events {
  worker_connections  4096;  ## Default: 1024
}

http {
  default_type application/octet-stream;
  proxy_buffering off;
  include    mime.types;
  resolver 127.0.0.11 valid=5s ipv6=off;
  log_format upstreamlog '[$time_local] $remote_addr - $remote_user - $server_name to: $upstream_addr: $request upstream_response_time $upstream_response_time msec $msec request_time $request_time';


  server {
    listen       80;
    rewrite_log on;
    access_log /dev/stdout upstreamlog;
    error_log /dev/stdout info;

    location /vault/ {
      set $upstream_endpoint http://vault.ui.container:8000;
      rewrite ^/vault/(.*) /$1 break;
      proxy_pass $upstream_endpoint$1;
    }

    location /dist/ {
      set $upstream_endpoint http://vault.ui.container:8000/dist/;
      rewrite ^/dist/(.*) $1 break;
      proxy_pass $upstream_endpoint$1;
    }

    location /vaultui {
      set $upstream_endpoint http://vault.ui.container:8000/vaultui;
      proxy_pass $upstream_endpoint;
    }
  }
}


docker stack deploy -c docker-compose.yml nginx

$ docker service logs -f nginx_proxy
nginx_proxy.1.culx32qydq95@manager    | 2018/02/27 14:27:21 [notice] 5#5: *1 "^/vault/(.*)" matches "/vault/", client: 10.255.0.3, server: , request: "GET /vault/ HTTP/1.1", host: "192.168.99.100"
nginx_proxy.1.culx32qydq95@manager    | 2018/02/27 14:27:21 [notice] 5#5: *1 rewritten data: "/", args: "", client: 10.255.0.3, server: , request: "GET /vault/ HTTP/1.1", host: "192.168.99.100"
nginx_proxy.1.culx32qydq95@manager    | [27/Feb/2018:14:27:21 +0000] 10.255.0.3 - - -  to: 10.0.0.32:8000: GET /vault/ HTTP/1.1 upstream_response_time 0.002 msec 1519741641.080 request_time 0.006
nginx_proxy.1.culx32qydq95@manager    | 2018/02/27 14:27:21 [notice] 5#5: *1 "^/dist/(.*)" matches "/dist/styles.css", client: 10.255.0.3, server: , request: "GET /dist/styles.css HTTP/1.1", host: "192.168.99.100", referrer: "http://192.168.99.100/vault/"
nginx_proxy.1.culx32qydq95@manager    | 2018/02/27 14:27:21 [notice] 5#5: *1 rewritten data: "styles.css", args: "", client: 10.255.0.3, server: , request: "GET /dist/styles.css HTTP/1.1", host: "192.168.99.100", referrer: "http://192.168.99.100/vault/"
nginx_proxy.1.culx32qydq95@manager    | 2018/02/27 14:27:21 [notice] 5#5: *5 "^/dist/(.*)" matches "/dist/web-bundle.js", client: 10.255.0.3, server: , request: "GET /dist/web-bundle.js HTTP/1.1", host: "192.168.99.100", referrer: "http://192.168.99.100/vault/"
nginx_proxy.1.culx32qydq95@manager    | 2018/02/27 14:27:21 [notice] 5#5: *5 rewritten data: "web-bundle.js", args: "", client: 10.255.0.3, server: , request: "GET /dist/web-bundle.js HTTP/1.1", host: "192.168.99.100", referrer: "http://192.168.99.100/vault/"
nginx_proxy.1.culx32qydq95@manager    | [27/Feb/2018:14:27:21 +0000] 10.255.0.3 - - -  to: 10.0.0.32:8000: GET /dist/styles.css HTTP/1.1 upstream_response_time 0.007 msec 1519741641.115 request_time 0.007
nginx_proxy.1.culx32qydq95@manager    | [27/Feb/2018:14:27:21 +0000] 10.255.0.3 - - -  to: 10.0.0.32:8000: GET /dist/web-bundle.js HTTP/1.1 upstream_response_time 0.223 msec 1519741641.334 request_time 0.223

image

^ This is what it looks like when not working via nginx

image

^ This is me hitting the app directly against the Docker Swarm IP:port combo. No problems.

It seems like it never advances beyond grabbing the web bundle js - no errors or anything

@isuftin
Copy link
Author

isuftin commented Feb 27, 2018

FYI this is also the same behavior seen if I put a nonsensical location for the working VaultUI URL:

image

@isuftin
Copy link
Author

isuftin commented Feb 27, 2018

I've gone so far as to hack in the morgan npm library into VaultUI Docker.

Working (http://192.168.99.100:8000/):

vault_ui.1.rodr48tewsmj@worker1    | ::ffff:10.255.0.3 - - [27/Feb/2018:19:34:38 +0000] "GET / HTTP/1.1" 200 633 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0"
vault_ui.1.rodr48tewsmj@worker1    | ::ffff:10.255.0.3 - - [27/Feb/2018:19:34:39 +0000] "GET /dist/styles.css HTTP/1.1" 200 - "http://192.168.99.100:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0"
vault_ui.1.rodr48tewsmj@worker1    | ::ffff:10.255.0.3 - - [27/Feb/2018:19:34:39 +0000] "GET /dist/web-bundle.js HTTP/1.1" 200 - "http://192.168.99.100:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0"
vault_ui.1.rodr48tewsmj@worker1    | ::ffff:10.255.0.3 - - [27/Feb/2018:19:34:39 +0000] "GET /dist/favicon.ico HTTP/1.1" 304 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0"
vault_ui.1.rodr48tewsmj@worker1    | ::ffff:10.255.0.3 - - [27/Feb/2018:19:34:39 +0000] "GET /vaultui HTTP/1.1" 200 183 "http://192.168.99.100:8000/login?returnto=/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0"
vault_ui.1.rodr48tewsmj@worker1    | ::ffff:10.255.0.3 - - [27/Feb/2018:19:34:40 +0000] "GET /dist/7f8b4fb08d1aa6aa4ab6424413e70c42.svg HTTP/1.1" 200 - "http://192.168.99.100:8000/login?returnto=/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0"

Not working (http://192.168.99.100/vault/):

vault_ui.1.rodr48tewsmj@worker1    | ::ffff:10.0.0.163 - - [27/Feb/2018:19:34:45 +0000] "GET / HTTP/1.1" 304 - "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0"
vault_ui.1.rodr48tewsmj@worker1    | ::ffff:10.0.0.163 - - [27/Feb/2018:19:34:45 +0000] "GET /dist/styles.css HTTP/1.1" 304 - "http://192.168.99.100/vault/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0"
vault_ui.1.rodr48tewsmj@worker1    | ::ffff:10.0.0.163 - - [27/Feb/2018:19:34:45 +0000] "GET /dist/web-bundle.js HTTP/1.1" 304 - "http://192.168.99.100/vault/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0"

I've even reconfigured nginx to forget the extra URL mapping and just use / on port 80 to forward requests to / on port 8000 (Vault) and that even works fine

So yeah, it's the baseURL that's the issue and it seems there's really no getting around that for the time being.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@isuftin