djenriquez / vault-ui

Vault-UI — A beautiful UI to manage your Vault, written in React
Other
1.31k stars 149 forks source link

VaultUI Blank Screen - Docker Swarm behind NGINX proxy #243

Open isuftin opened 6 years ago

isuftin commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

image

isuftin commented 6 years ago

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.