Microservices Træfik proxy docker gateway : home page white page issue

ndywicki commented 7 years ago

Overview of the issue

Microservice application with Traefik support not serve the web resources (bundle.js) under '/mygateway' but at the root '/' and all running under docker Issue : http://localhost/gateway give an white page with error to get (.bundle.js) yo-rc.zip

Motivation for or Use Case

Use mircroservice with Traefik proxy (http://www.jhipster.tech/traefik/)

Relative path in the gateway index.html is relative path './' So if the proxy expose http://localhost/gateway it should be work like running the gateway as standalone)

Reproduce the error

1) generate a gateway mkdir gateway && cd gateway && jhipster (choose microservice and gateway) 2) generate an application mkdir app1 && cd app1 && jhispter (choose microservice and application) 3) Generate docker-compose files with sub-generator docker-compose mkdir docker-compose && jhispter docker-compose

4) Build docker images of the gateway and app1: gradlew bootRepackage -Pprod buildDocker

Suggest a Fix

No idea

JHipster Version(s)

v4.9.0

JHipster configuration

Gateway:
Using JHipster version installed locally in current project's node_modules
Executing jhipster:info ##### Browsers and Operating System Options:
Welcome to the JHipster Information Sub-Generator Windows 10

JHipster Version(s)

gateway@0.0.0 C:\workspace\jhipster\microservices\gateway                                                              
+-- generator-jhipster@4.9.0                                                                                           
`-- UNMET PEER DEPENDENCY popper.js@^1.11.0

JHipster configuration, a `.yo-rc.json` file generated in the root folder

.yo-rc.json file

                                                                                                                  
{                                                                                                                      
  "generator-jhipster": {                                                                                              
    "promptValues": {                                                                                                  
      "packageName": "com.mycompagny.myapp"                                                                            
    },                                                                                                                 
    "jhipsterVersion": "4.9.0",                                                                                        
    "baseName": "gateway",                                                                                             
    "packageName": "com.mycompagny.myapp",                                                                             
    "packageFolder": "com/mycompagny/myapp",                                                                           
    "serverPort": "8080",                                                                                              
    "authenticationType": "jwt",                                                                                       
    "hibernateCache": "hazelcast",                                                                                     
    "clusteredHttpSession": false,                                                                                     
    "websocket": false,                                                                                                
    "databaseType": "mongodb",                                                                                         
    "devDatabaseType": "mongodb",                                                                                      
    "prodDatabaseType": "mongodb",                                                                                     
    "searchEngine": false,                                                                                             
    "messageBroker": false,                                                                                            
    "serviceDiscoveryType": "consul",                                                                                  
    "buildTool": "gradle",                                                                                             
    "enableSocialSignIn": false,                                                                                       
    "enableSwaggerCodegen": false,                                                                                     
    "jwtSecretKey": "replaced-by-jhipster-info",                                                                       
    "clientFramework": "angularX",                                                                                     
    "useSass": false,                                                                                                  
    "clientPackageManager": "yarn",                                                                                    
    "applicationType": "gateway",                                                                                      
    "testFrameworks": [],                                                                                              
    "jhiPrefix": "jhi",                                                                                                
    "enableTranslation": false                                                                                         
  }                                                                                                                    
}

JDL for the Entity configuration(s) `entityName.json` files generated in the `.jhipster` directory

JDL entity definitions

Environment and Tools

java version "1.8.0_144"
Java(TM) SE Runtime Environment (build 1.8.0_144-b01)
Java HotSpot(TM) 64-Bit Server VM (build 25.144-b01, mixed mode)

git version 2.9.3.windows.1

node: v6.10.2

npm: 3.10.10

gulp:
[18:09:44] CLI version 3.9.1

yeoman: 1.8.5

yarn: 0.24.4

Docker version 17.09.0-ce, build afdb6d4

docker-compose version 1.16.1, build 6d1ac219

Execution complete

Docker-compose: Using JHipster version installed globally Executing jhipster:info Options: Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

C:\workspace\jhipster\microservices\docker-compose
`-- (empty)

JHipster configuration, a `.yo-rc.json` file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "appsFolders": [
      "app1",
      "gateway"
    ],
    "directoryPath": "../",
    "gatewayType": "traefik",
    "clusteredDbApps": [],
    "monitoring": "no",
    "serviceDiscoveryType": "consul",
    "jwtSecretKey": "replaced-by-jhipster-info"
  }
}

JDL for the Entity configuration(s) `entityName.json` files generated in the `.jhipster` directory

JDL entity definitions

Environment and Tools

java version "1.8.0_144" Java(TM) SE Runtime Environment (build 1.8.0_144-b01) Java HotSpot(TM) 64-Bit Server VM (build 25.144-b01, mixed mode)

git version 2.9.3.windows.1

node: v6.10.2

npm: 3.10.10

gulp: [18:11:11] CLI version 3.9.1

yeoman: 1.8.5

yarn: 0.24.4

Docker version 17.09.0-ce, build afdb6d4

docker-compose version 1.16.1, build 6d1ac219

Execution complete

jdubois commented 7 years ago

Depends on what you want to do - did you see this can be configured in your app.constants.ts ?

ndywicki commented 7 years ago

Hi Julien,

Yes I know the SERVER_API_URL param (with the setup in webpack.common.js) and it's to adapt the frontend services call to the right backend contextPath.

My concern is the web ressources are not available when Traefik is "auto configured" with Consul. The case is to generate the microservice architecture option with Traefik + Consul "as it is".

Exemple: The gateway is setup at http://localhost/gateway by Traefik but index.html load the bundles in http://**localhost/***.bundle.js instead of http://**localhost/gateway/***.bundle.js

I'll try to play with the configuration of the "base href" in index.html and override the default traefik.toml

Thanks

jdubois commented 7 years ago

I need to test with your configuration @ndywicki - indeed the idea is that it works "out of the box", so you shouldn't have this issue.

ndywicki commented 7 years ago

It works with the following changes:

Configure Webpack public path "/gateway" in webpack.prod.js output: { path: utils.root('build/www'), filename: 'app/[name].[hash].bundle.js', chunkFilename: 'app/[id].[hash].chunk.js', publicPath: "/gateway" },
Set SERVER_API_URL to "gateway/" in webpack.common.js
Set base href="/gateway" in index.html

ndywicki commented 7 years ago

For Swagger UI I've also add the gateway path under docs.component.html: <iframe src="gateway/swagger-ui/index.html"

ndywicki commented 7 years ago

Hi Team,

I've retry with the last JHipster version v4.10.0. I see that the UI gateway working when I use the Angular hashbang (http://localhost/gateway/#) . Without modifications required (auth, Rest API, etc)

But I've found another issue with Swagger UI and microservices docs. The resources URL location are concated with the relative path "/gateway" (ex. /gateway/app1/v2/api-docs instead of /app1/v2/api-docs) I will open new issue for this and maybe a possible fix.

This ticket can be closed

jhipster / generator-jhipster