NuxtN
Nuxt•17mo ago
HardWare

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,
    },
  },
},

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')

Thank you for every tip ✌️
image.png
YouTubeAlexander Lichter
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...
The BEST way to proxy your API in Nuxt
Was this page helpful?