Next.js Discord

Discord Forum

CI/CD Pipeline and environment variables

Unanswered
Collared Plover posted this in #help-forum
Open in Discord
Collared PloverOP
So I'm trying to pass environment variables via my docker compose file to my Next.js app. But it is not working.

Part of my docker-compose file:
  frontend:
    image: pepijnweijers/kamur:frontend-staging
    ports:
      - "3001:3000"
    environment:
      - BACKEND_URL=${BACKEND_URL}
      - VIRTUAL_HOST=${STAGING}.${DOMAIN}
      - LETSENCRYPT_HOST=${STAGING}.${DOMAIN}
      - VIRTUAL_PORT=3000 
    networks:
      - staging
      - nginx-net
    labels:
      - com.centurylinklabs.watchtower.enable=true


I do not do anything with the envirement variable in my Dockerfile, since this is build by my runner.

This is my page.tsx:
export default function Home() {
    const backendUrl = process.env.BACKEND_URL;
    
    return (
        <div className="flex items-center justify-center h-screen flex-col gap-4">
            {backendUrl}
        </div>
    );
}

25 Replies

Original message was deleted
Collared PloverOP
Wait fr? Is that the issue 😂
So I checked, but that probably doesn't solve the issue. Maybe I haven't explained my problem good enough.

So I've setup a CI/CD pipeline which builds my Docker images on the Github Runner, and upload them to Docker Hub. I use Watchtower, which checks every so often for new images, if it finds a new image it will pull the image and restart it.

I want to inject an API endpoint into my .env just server-side (private). But it seems like it is not working since the environment variable needs to be ready during building the app.

Is there are work-around to make the BACKEND_URL work?
Dutch
yes your way was correct, i just confused it with actions syntax (yk fullstack is so hard)
@Dutch it says https://docs.docker.com/compose/how-tos/environment-variables/set-environment-variables/#use-the-env_file-attribute as first.
Collared PloverOP
Yes, but that is to pull a .env into your docker-compose IF your environment name is not .env.
But I will give it a try, I will change the back-end url manually and see what happens
Dutch
environment variable needs to be ready during building the app how
is it not ready
i mean when you put a url at your .env file and config docker-compose for that, it should read that
Collared PloverOP
Yes but that is what I'm doing
The weird part is, if I build the image locally, it is detecting the .env and it adds the back-end URL
Is this a use client component, the page.tsx?
The file you've pasted
@Anay-208 | Ping in replies Is this a use client component, the page.tsx?
Collared PloverOP
Nope, it is not a public env variable, but a private one
Dutch
you can cd into your image and check env also
Collared PloverOP
wait fr
Dutch
if its not in your published image, maybe we need to check Dockerfile
@Collared Plover The weird part is, if I build the image locally, it is detecting the `.env` and it adds the back-end URL
Anay-208 | Ping in replies
you can try to set the file name to .env.local, I'm unsure if it would work
Dutch
mine is like this
# install dependencies into temp directory
# this will cache them and speed up future builds
FROM base AS install
RUN mkdir -p /temp/dev
COPY package.json bun.lockb /temp/dev/
RUN cd /temp/dev && bun install

# install with --production (exclude devDependencies)
RUN mkdir -p /temp/prod
COPY package.json bun.lockb /temp/prod/
RUN cd /temp/prod && bun install --production

# copy node_modules from temp directory
# then copy all (non-ignored) project files into the image
FROM base AS prerelease
COPY --from=install /temp/dev/node_modules node_modules
COPY . .

ENV NODE_ENV=production
@Dutch if its not in your published image, maybe we need to check Dockerfile
Collared PloverOP
But it is def not in my image, since I build the image in my Docker runner which has not the .env

Let's put it like this, if I change a env variable when the app is build and running, does it change? Or do I need to rebuild?

If I need to rebuild, then that is the issue.
Collared PloverOP
Alright, that is the issue. Basically I "change" the .env after the build, so that's why
Dutch
yes build is reading that static values to build, any change you make after it finishes requires rebuild
CI does it basically