Authorize Spotify using React and Nginx in Docker

Problem: No container is listening on the port 8888. You can publish spotify-client:8888 directly on port 8888 (without nginx). Update docker-compose-dev.yml:

 spotify-client:
    ports:
      - 8888:8888

If you really need nginx, then you will need to play with nginx config + you need to publish nginx on the port 8888 as well. nginx/dev.conf example:


  server {
    listen 80;
    location / {
      proxy_pass        http://client:3000;
      proxy_redirect    default;
      proxy_set_header  Upgrade $http_upgrade;
      proxy_set_header  Connection "upgrade";
      proxy_set_header  Host $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-Host $server_name;
    }
    location /auth {
      proxy_pass        http://web:5000;
      proxy_redirect    default;
      proxy_set_header  Upgrade $http_upgrade;
      proxy_set_header  Connection "upgrade";
      proxy_set_header  Host $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-Host $server_name;
    }
  }

  # reverse proxy on the port 8888 for spotify-client
  server {
    listen  8888;
    location / {
      proxy_pass http://<spotify-client service/ip>:<port>/;
      proxy_redirect    default;
      proxy_set_header  Upgrade $http_upgrade;
      proxy_set_header  Connection "upgrade";
      proxy_set_header  Host $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-Host $server_name;
    }
  }

docker-compose-dev.yml and nginx published ports:

  nginx:
    ports:
      - 80:80
      - 8888:8888

Generally, you need to configure properly nginx:8888->spotify-client:port.

IMHO: you don't need spotify-client service at all. Just use implicit flow in your app to get Spotify token. It is more better choice for React/Angular (browser JS code). Keep in mind that refresh tokens doesn't exist in this flow, so you will need to implement silent refresh as well.