Next.js Discord

Discord Forum

Nextjs -> github actions -> docker container

Unanswered
Harlequin posted this in #help-forum
Open in Discord
HarlequinOP
Hi, i try to build my docker container in github actions..
This is my main page where i try to fetch using a variable from my .env.local

export default async function Page() { const data: Data[] = await getData(); return ( <div className='flex flex-col min-h-screen bg-white'> <main> <TT data={data}></TT> </main> <Footer></Footer> </div> ) } async function getData(): Promise<Data[]>{ const res = await fetch(process.env.NEXT_PUBLIC_API_URL + "/Data") const resp: Data[] = await res.json(); return resp; }

my pipeline:

name: CI/CD on: push env: ContainerName: dada jobs: build-container: runs-on: ubuntu-latest steps: - name: Checkout Code uses: actions/checkout@v3 - name: Login to Docker Hub uses: docker/login-action@v2 with: username: ${{ secrets.DOCKERHUB_USERNAME }} password: ${{ secrets.DOCKERHUB_TOKEN }} - name: Build Container uses: docker/build-push-action@v4 with: context: ./client/ push: true tags: name/dat:latest-pip env: NEXT_PUBLIC_API_URL: ${{ secrets.API_URL }}

i inserted this in my last try but i still get the error "ERR_INVALID_URL 'undefined/Data'"
env:
NEXT_PUBLIC_API_URL: ${{ secrets.API_URL }}`

some1 have an idea?
thanks for ur help

91 Replies

Cuz it says undefined/Data
@Dunker process.env.public_url as string
HarlequinOP
u mean in my env section in the pipeline? process.env.NEXT_PUBLIC_API_URL: ${{ secrets.API_URL }}
@Harlequin didnt work
Dunker
no at here await fetch(process.env.NEXT_PUBLIC_API_URL + "/Data")
const url = process.env.next_public_url as string
fetch(`${url}/Data`)
@Dunker no at here `await fetch(process.env.NEXT_PUBLIC_API_URL + "/Data")`
HarlequinOP
i can build it at my local maschine
just not possible in github actions
Dunker
yea cuz your env values are in .env.local
HarlequinOP
i also created a env in github secrets
with the same name
@Harlequin with the same name
Dunker
and
HarlequinOP
still get the error
Dunker
what is the error at actions @Harlequin
// .env
NEXT_PUBLIC_URL="localhost:3000"

 secrets:
   NEXT_PUBLIC_URL : ${{ secrets.API_URL }}
HarlequinOP
wait, maybe i fcked up something
Dunker
my concern is why public url is a secret
HarlequinOP
in github i need to use settings > secrets and variables > Actions > and import a repo secret?
Dunker
yep
but first make sure you have a .env, not .local
HarlequinOP
so i create a .env and push it?
Dunker
dont push it, add it to ignore
HarlequinOP
but why i need a .env then?
Dunker
to use values from it
like process.env.X
HarlequinOP
but it works with the local?
env.local
Dunker
yep
first add your variable from that link
then run again
HarlequinOP
ok
Generating static pages (5/7)
#16 43.64 TypeError: Failed to parse URL from undefined/Data
#16 43.64 at new _Request (node:internal/deps/undici/undici:5057:19)
#16 43.64 at s (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:125:275)
#16 43.64 ... 2 lines matching cause stack trace ...
#16 43.64 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
#16 43.64 [cause]: TypeError: Invalid URL
#16 43.64 at new URL (node:internal/url:775:36)
#16 43.64 at new _Request (node:internal/deps/undici/undici:5055:25)
#16 43.64 at s (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:125:275)
#16 43.64 at A (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:66269)
#16 43.64 at /app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:68383
#16 43.64 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
#16 43.64 code: 'ERR_INVALID_URL',
#16 43.64 input: 'undefined/Data'
#16 43.64 }
#16 43.64 }
Dunker
as i said, problem is your URL, not action
its reading process.env as undef
HarlequinOP
i changed the things u said at top
Dunker
can you try it with hardcoded url like localhost:3000/Data
HarlequinOP
y i try
y this works
but why is he trying to get the data from api in the build? 😄
ok so he cant get my env
Dunker
yep, can i see your fetch
HarlequinOP
export default async function Page() {
const data: Data[] = await getData();
return (
<div className='flex flex-col min-h-screen bg-white'>
<main>
<Quiz data={data}></Quiz>
</main>
<Footer></Footer>
</div>
)
}

async function getData(): Promise<Data[]>{
const url = process.env.NEXT_PUBLIC_API_URL as string;
const res = await fetch(${url}/Data)
const resp: Data[] = await res.json();
return resp;
}
in my pipeline i need to use env?
- name: Build Container
uses: docker/build-push-action@v4
with:
context: ./client/
push: true
tags: dd/fdd:latest-pip
env:
NEXT_PUBLIC_API_URL : ${{ vars.NEXT_PUBLIC_API_URL }}
HarlequinOP
name: CI/CD

on:
push

env:
ContainerName: dd

jobs:
build-container:
runs-on: ubuntu-latest
steps:
- name: Checkout Code
uses: actions/checkout@v3

- name: Login to Docker Hub
uses: docker/login-action@v2
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}


- name: Build Container
uses: docker/build-push-action@v4
with:
context: ./client/
push: true
tags: dd/fdd:latest-pip
env:
NEXT_PUBLIC_API_URL : ${{ vars.NEXT_PUBLIC_API_URL }}
this is my pipeline right now
Dunker
is this working
HarlequinOP
no not atm
still undefined url
Dunker
weird one is your URL is not related with your action steps
can we say your actions failing at build step
HarlequinOP
y
build-args didnt work too
- name: show everything
run: echo "urll is ${{ vars.NEXT_PUBLIC_API_URL }}"
give me the right url in the action
Dunker
is your docker running okay locally
HarlequinOP
yes
if i build local i can start it
its just fail in my pipeline
Dunker
are your variables in .local or .env
HarlequinOP
in the build container step
.env.local, but I don't understand why I would need an .env if I never push it to github.
Dunker
docker will read values from that .env
can i see your docker compose
and docker file
basically you are deploying your docker to a cloud env (action runner) and it cant access local values
HarlequinOP
docker compose

version: '3.4'

services:
dd:
image: dd/dd:latest
build:
context: .
dockerfile: Dockerfile
ports:
- "8888:80"
FROM node:20-alpine AS base # Install dependencies only when needed FROM base AS deps # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. RUN apk add --no-cache libc6-compat WORKDIR /app # Install dependencies based on the preferred package manager COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ RUN \ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ elif [ -f package-lock.json ]; then npm ci; \ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \ else echo "Lockfile not found." && exit 1; \ fi # Rebuild the source code only when needed FROM node:20-alpine AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY --from=deps /app/package.json ./ COPY . . # Next.js collects completely anonymous telemetry data about general usage. # Learn more here: https://nextjs.org/telemetry # Uncomment the following line in case you want to disable telemetry during the build. ENV NEXT_TELEMETRY_DISABLED 1 # If using npm comment out above and use below instead RUN npm run build # Production image, copy all the files and run next FROM node:20-alpine AS runner WORKDIR /app ENV NODE_ENV production # Uncomment the following line in case you want to disable telemetry during runtime. ENV NEXT_TELEMETRY_DISABLED 1 RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./public # Automatically leverage output traces to reduce image size # https://nextjs.org/docs/advanced-features/output-file-tracing COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static USER nextjs EXPOSE 80 ENV PORT 80 CMD ["node", "server.js"]

And thats the basic nextjs dockerfile
Dunker
ENV NODE_ENV production
so its reading values from .prod or .env
Dunker
put your env values in .env file and run same workflow again
HarlequinOP
i can do it but idk why it should work in github actions 😄 Cause github dont know anything about this .env file?
Dunker
yep, it cant see your .env variables cuz you are not pushing those
your .env in .gitignore
thats why there is secrets at repos
actually i think you dont even need a .env file to store public keys
Dunker
you know what, your config and actions are not correct actually
basically you dont need docker or actions
what are you trying to do
HarlequinOP
😄
crying i think
Dunker
😂
HarlequinOP
i dont know, how to get the env into my build process
thats the point i thinl
Dunker
what about looking live via live share
HarlequinOP
Y maybe u have some time later? I need todo some otherthings First
Dunker
yea, but before i want one thing from you
can you remove this thread and open a new one with different title
[next accessing env variables at prod in gh actions via docker]
and sharing a repo link may helps