weixin_39835991
weixin_39835991
2020-12-31 13:55

Dispatch Vue problem

Has anybody come to the part where you are testing the Dispatch UI?

I am using Dispatch from Docker after building this repo with some modifications of the env settings:


JWKS_URL="127.0.0.1"
DISPATCH_DOMAIN=""

, and with Google credentials configured.

The Chrome console outputted this, no login form on the screen:


vue-router.esm.js:2079 TypeError: Failed to construct 'URL': Invalid URL
    at e.xhr (xhr.js:74)
    at Function.t.fetchFromIssuer (authorization_service_configuration.js:53)
    at At (index.js:57)
    at index.js:98
    at p (vue-router.esm.js:2120)
    at r (vue-router.esm.js:1846)
    at Rt (vue-router.esm.js:1854)
    at e.zt.confirmTransition (vue-router.esm.js:2147)
    at e.zt.transitionTo (vue-router.esm.js:2034)
    at he.init (vue-router.esm.js:2734)
c @ vue-router.esm.js:2079
registerServiceWorker.js:8 App is being served from cache by a service worker.
For more details, visit https://goo.gl/AFskqB
registerServiceWorker.js:13 Service worker has been registered.
127.0.0.1/:1 Error while trying to use the following icon from the Manifest: http://127.0.0.1:8000/img/icons/android-chrome-192x192.png (Download error or resource isn't a valid image)
registerServiceWorker.js:19 New content is downloading.
registerServiceWorker.js:22 New content is available; please refresh.
DevTools failed to parse SourceMap: chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map

Dispatch logs from the container are the following:


INFO:     URL being requested: GET https://www.googleapis.com/discovery/v1/apis/docs/v1/rest?key=xxx
INFO:     URL being requested: GET https://www.googleapis.com/discovery/v1/apis/drive/v3/rest?key=xxx
INFO:     URL being requested: GET https://www.googleapis.com/discovery/v1/apis/drive/v3/rest?key=xxx
INFO:     URL being requested: GET https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest?key=xxx
INFO:     URL being requested: GET https://www.googleapis.com/discovery/v1/apis/admin/directory_v1/rest?key=xxx
INFO:     Started server process [1]                                              
INFO:     Waiting for application startup.                                        
INFO:     Application startup complete.                                           
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)         
INFO:     127.0.0.1:39326 - "GET /static/js/chunk-vendors.93945a9b.js.map HTTP/1.1" 200 OK 
INFO:     127.0.0.1:39328 - "GET /static/js/app.450c65f4.js.map HTTP/1.1" 200 OK 
INFO:     127.0.0.1:39832 - "GET /service-worker.js HTTP/1.1" 200 OK              
INFO:     127.0.0.1:39834 - "GET /manifest.json HTTP/1.1" 200 OK                  
INFO:     127.0.0.1:39832 - "GET /img/icons/android-chrome-192x192.png HTTP/1.1" 200 OK 
INFO:     127.0.0.1:39832 - "GET /service-worker.js HTTP/1.1" 304 Not Modified  
INFO:     127.0.0.1:39832 - "GET /precache-manifest.db85124ecb32bdaa183a4d4a3dd89a1b.js HTTP/1.1" 200 OK 
INFO:     127.0.0.1:39832 - "GET /static/js/chunk-vendors.93945a9b.js.map HTTP/1.1" 304 Not Modified
INFO:     127.0.0.1:39844 - "GET /static/js/app.450c65f4.js.map HTTP/1.1" 304 Not Modified     

Any ideas?

该提问来源于开源项目:Netflix/dispatch-docker

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

