Authorize Spotify using React and Nginx in Docker Authorize Spotify using React and Nginx in Docker nginx nginx

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.


When you decided to use nginx you need to edit config and publish nginx on port 8888.