Rocketchat with Nginx reverse proxy

I have deployed a rocketchat setup through official docker-compose and trying to expose the rocketchat with nginx in front. With the below configuration, I am getting the rocket chat page when I access rchost:3000 but when I access rocketchat through nginx, i.e rchost:80, I am getting only a dark grey screen and no error in browser console also.

The configurations are below,

Nginx config:

# Upstreams
upstream backend {
    server localhost:3000;
}

# Redirect Options
server {
  listen 80;
#  server_name 172.16.1.22;
  server_name rc.rage;
  # enforce https
  return 301 https://$server_name$request_uri;
}

# HTTPS Server
server {
    listen 443;
    #server_name 172.16.1.22;
    server_name rc.rage;

    error_log /var/log/nginx/rocketchat.access.log;

    ssl on;
    ssl_certificate /etc/nginx/ssl/rocket-chat.crt;
    ssl_certificate_key /etc/nginx/ssl/rocket-chat.key;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # don’t use SSLv3 ref: POODLE

    location / {
        proxy_pass http://backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;
    }
}

Docker Compose:

version: '2'

services:
  rocketchat:
    image: rocketchat/rocket.chat:latest
    restart: unless-stopped
    volumes:
      - ./uploads:/app/uploads
    environment:
      - PORT=3000
      - ROOT_URL=http://localhost
      - MONGO_URL=mongodb://mongo:27017/rocketchat
      - MONGO_OPLOG_URL=mongodb://mongo:27017/local
      - MAIL_URL=smtp://smtp.email
#      - HTTP_PROXY=http://rc.rage
#      - HTTPS_PROXY=http://rc.rage
      - Accounts_UseDNSDomainCheck=flase
    depends_on:
      - mongo
    ports:
      - 3000:3000
    labels:
      - "traefik.backend:rocketchat"
      - "traefik.frontend.rule:Host: your.domain.tld"

  mongo:
    image: mongo:3.2
    restart: unless-stopped
    volumes:
     - ./data/db:/data/db
     #- ./data/dump:/dump
    command: mongod --smallfiles --oplogSize 128 --replSet rs0 --storageEngine=mmapv1
    labels:
      - "traefik.enable:false"

  # this container's job is just run the command to initialize the replica set.
  # it will run the command and remove himself (it will not stay running)
  mongo-init-replica:
    image: mongo:3.2
    command: 'mongo mongo/rocketchat --eval "rs.initiate({ _id: ''rs0'', members: [ { _id: 0, host: ''localhost:27017'' } ]})"'
    depends_on:
      - mongo

  # hubot, the popular chatbot (add the bot user first and change the password before starting this image)
  hubot:
    image: rocketchat/hubot-rocketchat:latest
    restart: unless-stopped
    environment:
      - ROCKETCHAT_URL=rocketchat:3000
      - ROCKETCHAT_ROOM=GENERAL
      - ROCKETCHAT_USER=bot
      - ROCKETCHAT_PASSWORD=botpassword
      - BOT_NAME=bot
  # you can add more scripts as you'd like here, they need to be installable by npm
      - EXTERNAL_SCRIPTS=hubot-help,hubot-seen,hubot-links,hubot-diagnostics
    depends_on:
      - rocketchat
    labels:
      - "traefik.enable:false"
    volumes:
      - ./scripts:/home/hubot/scripts
  # this is used to expose the hubot port for notifications on the host on port 3001, e.g. for hubot-jenkins-notifier
    ports:
      - 3001:8080

Make sure to update your ROOT_URL environment variable.

If you get grey screen still… open dev tools to the network tab. i’m guessing you’ll see some requests fail. See what address they are trying to call.

aaron, the ROOT_URL is defined in docker-compose.yml it is currently ROOT_URL=http://localhost

Attaching network tab screenshot, I am not seeing any request getting failed.

ROOT_URL should be the actual root url. It not being the same can cause issues.

If you load incognito window things go any differently?

Thinking local state cache also could potentially be an issue