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.