search

GraphQL-Portal / graphql-portal-dashboard

Dashboard to manage GraphQL API Gateway
https://www.graphql-portal.com/
MIT License
32 stars 4 forks source link

Deploy with Redis on another server #360

Open Erislandys opened 3 years ago

Erislandys commented 3 years ago

When I deploy the dashboard passing in an environment variable the remote address of Redis, it lifts the authentication, but then it continues making calls to a local Redis

image graphportal-dasboard-dev.azurewebsites.net-1615668376001.log

valcker commented 3 years ago

Hi @Erislandys ,

I don't think it is related to Redis actually. This error is due to the front-end trying to connect to the backend. By default, front-end will try to connect to the backend on "localhost:3030". This can be changed by setting two environment variables:

For example, REACT_APP_DASHBOARD_URL="http://localhost:8080" yarn frontend.

Could you tell more about how exactly do you launch backend and frontend? I'll be able to give a more precise advise depending on that.

Erislandys commented 3 years ago

Thanks @valcker I am trying to deploy to Azure with Docker, the backend in theory works fine, the frontend loads until login

Compose: version: '3.7'

services: graphql-dashboard: image: gateway_dashboard container_name: graphql_gateway_dashboard build: context: . restart: always ports:

networks: gateway_network: name: gateway_network

rmolinet commented 3 years ago

Hi @valcker, I' m trying to deploy locally using docker image, and frontend is making a request to http://localhost:3030/graphql and of course fail, 'cause this react app run in browser and the backend app is not running in the host machine, even when I passing the two two environment variables (REACT_APP_DASHBOARD_URL, REACT_APP_DASHBOARD_WS_URL).

valcker commented 3 years ago

Thanks @valcker I am trying to deploy to Azure with Docker, the backend in theory works fine, the frontend loads until login

Hey @Erislandys. That's the issue with this version of the Docker Compose. We are serving the front-end via our backend. It works locally for testing purposes, but we normally deploy the frontend separately when deploying to the cloud.

I will create another Docker Compose file that will serve the frontend via Nginx. How urgent is that for you?

valcker commented 3 years ago

Hi @valcker, I' m trying to deploy locally using docker image, and frontend is making a request to http://localhost:3030/graphql and of course fail, 'cause this react app run in browser and the backend app is not running in the host machine, even when I passing the two two environment variables (REACT_APP_DASHBOARD_URL, REACT_APP_DASHBOARD_WS_URL).

Hi @rmolinet. Are you trying to deploy using the Dockerfile shipped with the dashboard, or you are trying to launch a docker compose file?

valcker commented 3 years ago

@rmolinet in case if you are using a Dockerfile and not docker compose, there is an issue with it and I just pushed a fix here #373 . Once merged, it will build and upload the latest docker image to docker hub.

We are behind the schedule with documentation, so I'll just write the launch instructions here (and I hope I'll be able to update the docs this week!).

  1. Dockerfile is launched with NODE_ENV=production and we now require quite a lot of config options. The easiest would be to create a .env file with the following contents: 
    NODE_ENV=production
DASHBOARD_SECRET=
HOST=localhost
PUBLIC_HOST=https://localhost:3030
DASHBOARD_PORT=3030
GRAPHQL_PLAYGROUND=true
SERVE_STATIC=true
JWT_SECRET=secret
DEFAULT_ADMIN_EMAIL=admin@example.com
DEFAULT_ADMIN_PASSWORD=Secret123!
REDIS_CONNECTION_STRING=redis://docker-redis:6379
MONGODB_CONNECTION_STRING=mongodb://docker-mongo:27017/graphql-portal-dashboard

You'll have to modify REDIS_CONNECTION_STRING and MONGODB_CONNECTION_STRING depending on your local conditions.

  1. Pull the latest image (or build one from Dockerfile) and launch the dashboard with this command: 
    docker run --name graphql-dashboard --env-file={path to env file} --link docker-redis:redis --link docker-mongo:mongo -p 3030:3030 gqlportal/dashboard:latest

    Don't forget to replace {path to env file}, docker-redis:redis and docker-mongo:mongo with the values relevant to your environment.

And ping me here if you'll still have any issues!

Erislandys commented 3 years ago

@valcker thank you very much for your response, I'll be attentive to your response with docker-compose. I'm very interested in running this gateway

rmolinet commented 3 years ago

Hi there @valcker thanks for responding, maybe I was not more explicit, I'm trying to deploy the dashboard using the latest docker image in docker hub, for this I'm using compose, but everythings seems work fine except when I try to login the react frontend app do not make the request to the right location of nestjs backend application, running both in the container, here is my environment config in compose file: environment:

valcker commented 3 years ago