16条回答

  • weixin_39664994 weixin_39664994 4月前

    I have not gotten that far. How did you get any UI to load?

    It looks like possibly you also configured the other plugin services?

    I tried adding this to the web service:

    
    ports:
      - 8000:8000
    

    But I can't actually get the web container to serve anything to the browser yet.

    点赞 评论 复制链接分享
  • weixin_39531761 weixin_39531761 4月前

    When building the frontend we need an additional env file in so that that we can replace some values in the javascript at build time.

    In src/dispatch/static/dispatch/.env set:

    VUE_APP_DISPATCH_OPEN_ID_CONNECT_URL="" VUE_APP_DISPATCH_CLIENT_ID=""

    I'm not sure how to best set these values on docker, these should be set when the front end is built (happens when you pip install dispatch).

    I believe vue-cli will also consume these when they are set in the envvar.

    Additionally to point about general accessibility, it may also make sense to disable all authentication when running in docker? Are docker apps generally fronted another authentication proxy.

    点赞 评论 复制链接分享
  • weixin_39664994 weixin_39664994 4月前

    I run a production docker instance directly against 8080 on the host, but we also terminate SSL somewhere else first.

    You could have an edge server reverse proxying to the web container, but containers only have network visibility within the docker network. Compose automatically creates a network for that family of containers. You still have to expose a port outside that network.

    So you could have nginx on the same host forwarding traffic to the web container listening in port 3000, but you'd expose the web container to nginx like:

    
    web:
      ports:
        - 3000:8000
    
    点赞 评论 复制链接分享
  • weixin_39835991 weixin_39835991 4月前

    you get any UI to load?

    It looks like possibly you also configured the other plugin services?

    I tried adding this to the web service:

    No, not displaying anything yet :( I configured the GSuite part, it can be configured on https://console.cloud.google.com/ even for free Gmail accounts. Slack, Jira and PagerDuty config values are empty, but they do not cause any errors.

    I just build the web part (https://github.com/Netflix/dispatch) manually with your fixes. Some changes that I do, I run dispatch database init && dispatch database populate to populate the db after services are running.

    About the config part I configure the database connection:

    
    DATABASE_HOSTNAME="172.18.0.2" #docker container ip - the dispatch container is in the same docker network
    +DATABASE_CREDENTIALS="dispatch:dispatch" #username:password
    

    For Docker: I use it on my laptop, so I use the internal Docker network to access the container (e.g. docker run -d --network=host -P --name dispatch dispatch:latest).

    点赞 评论 复制链接分享
  • weixin_39835991 weixin_39835991 4月前

    I have not gotten that far. How did you get any UI to load?

    It looks like possibly you also configured the other plugin services?

    I tried adding this to the web service:

    
    ports:
      - 8000:8000
    

    But I can't actually get the web container to serve anything to the browser yet.

    Yep, I should put a ngnix reverse proxy in front of it. It would be easier. Now I am struggling with CORS after I configured Vue's auth parameters:

    
    127.0.0.1/:1 Access to fetch at 'https://accounts.google.com/o/oauth2/auth%22/.well-known/openid-configuration' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
    

    Maybe it would be also useful that documentation has a part on how to setup the dev environment and disable GSuite dependency for authentication for development purposes?

    点赞 评论 复制链接分享
  • weixin_39862847 weixin_39862847 4月前

    I added an nginx reverse proxy like so:

      web:
        <<: expose: environment: virtual_host="localhost" nginx: image: ports: volumes:></:>

    However, once opening localhost, I receive a 502 Bad Gateway. The reverse proxy answers with

    
    nginx.1    | 2020/03/04 17:34:24 [error] 106#106: *12 connect() failed (111: Connection refused) while connecting to upstream, client: 172.24.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://172.24.0.5:8000/", host: "localhost"
    
    点赞 评论 复制链接分享
  • weixin_39862847 weixin_39862847 4月前

    ok, fixed this temporarily by running on host mode as well...

    however, I'm now stuck with the following error in the dispatch frontend:

    
    TypeError: "undefined/.well-known/openid-configuration is not a valid URL."
        xhr xhr.js:74
        fetchFromIssuer authorization_service_configuration.js:53
        At index.js:57
        a18c index.js:98
        p vue-router.esm.js:2120
        r vue-router.esm.js:1846
        Rt vue-router.esm.js:1854
        confirmTransition vue-router.esm.js:2147
        transitionTo vue-router.esm.js:2034
        init vue-router.esm.js:2734
        beforeCreate vue-router.esm.js:1203
        VueJS 4
        56d7 main.js:21
        Webpack 6
    vue-router.esm.js:2079:16
        c vue-router.esm.js:2079
        p vue-router.esm.js:2143
        r vue-router.esm.js:1846
        Rt vue-router.esm.js:1854
        confirmTransition vue-router.esm.js:2147
        transitionTo vue-router.esm.js:2034
        init vue-router.esm.js:2734
        beforeCreate vue-router.esm.js:1203
        VueJS 4
        56d7 main.js:21
        Webpack 6
    Source-Map-Adresse: browser-polyfill.js.map
    
    点赞 评论 复制链接分享
  • weixin_39862847 weixin_39862847 4月前

    Well, all of this has to do with some OIDC auth, I guess... I'm gonna try this with CORS disabled, running in hostmode, with keycloak as oidc provider right now.

    点赞 评论 复制链接分享
  • weixin_39835991 weixin_39835991 4月前

    any success in bringing the vue frontend up? I am also stuck at this step, I configured the Oauth part but I am getting new CORS errors. I also tried disabling CORS with a Chrome plugin but without success.

    点赞 评论 复制链接分享
  • weixin_39862847 weixin_39862847 4月前

    yes, i'm using firefox, disabled CORS with a plugin in Firefox. Now there's a progressbar and some loading spinner... I was able to successfully authenticate against keycloak and was redirected to http://localhost:8000/incidents/report?state=1Aeori4TwU&session_state=a1a9e008-b187-4b85-ba1f-271232ba256d&code=5af59885-4e2d-49d0-b765-23f533813a61.a1a9e008-b187-4b85-ba1f-271232ba256d.304575a3-b0c9-45e7-a435-468a9b24e756

    It's still stuck somewhere though...

    I replaced nginx by traefik and it routes nicely, however I still can't get access to the container via traefik. It only works with network_mode: host on the dispatch web container for me... I always get a Bad Request, which is due to the web container refusing the connection.

    点赞 评论 复制链接分享
  • weixin_39862847 weixin_39862847 4月前

    I just opened another issue adressing the binding issues: https://github.com/Netflix/dispatch-docker/issues/19

    点赞 评论 复制链接分享
  • weixin_39835991 weixin_39835991 4月前

    Now there's a progressbar and some loading spinner... I was able to successfully authenticate against keycloak and was redirected to

    Can you share your Keycloak config? Maybe we can integrate it with Dispatch's docker-compose?

    点赞 评论 复制链接分享
  • weixin_39898380 weixin_39898380 4月前

    I am also getting the same error in frontend

    
    vue-router.esm.js:2079 TypeError: Failed to construct 'URL': Invalid URL
        at e.xhr (xhr.js:74)
        at Function.t.fetchFromIssuer (authorization_service_configuration.js:53)
        at At (index.js:57)
        at index.js:98
        at p (vue-router.esm.js:2120)
        at r (vue-router.esm.js:1846)
        at Rt (vue-router.esm.js:1854)
        at e.zt.confirmTransition (vue-router.esm.js:2147)
        at e.zt.transitionTo (vue-router.esm.js:2034)
        at he.init (vue-router.esm.js:2734)
    

    openIdConnectUrl is fetched from environment variable const openIdConnectUrl = process.env.VUE_APP_DISPATCH_OPEN_ID_CONNECT_URL I exec'ed into the web container to check env variables using printenv Both VUE_APP_DISPATCH_OPEN_ID_CONNECT_URL and VUE_APP_DISPATCH_CLIENT_ID are set.

    Has anybody found a solution for docker?

    点赞 评论 复制链接分享
  • weixin_39531761 weixin_39531761 4月前

    Do be clear those vars need to be set during the vue build time (this happens when you run pip install dispatch by default).

    I will be working on a PR this week that will effectively disable that auth mechanism for folks who don't need/want it. In that scenario it would be expected that folks bring their own auth to sit in front of the app itself.

    Not being super familiar with the docker auth approaches, I'm open to ideas on what would make the best default for folks simply trying to evaluate Dispatch.

    点赞 评论 复制链接分享
  • weixin_39862847 weixin_39862847 4月前

    Not being super familiar with the docker auth approaches, I'm open to ideas on what would make the best default for folks simply trying to evaluate Dispatch.

    I'd suggest to just make OIDC optional after all, at least for non-production environments...

    点赞 评论 复制链接分享
  • weixin_39531761 weixin_39531761 4月前

    I'd suggest to just make OIDC optional after all, at least for non-production environments...

    I've added a few config params to disable to OIDC, see:

    https://hawkins.gitbook.io/dispatch/configuration/app#dispatch_pkce_auth_enabled-default-true and https://github.com/Netflix/dispatch/pull/88

    点赞 评论 复制链接分享

相关推荐