Deploy with Redis on another server

[Erislandys]

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

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

[valcker]

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:

• REACT_APP_DASHBOARD_URL
• REACT_APP_DASHBOARD_WS_URL

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]

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

[rmolinet]

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]

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]

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]

@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.

2. 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]

@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]

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

[valcker]

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:

• it will work without DASHBOARD_SECRET but will show a bunch of warnings. It's more secure to use it of course;
• you can omit DASHBOARD_PORT, as it's 3030 by default;
• HOST – is a hostname on which dashboard's backend will listen to the incoming connections, it can stay "localhost" if it's a docker container;
• SERVE_STATIC – set to false (value by default), as we are no longer serving via NestJS on production;
• REACT_APP_DASHBOARD_URL – this should be the public address of your container (i.e. webserver.gateway.com).

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]

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]

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