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

@Dwarf Hotot 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
Dwarf Hotot
What is your docker compose file
@Holland Lop https://github.com/skellgreco/cially/blob/main/docker-compose.yaml
Dwarf Hotot
${} is not valid in yaml, it should be {{ }}
@Dwarf Hotot ${} 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
@Dwarf Hotot 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
Dwarf Hotot
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?
Dwarf Hotot
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
Dwarf Hotot
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
Dwarf Hotot
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?
Dwarf Hotot
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
Dwarf Hotot
Just add as string at the end
@Dwarf Hotot 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?
Dwarf Hotot
No, 
fetch(`${process.env.NEXT_PUBLIC_BOT_API_URL as string}/fetchGuilds`)
Holland LopOP
alright let me try that
@Dwarf Hotot 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`
Dwarf Hotot
Is that error in local dev server or in docker
@Dwarf Hotot Is that error in local dev server or in docker
Holland LopOP
docker
@Holland Lop docker
Dwarf Hotot
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?
@Dwarf Hotot 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
@Dwarf Hotot 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
Dwarf Hotot
no i need to edit it live to see result