Nuxt•4mo ago

Proxy api request in docker

So basicly, I try to make caddy reverse proxy in docker with api platform template and nuxt on client site. And every fetch i make is as localhost instead revered to api.localhost. I've tried thus video, didn't help: https://www.youtube.com/watch?v=J4E5uYz5AY8. Now I dont know if thats nuxt issue or bad caddy settings. Also I've notice that hmr is not working correctly if default on docker. Had to specify same default websocket ports to enable it, the same as open ports in docker for vite, also enable usePooling.

nuxt.config
ssr: true,
routeRules: {
  '/api/**': { proxy: 'https://api.localhost' },
},
runtimeConfig: {
  public: {
    apiUrl: 'https://api.localhost',
  }
},
vite: {
  server: {
    strictPort: true,
    hmr: {
      protocol: 'ws',
      clientPort: 3001,
      port: 3001,
    },
    watch: {
      usePolling: true,
    },
  },
},

nuxt.config
ssr: true,
routeRules: {
  '/api/**': { proxy: 'https://api.localhost' },
},
runtimeConfig: {
  public: {
    apiUrl: 'https://api.localhost',
  }
},
vite: {
  server: {
    strictPort: true,
    hmr: {
      protocol: 'ws',
      clientPort: 3001,
      port: 3001,
    },
    watch: {
      usePolling: true,
    },
  },
},

Caddyfile
{$SERVER_NAME:localhost} {
    log
    root * /app/public
    encode zstd br gzip
    @api {
        path /api/*
    }
    reverse_proxy @api https://api.localhost {
        header Host {host}
        header X-Forwarded-For {remote}
        header X-Forwarded-Port {server_port}
    }
    reverse_proxy http://{$WEBPAGE_UPSTREAM}

Caddyfile
{$SERVER_NAME:localhost} {
    log
    root * /app/public
    encode zstd br gzip
    @api {
        path /api/*
    }
    reverse_proxy @api https://api.localhost {
        header Host {host}
        header X-Forwarded-For {remote}
        header X-Forwarded-Port {server_port}
    }
    reverse_proxy http://{$WEBPAGE_UPSTREAM}

//basic request
req = await $fetch('/api/categories')

//basic request
req = await $fetch('/api/categories')

Thank you for every tip ✌️

Alexander Lichter

YouTube

The BEST way to proxy your API in Nuxt

➡️ Proxying routes to your back-end or third party APIs is a common practice! Over the last two years, various strategies came up in Nuxt. But not all of them work equally will. To figure out which two strategies are the recommended ones, we have a look at the four most common strategies, their shortcomings and which ones I would recommend to us...

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Proxy api request in docker