Hi there @valcker thanks for responding, maybe I was not more explicit, I'm trying to deploy the dashboard using the latest docker image in docker hub; for this I'm using compose, but everythings seems work fine except when I try to login the react frontend app do not make the request to the right location of nestjs backend application, running both in the container, here is my environment config in compose file: environment:

  • REDIS_CONNECTION_STRING=redis://external-redis-host:6379
  • MONGODB_CONNECTION_STRING=mongodb://mongoadmin:admin123@database.host.com:27017/gateway_dashboard?authSource=admin
  • DASHBOARD_SECRET=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.f32qZjvPATeT35ZxXbJYkN6jDL81qVilx69-GvI10
  • DASHBOARD_PORT=3030
  • PUBLIC_HOST=http://webserver.gateway.com:3030
  • HOST=webserver.gateway.com
  • SERVE_STATIC=true
  • NODE_ENV=production
  • DEFAULT_ADMIN_EMAIL=admin@example.com
  • DEFAULT_ADMIN_PASSWORD=AdminPassword

Hi @rmolinet . I recently updated the Dockerfile of a Dashboard, it should become easier to launch it now. It now exposes port 3030 for backend and port 8080 for front-end, which run separately.

Your launch configuration should be the following:

REDIS_CONNECTION_STRING=redis://external-redis-host:6379
MONGODB_CONNECTION_STRING=mongodb://mongoadmin:admin123@database.host.com:27017/gateway_dashboard?authSource=admin

PUBLIC_HOST=http://webserver.gateway.com:8080
HOST=webserver.gateway.com
DASHBOARD_PORT=3030
SERVE_STATIC=false
NODE_ENV=production
DEFAULT_ADMIN_EMAIL=admin@example.com
DEFAULT_ADMIN_PASSWORD=AdminPassword
REACT_APP_DASHBOARD_URL=http://webserver.gateway.com:3030

Few changes:

You should also set servername option in the gateway config to your public DNS of the gateway itself (for example, to "gw.gateway.com:8080"). It will enable the playground in the dashboard.

It should do the job.

P.S: By writing this I understand that we need to simplify the launch process :) Any advice on this are welcome.

valcker commented 3 years ago

Thanks @valcker I am trying to deploy to Azure with Docker, the backend in theory works fine, the frontend loads until login

Compose: version: '3.7'

services: graphql-dashboard: image: gateway_dashboard container_name: graphql_gateway_dashboard build: context: . restart: always ports:

  • "3030:3030"

    volumes:

    - .\conf\basic.gateway.yaml:/opt/graphql-portal/config/gateway.yaml

    environment:

  • REDIS_CONNECTION_STRING=redis://localhost:6379
  • MONGODB_CONNECTION_STRING=mongodb://mongoadmin:admin123@172.20.0.1:27017/
  • DASHBOARD_SECRET=secret
  • DASHBOARD_PORT=3030
  • NODE_ENV=production
  • DEFAULT_ADMIN_EMAIL=admin@email.cu
  • DEFAULT_ADMIN_PASSWORD=pass networks:
  • gateway_network

networks: gateway_network: name: gateway_network

Hi @Erislandys . Please try to update your docker compose file by adding the following variables:

gql-portal-dashboard:
    image: gqlportal/dashboard
    depends_on:
      - gql-portal-redis
      - gql-portal-mongo
    ports:
      - 3030:3030
      - 8080:8080
    networks:
      - graphql-portal
    environment:
     <existing variables>
     - HOST=<if needed, the host on which dashboard will listen for connections; can stay localhost>
     - PUBLIC_HOST=<a public host of your dashboard, i.e. http://portal.example.com:8080>
     - REACT_APP_DASHBOARD_URL=<public URL of your backend, i.e. "http://portal.example.com:3030">

Dockerfile now exposes two ports: 3030 for backend and 8080 for frontend. You need to tell REACT app how to find our backend by setting REACT_APP_DASHBOARD_URL to the public URL of the backend.

Don't hesitate to ping me if you need more info, we can organize a chat if needed.

Erislandys commented 3 years ago

@valcker Thank you very much, I do the tests and comment

valker commented 3 years ago

@valker Thank you very much, I do the tests and comment

please, don't mention me. your collaborator is @valcker

rmolinet commented 3 years ago

Hi @valcker, sorry for the inconvenience, but I still have the same issue, probably due to ignorance, here is my last environment configuration in compose, I download the latest dashboard docker image, and still the front make the login request to localhost:3030, if you prefer I can upload an screenshot. ports:

valcker commented 3 years ago

@rmolinet please don't be sorry, we are here to help! Would you be able to join me in slack, or discord, or telegram (or any other messenger for that matter) so that we could debug it quickly together? Which chat do you prefer more?

rmolinet commented 3 years ago

Hi @valcker I prefer Discord, rrmolinet#7486 is my username. Regards

valcker commented 3 years ago

Hi @valcker I prefer Discord, rrmolinet#7486 is my username. Regards

Perfect. Sent you a request there. My username is valcker#4507

dipakparmar commented 3 years ago

@valcker I'm having a similar issue, Dashboard is using localhost even passing REACT_APP_DASHBOARD_URL

I think 🤔 dockerfile is overriding the ENV

image

But I get the right env when I do echo so that's not the case. Not sure 🤷🏻‍♂️

valcker commented 3 years ago

Hey @dipakparmar ,

Sorry for the long response on my side, was off last week. Can you help me reproduce it on my side? Could you list the steps to get the same problem?

Thanks, Arthur.