New install Docker and Nginx

[alkanlab]

Hi,

Yesterday I installed Semaphore with docker. I installed it on MySql and there was no error. I put Semaphore ui behind Nginx proxy and I am getting below error in my browser.

We're sorry but web doesn't work properly without JavaScript enabled. Please enable it to continue. 

This is my docker configuration

alk-sema:
    image: semaphoreui/semaphore:latest
    container_name: alk-sema
    hostname: alk-sema
    restart: always
    environment:
      SEMAPHORE_DB_USER: db_user
      SEMAPHORE_DB_PASS: *****
      SEMAPHORE_DB_HOST: mysql
      SEMAPHORE_DB_PORT: 3306
      SEMAPHORE_DB_DIALECT: mysql
      SEMAPHORE_DB: sema_db
      SEMAPHORE_PLAYBOOK_PATH: /tmp/semaphore/
      SEMAPHORE_ADMIN_PASSWORD: *****
      SEMAPHORE_ADMIN_NAME: *****
      SEMAPHORE_ADMIN_EMAIL: *****@*****.com
      SEMAPHORE_ADMIN: admin
      SEMAPHORE_ACCESS_KEY_ENCRYPTION: *****

Below logs from semaphore container

and this is my nginx server section

server {
  listen 443 ssl http2;
  server_name sema.*****.com;

  ssl_certificate /etc/ssl/certificate.crt;
  ssl_certificate_key /etc/ssl/certificate.rsa;
  ssl_protocols TLSv1.1 TLSv1.2;
  ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:10m;
  add_header Strict-Transport-Security "max-age=31536000" always;
  chunked_transfer_encoding on;
  client_max_body_size 0;

  location / {
    set $alk_sema alk-sema;
    proxy_pass http://$alk_sema:3000/;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_buffering off;
    proxy_request_buffering off;
  }

  location /api/ws {
    set $alk_sema alk-sema;
    proxy_pass http://$alk_sema:3000/api/ws;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Origin "";
  }
}

Below logs from the nginx

2023-07-11T12:35:03.219597593+03:00 192.168.100.100 - - [11/Jul/2023:09:35:03 +0000] "GET / HTTP/2.0" 200 974 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0"
2023-07-11T12:35:03.256740973+03:00 192.168.100.100 - - [11/Jul/2023:09:35:03 +0000] "GET /js/chunk-vendors.2e6558e8.js HTTP/2.0" 200 974 "https://sema.*****.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0"
2023-07-11T12:35:03.258099834+03:00 192.168.100.100 - - [11/Jul/2023:09:35:03 +0000] "GET /js/app.28a2860d.js HTTP/2.0" 200 974 "https://sema.*****.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0"
2023-07-11T12:35:03.270924662+03:00 192.168.100.100 - - [11/Jul/2023:09:35:03 +0000] "GET /css/chunk-vendors.e1031f37.css HTTP/2.0" 200 974 "https://sema.*****.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0"
2023-07-11T12:35:03.270995220+03:00 192.168.100.100 - - [11/Jul/2023:09:35:03 +0000] "GET /css/app.13f6f466.css HTTP/2.0" 200 974 "https://sema.*****.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0"
2023-07-11T12:35:03.287158066+03:00 192.168.100.100 - - [11/Jul/2023:09:35:03 +0000] "GET /favicon.png HTTP/2.0" 499 0 "https://sema.*****.com/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0"

Is someone else faced same issue or how can I fix that ?

Thanks.

[ansibleguy]

Greetings.

Can you please verify if the web-page does open correctly when accessing port 3000 directly? (without nginx) Just to get to know if your installation works at all.

- AnsibleGuy

[alkanlab]

Greetings.

Can you please verify if the web-page does open correctly when accessing port 3000 directly? (without nginx) Just to get to know if your installation works at all.

• AnsibleGuy

Hi @ansibleguy ,

Web page is working correctly with direct access. There is no issue with that.

• alkanlab

[fiftin]

@alkanlab it is nginx configuration issue. Please google "mime type nginx".

[ansibleguy]

@alkanlab I've tested the same config you provided and had no such issues. (using nginx version 1.18.0-6ubuntu14.4) Make sure your nginx has the line include /etc/nginx/mime.types; in its config (mine has it in /etc/nginx/nginx.conf)

[alkanlab]

Hi @ansibleguy,

Thanks for testing and back to me. I forgot to tell you my Nginx is working on docker with version nginx version: nginx/1.25.1 and include /etc/nginx/mime.types; is already added but I am getting still same error.

I have also another Nginx host which is directly running on Ubuntu 22.04 not docker. And if I put my Nginx config on it and change my dns to point to this Nginx it is working correctly. I think Nginx on docker has need additional configuration for semaphore.

It's really strange because I have lot of docker container working behind same docker Nginx and only semaphore is not.

I need to investigate deeply again on Nginx on docker. I hope I will find a solution.

Thanks for helping.

[Destrocamil]

Also facing the exact same issue. Any updates?

[Destrocamil]

Alright, I managed it by adding SEMAPHORE_WEB_ROOT=/semaphore to the docker-compose file and in the nginx config like this

    location /semaphore {
        proxy_pass http://ansible-semaphore:3000;
        #rewrite ^(.*)$ $1? break;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        add_header 'Access-Control-Allow-Origin' 'http://10.66.1.110' always;

        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_buffering off;
        proxy_request_buffering off;
    }

  location /semaphore/api/ws {
    proxy_pass http://ansible-semaphore:3000/api/ws;
    proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;    
    proxy_set_header Connection "upgrade";
    proxy_set_header Origin "";
  }