Nuxt•22h ago

Docker, Traefik, Nuxt, Laravel

hello there! I have a pretty complex docker compose file. I use Traefik as reverse proxy, Nuxt app for frontend, Laravel+Filamentphp for backend and laravel provides API endpoints. I use the Nuxt app in SSR mode. I set up some api in server folder to fetch the data from backend's api. On local machine it works fine, but on my VPS i get 502 error. I don't know how. i had to set a proxy routeRule for Nitro because the url paramteres didn't work before. If I set the localhost or the actual domain it's working on my local machine, but not on the server. it's wierd, i'm stuck, AI can't help. If you reach out, I would be very glad. Thanks!

5 Replies

kapa.ai•22h ago

Hi @Sulyci. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like your setup (Docker + Traefik + Nuxt SSR + Laravel API) works locally but fails with a 502 error on your VPS. Based on the knowledge sources, here are some key points and troubleshooting steps that may help: 1. Network Accessibility in Docker A common issue is that Nuxt (or Nginx/Traefik) inside a Docker container cannot reach the backend service using localhost or 127.0.0.1. In Docker, localhost refers to the container itself, not the host or other containers. You need to use the Docker service name as the hostname, and ensure all containers are on the same Docker network. For example, if your Laravel service is called backend, your Nuxt app should fetch from <http://backend:8000> (or whatever port Laravel exposes) instead of localhost or the public domain. This is a frequent cause of 502 errors in Dockerized environments, as seen in similar issues with Nginx and Nuxt/Laravel setups Dockerized nginx and vue+nuxt cannot connect to frontend server 111: Connection refused. 2. Nuxt Host Configuration Nuxt must be configured to listen on all interfaces (0.0.0.0), not just localhost, so that it can accept connections from outside the container (e.g., from Traefik or Nginx). You can set this in your nuxt.config:

export default defineNuxtConfig({
  server: {
    port: 3000,
    host: '0.0.0.0'
  }
})

export default defineNuxtConfig({
  server: {
    port: 3000,
    host: '0.0.0.0'
  }
})

Or via Docker environment variables:

environment:
  HOST: 0.0.0.0
  PORT: 3000

environment:
  HOST: 0.0.0.0
  PORT: 3000

This is necessary for Dockerized deployments Dockerized nginx and vue+nuxt cannot connect to frontend server 111: Connection refused. 3. Traefik Configuration Ensure your Traefik rules are correctly routing to the Nuxt and Laravel containers using their Docker service names and correct ports. If Traefik is routing to localhost:3000 or localhost:8000, it will not work unless Traefik is running in the same container as those services (which is not typical). 4. Nitro Proxy and routeRules If you are using Nitro's routeRules to proxy API requests, make sure the target URL is reachable from within the Nuxt container. Again, use the Docker service name, not localhost or the public domain, for internal requests. 5. Debugging Steps - Check container logs for both Nuxt and Laravel for errors. - From inside the Nuxt container, try to curl the backend API using the service name and port. - Double-check your Docker network configuration; all relevant containers must be on the same network. 6. Example: Custom Fetch Function If you need to dynamically choose the backend URL based on environment (local vs. server), you can use a pattern like:

export async function fetchBackendUrl(url) {
  const runtimeConfig = useRuntimeConfig()
  const backendBaseUri = process.server
    ? "<http://backend:8000/api"> // Docker service name
    : runtimeConfig.public.backendBaseUri + '/api'
  const res = await fetch(backendBaseUri + url)
  return await res.json()
}

export async function fetchBackendUrl(url) {
  const runtimeConfig = useRuntimeConfig()
  const backendBaseUri = process.server
    ? "<http://backend:8000/api"> // Docker service name
    : runtimeConfig.public.backendBaseUri + '/api'
  const res = await fetch(backendBaseUri + url)
  return await res.json()
}

This approach is used to resolve similar issues with Strapi and Nuxt in Docker Unable to correctly retrieve API objects Part 1. --- If you follow these steps and ensure all internal service URLs use Docker service names, your 502 errors should be resolved. If you still have issues, please provide your relevant Docker Compose and Traefik configuration for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•22h ago

<@334615049907994646> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

leamsigc•20h ago

Question do you start the container by it self on the VPS ? or do you have all of the service in a single docker-compose file ? If you have it in a single docker-compose file and the nuxt service is stoped or start using docker and not docker-compose the Traefik service don't notice the service or the mapping of the labels. Example I have a service heatmap-contaniner in the same docker-compose file where I have the Traefik and did docker restart heatmap-container Traefik couldn't map the label for the container for some reason. Got same error as well 502

SulyciOP•20h ago

i have one compose file and an ovverride for secrets and volumes. let me show you my docker-compose.yml. i masked some data

message.txt

SulyciOP•18h ago

it's resolved

nitro: {
    routeRules: {
      "/api/**": {
        proxy: process.env.NUXT_PROXY_TARGET || "http://localhost:8000/api/**",
      },
    },
  },

nitro: {
    routeRules: {
      "/api/**": {
        proxy: process.env.NUXT_PROXY_TARGET || "http://localhost:8000/api/**",
      },
    },
  },

this caused my problem. i removed it and the communication works now

Gaming

Programming

Docker, Traefik, Nuxt, Laravel

Did you find this page helpful?