Next.js Discord

Discord Forum

Docker & NextJS environmental variables issue

Unanswered
Holland Lop posted this in #help-forum
Open in Discord
Holland LopOP
Hello there. I have a nextjs application with built it docker image. However, when trying to host, the nextjs application does not read the variables on docker compose file, causing all of them returning (undefined)

Here I have the related GitHub issue. Any help would be appreciated
https://github.com/skellgreco/cially/issues/25

69 Replies

@Dutch Is that starting with NEXT_PUBLIC
Holland LopOP
Yeah. I've tried both NEXT_PUBLIC and not, and neither work
@Holland Lop Yeah. I've tried both NEXT_PUBLIC and not, and neither work
Dutch
What is your docker compose file
@Holland Lop https://github.com/skellgreco/cially/blob/main/docker-compose.yaml
Dutch
${} is not valid in yaml, it should be {{ }}
@Dutch ${} is not valid in yaml, it should be {{ }}
Holland LopOP
Not really an issue. These lines are the issue
cially-web:
    image: ghcr.io/skellgreco/cially-web:latest
    container_name: cially-web
    restart: unless-stopped
    environment:
      - NEXT_PUBLIC_WEBSITE_URL=http://localhost:3000
      - POCKETBASE_URL=http://pocketbase:8090
      - MESSAGE_COLLECTION=messages
      - INVITE_COLLECTION=invites
      - MEMBER_LEAVES_COLLECTION=member_leaves
      - MEMBER_JOINS_COLLECTION=member_joins
      - GUILDS_COLLECTION=guilds
      - NEXT_PUBLIC_BOT_API_URL=http://cially-bot:3001
    ports:
      - "3000:3000"
    depends_on:
      - pocketbase
    networks:
      - cially-network

Where 
process.env.NEXT_PUBLIC_BOT_API_URL

Returns 
Undefined
@Dutch Where are you writing that process.env
Holland LopOP
Check pages.tsx on Cially-web/app directory
@Holland Lop Check pages.tsx on Cially-web/app directory
Dutch
let BOT_API_URL = process.env.NEXT_PUBLIC_BOT_API_URL right ?
are you sure that you have that variable in .env file
but like
when building with docker
I dont need to
the variabled are on docker_compose
right?
Dutch
You need it in dockerfile @Holland Lop
Holland LopOP
wait
# ---- cially-web image ----
FROM base AS cially-web
WORKDIR /app
RUN addgroup --system cially && adduser --system --ingroup cially cially
COPY --from=build-web --chown=cially:cially /app/cially-web/public ./cially-web/public
COPY --from=build-web --chown=cially:cially /app/cially-web/.next/standalone ./
COPY --from=build-web --chown=cially:cially /app/cially-web/.next/static ./cially-web/.next/static
USER cially
EXPOSE 3000
ENV NODE_PATH=/app/node_modules
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
ENV PORT=3000
ENV HOSTNAME="0.0.0.0"
CMD ["node", "cially-web/server.js"]

dockerfile

cially-web:
    image: ghcr.io/skellgreco/cially-web:latest
    container_name: cially-web
    restart: unless-stopped
    environment:
      - NEXT_PUBLIC_WEBSITE_URL=http://localhost:3000
      - POCKETBASE_URL=http://pocketbase:8090
      - MESSAGE_COLLECTION=messages
      - INVITE_COLLECTION=invites
      - MEMBER_LEAVES_COLLECTION=member_leaves
      - MEMBER_JOINS_COLLECTION=member_joins
      - GUILDS_COLLECTION=guilds
      - NEXT_PUBLIC_BOT_API_URL=http://cially-bot:3001
    ports:
      - "3000:3000"
    depends_on:
      - pocketbase
    networks:
      - cially-network

docker compose
all of my variables are on docker compose file
Dutch
Is it working at dev server
Holland LopOP
yeah, but I am not using docker while developing. I just have .env and run at development mode the nextjs application
Dutch
Actually you need to change that lines like
process.env.NEXT_PUBLIC_SOMEVAR as string cuz reading env file is async process and need to check its existence. Change all lines like that
Holland LopOP
so how am I supposed to import them to client files where async is not allowed?
Dutch
Just use that syntax i gave you above it will fix everything
We'll check the docker part, if this doesn't solve issues
Holland LopOP
const data = await fetch(`${process.env.NEXT_PUBLIC_BOT_API_URL}/fetchGuilds`);


so how do I replace this
the variables dont show up on printenv neither
Dutch
Just add as string at the end
@Dutch Just add `as string` at the end
Holland LopOP
so
const data = await fetch(`${process.env.NEXT_PUBLIC_BOT_API_URL}/fetchGuilds`) as string
this way?
Dutch
No, 
fetch(`${process.env.NEXT_PUBLIC_BOT_API_URL as string}/fetchGuilds`)
Holland LopOP
alright let me try that
@Dutch No, ts fetch(`${process.env.NEXT_PUBLIC_BOT_API_URL as string}/fetchGuilds`)
Holland LopOP
again, Error TypeError TypeError: Failed to parse URL from undefined/fetchGuilds
Champagne D’Argent
@Holland Lop
@Champagne D’Argent <@1095304752495083521>
Holland LopOP
yes?
Champagne D’Argent
are u fullstack dev?
@Champagne D’Argent are u fullstack dev?
Holland LopOP
thats right
struggling with docker obv xD
Champagne D’Argent
okay
cool
me too
full stack dev
but I don't have job
now I am freelancer
Holland LopOP
thats nice
Champagne D’Argent
cool
do u need my help?
Holland LopOP
I mean if you want to contribute, it's open source you can give it a go
Champagne D’Argent
Ah , I see
give me open source..
:pikachu_shocked:
Holland LopOP
you want the link or?
Champagne D’Argent
nono
give me project
i good at React , wordpress
this skill isn't common, is it?
Holland LopOP
Sorry mate I don't get what you trynna say
@Holland Lop again, `Error TypeError TypeError: Failed to parse URL from undefined/fetchGuilds`
Dutch
Is that error in local dev server or in docker
@Dutch Is that error in local dev server or in docker
Holland LopOP
docker
@Holland Lop docker
Dutch
Try it in local dev first
Holland LopOP
yeah works nicely on development
wait I changed some startup commands, let me retry
@Holland Lop wait I changed some startup commands, let me retry
Champagne D’Argent
do u work in upwork?
@Dutch Try it in local dev first
Holland LopOP
const data = await fetch(`${process.env.NEXT_PUBLIC_BOT_API_URL as string}/fetchGuilds`);


same error again
when doing docker exec (container) printenv everything shows up correctly
@Dutch then send me a vscode live share link
Holland LopOP
the whole code is on github, just clone that
@Holland Lop the whole code is on github, just clone that
Dutch
no i need to edit it live to see result