Nuxt•4mo ago

502 BAD GATEWAY In production - API calls

I'm getting a 502 bade gateway everytime i try to interact with the Nuxt /server/api directory and i can't even get any useful logs from aside from it being unavailable for some reason. Stack: -Nuxt -Django (some functions only but not used as the main back) -Firebase/Vuefire -Nginx -PM2 also i had to turn off the django backend since i was getting "404 not found" at first so i need to solve this problem really quick. nuxt.config:

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true,
  nitro: {
    preset: "node-server",
  },
  target: "server",
  modules: [
    "nuxt-icon",
    "@nuxt/content",
    "@pinia/nuxt",
    // "nuxt-security",
    "@nuxt/image",
    "nuxt-vuefire",
  ],
  vuefire: {
    config: {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.STORGE_BUCKET,
      messagingSenderId: process.env.SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
    },
    auth: {
      enabled: true,
      // errorMap: "debug",
      // popupRedirectResolver: false,
      // sessionCookie: false,
    },
  },
  runtimeConfig: {
    MONGODB_URI: process.env.MONGODB_URI,
    PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID,
    PAYPAL_CLIENT_SECRET: process.env.PAYPAL_CLIENT_SECRET,
    BRAND_EMAIL: process.env.BRAND_EMAIL,
    BRAND_PASS: process.env.BRAND_PASS,
  },

  buildModules: ["@nuxtjs/vuetify", "@nuxt/typescript-build"],
  vuetify: {},
  css: ["~/assets/css/main.css", "vuetify/lib/styles/main.sass"],
  build: {
    transpile: ["vuetify"],
    loaders: {
      sass: {
        implementation: require("sass"),
      },
    },
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true,
  nitro: {
    preset: "node-server",
  },
  target: "server",
  modules: [
    "nuxt-icon",
    "@nuxt/content",
    "@pinia/nuxt",
    // "nuxt-security",
    "@nuxt/image",
    "nuxt-vuefire",
  ],
  vuefire: {
    config: {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.STORGE_BUCKET,
      messagingSenderId: process.env.SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
    },
    auth: {
      enabled: true,
      // errorMap: "debug",
      // popupRedirectResolver: false,
      // sessionCookie: false,
    },
  },
  runtimeConfig: {
    MONGODB_URI: process.env.MONGODB_URI,
    PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID,
    PAYPAL_CLIENT_SECRET: process.env.PAYPAL_CLIENT_SECRET,
    BRAND_EMAIL: process.env.BRAND_EMAIL,
    BRAND_PASS: process.env.BRAND_PASS,
  },

  buildModules: ["@nuxtjs/vuetify", "@nuxt/typescript-build"],
  vuetify: {},
  css: ["~/assets/css/main.css", "vuetify/lib/styles/main.sass"],
  build: {
    transpile: ["vuetify"],
    loaders: {
      sass: {
        implementation: require("sass"),
      },
    },
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

let me know if you need any additional information.

2 Replies

Single•4mo ago

502 (Bad Gateway) means your Loadbalancer/Reverse-proxy does not reach your backend and thus can not forward your request to it. This means that it is most likely not related to your nuxt server but your setup that lives in front of nuxt.

henedy•4mo ago

So it was nginx after all! anyway what should i add here to fix that?

server {
    listen 80;
    server_name mydomain.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /django {
        proxy_pass http://127.0.0.1:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

server {
    listen 80;
    server_name mydomain.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /django {
        proxy_pass http://127.0.0.1:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Gaming

Programming

502 BAD GATEWAY In production - API calls