Yooooomi / your_spotify

Self hosted Spotify tracking dashboard
GNU General Public License v3.0
2.64k stars 109 forks source link

Web application can't communicate with server - NGINX Proxy manager reverse proxy + docker #400

Open kmanwar89 opened 1 month ago

kmanwar89 commented 1 month ago

Hi,

I've gone through just about every single issue I can find trying to find a solution, and I've tried every combination I can think of, but I'm having the worst time trying to access this application through my reverse proxy (NGINX proxy manager).

I previously had it working on a much older version, but shut down my server and was away from self hosting focusing on school for several months. I'm getting back into the swing of things, and this is one of the last apps I have left to work through.

I'm receiving, much like other folks have reported, the "Web application can't communicate with server" error when trying to access at my FQDN through my reverse proxy. I have been able to successfully set it up using just localhost networking, but ultimately that isn't how my final setup is configured.

I am using a custom domain, with Cloudflare tunnels. I have two Docker networks, one between the CF tunnel and NPM, and the other between NPM and the downstream services. The flow looks something like:

Request --> cloudflare --> cf tunnel --> NPM --> downstream service <---------------------------------------------------------------------------response

Here's my compose file:

---
services:
  server:
    image: yooooomi/your_spotify_server
    restart: always
    ports:
#      - "8080:8080"
      - "8000"
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: http://music.api.**DOMAIN**.com # This MUST be included as a valid URL in the spotify dashboard (see below)
      CLIENT_ENDPOINT: http://music.**DOMAIN**.com/oauth/spotify
      SPOTIFY_PUBLIC: <VALUE>
      SPOTIFY_SECRET: <VALUE>
      CORS: i-want-a-security-vulnerability-and-want-to-allow-all-origins #Yes I know this is a bad idea - this is JUST for testing
      MONGO_ENDPOINT: mongodb://mongo:27017/your_spotify
      TIMEZONE: America/New_York
    networks:
      - npm_cf

  mongo:
    container_name: mongo
    image: mongo:6
    volumes:
      - ./your_spotify_db:/data/db
    networks:
      - npm_cf

  web:
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - "3000:3000"
#      - "3000"
    environment:
      API_ENDPOINT: http://api.music.**DOMAIN**.com
    networks:
      - npm_cf

networks:  # Docker network that only communicates between reverse proxy + cloudflare daemon
  npm_cf:
    name: npm_cf
    external: true

Here's my spotify dashboard setup (at the time of opening this issue): spotify setup

And here's all the different iterations I've tried...I can't quite seem to wrap my head around which is actually needed, or why this error is occurring:

http://music.DOMAIN.com/oauth/spotify/callback
https://music.DOMAIN.com/oauth/spotify/callback

http://api.music.DOMAIN.com/oauth/spotify/callback
https://api.music.DOMAIN.com/oauth/spotify/callback

http://music.DOMAIN.com/api/oauth/spotify/callback
https://music.DOMAIN.com/api/oauth/spotify/callback

http://api.music.DOMAIN.com/api/oauth/spotify/callback
https://api.music.DOMAIN.com/oapi/auth/spotify/callback

I've consulted the following issues to try to find a solution, but haven't come across one that works, which is why I'm opening a new issue. I appreciate any help you can provide, and thank you for creating this software!!

https://github.com/Yooooomi/your_spotify/issues/55 https://github.com/Yooooomi/your_spotify/issues/74 https://github.com/Yooooomi/your_spotify/issues/296 https://github.com/Yooooomi/your_spotify/issues/344 https://github.com/Yooooomi/your_spotify/issues/371 https://github.com/Yooooomi/your_spotify/issues/226 https://github.com/Yooooomi/your_spotify/issues/208

renolation commented 1 month ago

here is my portainer stack docker compose, hope it helps i help npm also in this server, just map port to domain like below.

version: "3"

services:
  server:
    image: yooooomi/your_spotify_server
    restart: always
    ports:
      - "8085:8080"
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: https://spotify-server.xxx.com # This MUST be included as a valid URL in the spotify dashboard
      CLIENT_ENDPOINT: https://spotify.xxx.com
      SPOTIFY_PUBLIC: xxx
      SPOTIFY_SECRET: xxx
      CORS: i-want-a-security-vulnerability-and-want-to-allow-all-origins

  mongo:
    container_name: mongo
    restart: always
    image: mongo:6
    volumes:
      - ./your_spotify_db:/data/db

  web:
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - "3005:3000"
    environment:
      API_ENDPOINT: https://spotify-server.xxx.com
kmanwar89 commented 1 month ago

here is my portainer stack docker compose, hope it helps i help npm also in this server, just map port to domain like below.

version: "3"

services:
  server:
    image: yooooomi/your_spotify_server
    restart: always
    ports:
      - "8085:8080"
    links:
      - mongo
    depends_on:
      - mongo
    environment:
      API_ENDPOINT: https://spotify-server.xxx.com # This MUST be included as a valid URL in the spotify dashboard
      CLIENT_ENDPOINT: https://spotify.xxx.com
      SPOTIFY_PUBLIC: xxx
      SPOTIFY_SECRET: xxx
      CORS: i-want-a-security-vulnerability-and-want-to-allow-all-origins

  mongo:
    container_name: mongo
    restart: always
    image: mongo:6
    volumes:
      - ./your_spotify_db:/data/db

  web:
    image: yooooomi/your_spotify_client
    restart: always
    ports:
      - "3005:3000"
    environment:
      API_ENDPOINT: https://spotify-server.xxx.com

Looks almost identical to my setup - I'm suspecting there is something at play here with NPM, as bringing up the container without NPM and just pointing to localhost works without issue.

FYI you don't need the "version" command at the top of the compose file anymore - that's been deprecated

RagingCactus commented 1 month ago

Please take a look at the following lines from your configuration:

services:
  server:
# [...]
    environment:
      API_ENDPOINT: http://music.api.**DOMAIN**.com # This MUST be included as a valid URL in the spotify dashboard (see below)
      CLIENT_ENDPOINT: http://music.**DOMAIN**.com/oauth/spotify
# [...]

  web:
# [...]
    environment:
      API_ENDPOINT: http://api.music.**DOMAIN**.com
# [...]

Your API_ENDPOINT definitions do not match. Is your posted configuration accurate to what you're using?

Also, please post any errors you can see in the browser development console, browser network tab and server log.