Nuxt•2y ago

Nuxt 3 + Docker + Nginx = 502 bad gateway

I'm trying to run a production version of Nuxt 3 with SSR on my server. My yml config:

version: '3.7'

volumes:
  production_mongodb_data:

services:
  nginx_container:
    container_name: app_production_nginx
    image: app_production_nginx:latest
    restart: unless-stopped
    build:
      context: ./production/nginx
    links:
      - backend_container
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ../frontend/:/usr/share/nginx/html/mysite.com/frontend
  frontend_container:
    container_name: app_production_frontend
    image: app_production_frontend:latest
    build:
      context: ./production/frontend
    volumes:
      - ../frontend:/app/frontend
    ports:
      - "3050:3050"
    restart: always
    command: "npm run preview"

version: '3.7'

volumes:
  production_mongodb_data:

services:
  nginx_container:
    container_name: app_production_nginx
    image: app_production_nginx:latest
    restart: unless-stopped
    build:
      context: ./production/nginx
    links:
      - backend_container
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ../frontend/:/usr/share/nginx/html/mysite.com/frontend
  frontend_container:
    container_name: app_production_frontend
    image: app_production_frontend:latest
    build:
      context: ./production/frontend
    volumes:
      - ../frontend:/app/frontend
    ports:
      - "3050:3050"
    restart: always
    command: "npm run preview"

Part of nginx config:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2 ipv6only=on;
    server_name mysite.com;

    # Here SSL certs

   location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:3050/;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2 ipv6only=on;
    server_name mysite.com;

    # Here SSL certs

   location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://localhost:3050/;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

My Dockerfile:

FROM node:18-alpine

WORKDIR /app/frontend

EXPOSE 3050

FROM node:18-alpine

WORKDIR /app/frontend

EXPOSE 3050

My Docker container with frontend run app with this command:

NUXT_APP_MODE=production NUXT_PUBLIC_BASE_API_BROWSER_URL=http://localhost:3001/api/ PORT=3050 node .output/server/index.mjs

NUXT_APP_MODE=production NUXT_PUBLIC_BASE_API_BROWSER_URL=http://localhost:3001/api/ PORT=3050 node .output/server/index.mjs

But mysite.com show me 502 bad gateway error. Any ideas why it is happening?

2 Replies

Unknown User•2y ago

Message Not Public

SkipOP•2y ago

Well, i figured it out and finally get my frontend on production. But now, i cant fetch data on server-side, always get fetch failed (). I can fetch data only on client-side...

Gaming

Programming

Nuxt 3 + Docker + Nginx = 502 bad gateway