T
TanStack•4mo ago
rare-sapphire

How to add reverse proxy for production?

I'm currently using Tanstack start with tanstack query to fetch data from external api using axios.get("/api/images") which is running on localhost:9999. Now in app.config.ts there is only option for devProxy /api -> localhost:9999 which is working fine in devlopment. When i switch production build and run that the proxy doen't seems to be working even if i set the reverse proxy in caddy.
Throw an error: ERR_INVALID_URL 
services:
  web:
    container_name: frontend_app
    build:
      context: .
      target: production
      dockerfile: Dockerfile
      args:
          - WEB_PORT=${WEB_PORT}
    volumes:
      - ./public:/app/public
      - /app/node_modules
    environment:
      - WATCHPACK_POLLING=true
    healthcheck:
      test:
        ["CMD-SHELL", "curl -f http://localhost:${WEB_PORT:-3000}/ || exit 1"]
      interval: 5s
      timeout: 5s
      retries: 5
    networks:
      - app_network
  
  caddy:
    image: caddy:2.10.0-alpine
    volumes:
      - ./caddy/Caddyfile:/etc/caddy/Caddyfile   
    ports:
      - "8080:80"
    depends_on:
      - web
    networks:
      - app_network

networks:
  app_network:
    external: true
services:
  web:
    container_name: frontend_app
    build:
      context: .
      target: production
      dockerfile: Dockerfile
      args:
          - WEB_PORT=${WEB_PORT}
    volumes:
      - ./public:/app/public
      - /app/node_modules
    environment:
      - WATCHPACK_POLLING=true
    healthcheck:
      test:
        ["CMD-SHELL", "curl -f http://localhost:${WEB_PORT:-3000}/ || exit 1"]
      interval: 5s
      timeout: 5s
      retries: 5
    networks:
      - app_network
  
  caddy:
    image: caddy:2.10.0-alpine
    volumes:
      - ./caddy/Caddyfile:/etc/caddy/Caddyfile   
    ports:
      - "8080:80"
    depends_on:
      - web
    networks:
      - app_network

networks:
  app_network:
    external: true
:80 {
    file_server
    encode gzip zstd
    reverse_proxy web:3000

    handle /api* {
        uri strip_prefix /api
        reverse_proxy localhost:9999
    }

    header {
        Strict-Transport-Security "max-age=31536000; includeSubDomains"
        Permissions-Policy "interest-cohort=()"
        X-Content-Type-Options "nosniff"
        X-Frame-Options "DENY"
        Referrer-Policy "no-referrer-when-downgrade"
    }

    handle_errors {
        respond "{err.status_code} {err.status_text}"
    }
}
:80 {
    file_server
    encode gzip zstd
    reverse_proxy web:3000

    handle /api* {
        uri strip_prefix /api
        reverse_proxy localhost:9999
    }

    header {
        Strict-Transport-Security "max-age=31536000; includeSubDomains"
        Permissions-Policy "interest-cohort=()"
        X-Content-Type-Options "nosniff"
        X-Frame-Options "DENY"
        Referrer-Policy "no-referrer-when-downgrade"
    }

    handle_errors {
        respond "{err.status_code} {err.status_text}"
    }
}
2 Replies
extended-salmon
extended-salmon•4mo ago
isnt this being caused by the container not being able to access the sv with localhost ip? can you make a curl to the server in that ip from inside docker? i use nginx for the same and its working as expected, but im not running it in docker so im not sure if thats the problem
rare-sapphire
rare-sapphireOP•4mo ago
can you share the nginx config for that? I'm running it through same network which i created externally and using the same external network for the service

Did you find this page helpful?