Search code examples
herokujhipsterauth0

Does JHipster 7.9.3 Application that uses Micro-frontends Deployed to Heroku, work?

Am getting the below message after deploying a JHipster 7.9.3-generated microservices application on Heroku. My application has 2 microservices (tajvoteservice and siennaservice) and both microservices us microfrontends. When I deploy my application locally on my laptop, it works fine; however, on Heroku, I get the following error messages on the gateway:

2023-03-25T16:35:53.163730+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/services/siennaservice/remoteEntry.js" host=www.saathratri.com request_id=7e56ca8a-620e-45b9-bb9d-a2241aa2143c fwd="50.172.26.133" dyno=web.1 connect=0ms service=30000ms status=503 bytes=0 protocol=https
2023-03-25T16:35:53.095621+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/services/tajvoteservice/remoteEntry.js" host=www.saathratri.com request_id=d4f9e086-fe6e-465a-9855-7bb8f9c78d2d fwd="50.172.26.133" dyno=web.1 connect=0ms service=30000ms status=503 bytes=0 protocol=https
2023-03-25T16:36:23.127957+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/services/tajvoteservice/remoteEntry.js" host=www.saathratri.com request_id=0d5053bf-4cf9-412b-b59b-e67ff17e3bf5 fwd="50.172.26.133" dyno=web.1 connect=0ms service=30001ms status=503 bytes=0 protocol=https

I tried checking the remotes parameter in webpack.microfrontend.js of the gateway:

...
module.exports = (config, options, targetOptions) => {
  return {
    plugins: [
      new ModuleFederationPlugin({
        remotes: {
          tajvoteservice: 'tajvoteservice@/services/tajvoteservice/remoteEntry.js',
          siennaservice: 'siennaservice@/services/siennaservice/remoteEntry.js',
        },
...

I changed as follows:

...
module.exports = (config, options, targetOptions) => {
  return {
    plugins: [
      new ModuleFederationPlugin({
        remotes: {
          tajvoteservice: 'tajvoteservice@https://www.saathratri.com/services/tajvoteservice/remoteEntry.js',
          siennaservice: 'siennaservice@https://www.saathratri.com/services/siennaservice/remoteEntry.js',
        },
...

But same error occurs.

I am getting the following error in the browser console:

main.1cba1d1f42986c71.js:1 Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.
(error: https://www.saathratri.com/services/siennaservice/remoteEntry.js)

I think this has nothing to do with Webpack and Module Federation (nor micro-frontends). I have changed the deployment (in the JDL) to regular microservices and still get the 503 (Service Unavailable) error. It has to do with Auth0, in my opinion. But not sure what is going wrong. I followed the instructions in https://www.jhipster.tech/security/#oauth2 for Auth0, but no luck.

Solution

  • The problem was my Eureka service configuration in my microservice (the gateway was fine). I had to have the following in my application-prod.yml for Eureka in my microservice:

    ...
eureka:
  instance:
    hostname: tajvote-service.herokuapp.com
    non-secure-port: 80
    prefer-ip-address: false
  client:
    service-url:
      defaultZone: ${JHIPSTER_REGISTRY_URL}/eureka/
...

    The hostname entry is significant.

    The microservice was not being invoked and the gateway kept returning Service Unavailable (503), because Eureka was misconfigured; the sienna-service and tajvote-service microservices were not properly registering themselves with the service discovery Eureka and so Eureka did not know how to forward the request onto the respective microservices. Once the hostname entry in the Eureka configuration was added, things started working and the 503 Service Unavailable error disappeared.

    In the end, this problem was not related to Auth0 nor Micro-frontend. Furthermore, yes, a JHipster 7.9.3 Application that used Micro-frontends deployed on Heroku does work (so long as you get the service discovery piece of the puzzle sorted)!