I can’t see the docker environment vars in the next js app

romelgomezHOBBY

9 months ago

I need some guidance on checking what is missing, I have this docker, and also set the variables in the services, but when running the web app I see undefined values when I console log the env vars.  

```docker

FROM node:20-alpine AS base

ARG TAG_ID

RUN echo $TAG_ID

ARG CLERK_SECRET_KEY

ARG CLOUDINARY_API_KEY

ARG CLOUDINARY_SECRET

ARG WEBHOOK_SECRET

ARG NEXT_PUBLIC_GRAPHQL

ARG NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME

ARG NEXT_PUBLIC_UPLOAD_PRESET

ARG NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

ENV CLERK_SECRET_KEY=$CLERK_SECRET_KEY

ENV CLOUDINARY_API_KEY=$CLOUDINARY_API_KEY

ENV CLOUDINARY_SECRET=$CLOUDINARY_SECRET

ENV WEBHOOK_SECRET=$WEBHOOK_SECRET

ENV NEXT_PUBLIC_GRAPHQL=$NEXT_PUBLIC_GRAPHQL

ENV NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=$NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME

ENV NEXT_PUBLIC_UPLOAD_PRESET=$NEXT_PUBLIC_UPLOAD_PRESET

ENV NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=$NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

ENV TAG_ID=$TAG_ID

WORKDIR /app

COPY package*.json ./

RUN npm i

COPY apps/web .

EXPOSE 3000

ENV PORT 3000

ENV NEXT_TELEMETRY_DISABLED=1

CMD ["npx", "next", "start"]

```

log: 

 console.log({

   tag: 'apollo',

   endpoint: process.env.NEXT_PUBLIC_GRAPHQL,

   tag_id: process.env.TAG_ID

 });

result: 

{

   tag: 'apollo', endpoint: undefined, tag_id: undefined

}

Awaiting User Response

6 Replies

9 months ago

Hello Romel,

Your maryline-web service deploys from GHCR, so are you sure you have set the needed environmental variables when building the image on GitHub?


Status changed to Awaiting User Response railway[bot] 9 months ago


romelgomezHOBBY

9 months ago

Thanks for your quick reply, I'll give it a try and let you know how it goes, I think that's what's missing too.


Status changed to Awaiting Railway Response railway[bot] 9 months ago


romelgomezHOBBY

9 months ago

These are my findings (I will continue checking on this later). For the current Docker setup that I have, if I start the Next.js project with CMD ["npx", "next", "start"], the environment variables defined in Railway will not be picked up and will be undefined. If I start the app with CMD ["npx", "next", "dev"], the variables defined in Railway will be picked up and will be usable by the app.

Maybe there is a better way to do this. If you know of one, please let me know so I can check it.

https://github.com/romelgomez/docker-monster/blob/main/01-nextjs-app/Dockerfile

FROM node:20-alpine AS base

WORKDIR /app

COPY package*.json ./

RUN npm i

COPY . .

EXPOSE 3000

ENV PORT 3000

ENV NEXT_TELEMETRY_DISABLED=1

# Note:

# Start the application with ["npx", "next", "start"].

# results in that the environment variables defined in the Railway app service

# are not visible/undefined in the application. This needs to be reversed (To-Do).

# CMD ["npx", "next", "start"]

CMD ["npx", "next", "dev"]


Status changed to Awaiting Railway Response railway[bot] 9 months ago


9 months ago

You never want to start next in dev mode anywhere other than when developing locally.

Are you trying to access the variables server or client side?


Status changed to Awaiting User Response railway[bot] 9 months ago


romelgomezHOBBY

9 months ago

Hi brody,

I'm trying to learn how this works with the docker stuff. These days to get a job the recruiters ask us to be experts on this too. 

I will just copy the repo and then later define the environment in the server, as the old ways. 

I create other project, more basic 

https://github.com/romelgomez/docker-env-secrets-example

A node project where I define two environment vars and two secrets. I can see the environment's vars, but the secrets folders are not existing there and then trigger an error. I was expecting that the github workflows take care of creating these folders, so what is the point of having these interfaces there where I define the environment and secrets.

I think if someone gets the docker image I can in theory see the secrets, will no longer be secrets. 

So maybe it's better that I just forgot to define these secrets in docker, and set it as env arg, that I will later define in railway. Will that be the right, secure  way to do it?

Do you have any docs that help me to figure this out?

I wanna learn how to do this: 

github project that get build/deploy as a docker 

that docker will live/save on ghcr

and then that docker will be pick up and deploy by the railway 

How is this done? How are secrets handled securely?


Status changed to Awaiting Railway Response railway[bot] 9 months ago


9 months ago

Hi,

That is a lot to learn. Have you considered starting with our NextJS template:

https://railway.app/template/PeD_Zh


Status changed to Awaiting User Response railway[bot] 9 months ago


I can’t see the docker environment vars in the next js app - Railway Help Station