Next.js Discord

Discord Forum

Resolve name Env docker

Unanswered
American Chinchilla posted this in #help-forum
Open in Discord
American ChinchillaOP
Hello,
I'm trying to use docker on my nextjs app to make my requests to the backend. I have a problem in the name resolution to contact the backend. My docker-compose uses app network for name resolution and I use the backend name "backend", but I have an error on the frontend:

http://backend:3333/api/login
layout-3bbe871fdca66ae3.js:1 
        
        
       POST http://backend:3333/api/login net::ERR_NAME_NOT_RESOLVED
login @ layout-3bbe871fdca66ae3.js:1
b @ page-5ced90bfa493b073.js:1
a_ @ cce61ff3-36c17531594f3247.js:1
aR @ cce61ff3-36c17531594f3247.js:1
(anonymous) @ cce61ff3-36c17531594f3247.js:1
sF @ cce61ff3-36c17531594f3247.js:1
sM @ cce61ff3-36c17531594f3247.js:1
(anonymous) @ cce61ff3-36c17531594f3247.js:1
o4 @ cce61ff3-36c17531594f3247.js:1
iV @ cce61ff3-36c17531594f3247.js:1
sU @ cce61ff3-36c17531594f3247.js:1
uR @ cce61ff3-36c17531594f3247.js:1
uM @ cce61ff3-36c17531594f3247.js:1
layout-3bbe871fdca66ae3.js:1 
        
        
       Uncaught (in promise) TypeError: Failed to fetch
    at a.login (layout-3bbe871fdca66ae3.js:1:893)
    at b (page-5ced90bfa493b073.js:1:2457)
    at Object.a_ (cce61ff3-36c17531594f3247.js:1:72144)
    at aR (cce61ff3-36c17531594f3247.js:1:72298)
    at cce61ff3-36c17531594f3247.js:1:139237
    at sF (cce61ff3-36c17531594f3247.js:1:139336)
    at sM (cce61ff3-36c17531594f3247.js:1:139750)
    at cce61ff3-36c17531594f3247.js:1:145893
    at o4 (cce61ff3-36c17531594f3247.js:1:93333)
    at iV (cce61ff3-36c17531594f3247.js:1:122698)


Do I need to do anything special?

5 Replies

American ChinchillaOP
docker-compose.yml :
version: '3.9'

services:
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      args:
        NEXT_PUBLIC_BASE_URL: http://backend:3333
        NEXT_PUBLIC_RESEND_API: APIKEY
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - NEXT_PUBLIC_BASE_URL=http://backend:3333
      - NEXT_PUBLIC_RESEND_API=APIKEY
    depends_on:
      - backend
    networks:
      - app-network

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - "3333:3333"
    environment:
      - TZ=UTC
      - PORT=3333
      - HOST=0.0.0.0
      - LOG_LEVEL=error
      - APP_KEY=APIKEY
      - NODE_ENV=production
      - DB_HOST=db
      - DB_PORT=3306
      - DB_USER=root
      - DB_PASSWORD=example
      - DB_DATABASE=oneconseils
    depends_on:
      - db
    networks:
      - app-network

  db:
    image: mysql:latest
    environment:
      MYSQL_ROOT_PASSWORD: example
      MYSQL_DATABASE: oneconseils
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - app-network

volumes:
  db_data:

networks:
  app-network:

frontend/next.config.js :
/** @type {import('next').NextConfig} */

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '3333',
      },
      {
        protocol: 'https',
        hostname: 'localhost',
        port: '3333',
      },
    ],
  },
  sassOptions: {
    includePaths: ["./styles"],
  },
  output: "standalone",
  env: {
    NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
    NEXT_PUBLIC_RESEND_API: process.env.NEXT_PUBLIC_RESEND_API,
  },
};
and use here env variable :
frontend/api/api.js :
import { useAuthStore } from "#stores/useAuthStore";

export default class Api {
    static baseUrl = process.env.NEXT_PUBLIC_BASE_URL;

    static getHeaders(options = undefined) {
        const auth = useAuthStore.getState().auth;
        let headers = {
            "Authorization": auth ? `Bearer ${auth.token.token}` : ''
        };

        if (options) {
            headers = { ...headers, ...options };
        } else {
            headers['Content-Type'] = 'application/json';
            headers['Accept'] = 'application/json';
        }

        return headers;
    }
}
Can the backend successfully resolve/connect to the database?
American ChinchillaOP
Yes my backend can connect to my database
Like an impression that it comes from the dockerfile :
# Utiliser une image de base officielle de Node.js
FROM node:18-alpine AS base

# Installer pnpm
RUN npm install -g pnpm

# Installer les dépendances seulement quand c'est nécessaire
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Copier package.json et pnpm-lock.yaml
COPY package.json pnpm-lock.yaml ./

# Installer les dépendances
RUN pnpm i --frozen-lockfile

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Copier les fichiers de polices et autres fichiers publics
COPY public /app/public

# Désactiver la télémétrie pendant la construction
ENV NEXT_TELEMETRY_DISABLED=1

# Construire l'application
ARG NEXT_PUBLIC_BASE_URL
ARG NEXT_PUBLIC_RESEND_API
ENV NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL}
ENV NEXT_PUBLIC_RESEND_API=${NEXT_PUBLIC_RESEND_API}
RUN pnpm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

# Ajouter l'utilisateur nextjs
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Copier les fichiers nécessaires depuis l'étape de construction
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

CMD ["node", "server.js"]