Resolve name Env docker
Unanswered
American Chinchilla posted this in #help-forum
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:
Do I need to do anything special?
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 :
frontend/next.config.js :
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 :
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"]