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.