Fly.io deployment - secret env variables undefined - next.js

Question

I'm pretty new to coding (started in August) and will try to provide all the necessary info needed!
I am working on a blog for a friend in Next.js that has a ghost backend for her to work in (deployment on fly.io worked perfectly fine with a ready-made docker image) and an extra frontend page. We need the latter because she wants the blog posts to appear in a specific way. So we cannot use the provided templates by ghost.
The frontend website is the one, I could not deploy yet. It fails during the build phase and shows the following error:
#10 46.29 Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
#10 46.29 TypeError: Failed to parse URL from undefined/ghost/api/v3/content/posts/?key=undefined&fields=title,slug,html&include=tags
#10 46.29 at Object.fetch (node:internal/deps/undici/undici:11118:11)
#10 46.29 at async getPosts (/app/.next/server/pages/index.js:33:17)
#10 46.29 at async getStaticProps (/app/.next/server/pages/index.js:38:19)
#10 46.29 at async renderToHTML (/app/node_modules/next/dist/server/render.js:385:20)
#10 46.29 at async /app/node_modules/next/dist/export/worker.js:277:36
#10 46.29 at async Span.traceAsyncFn (/app/node_modules/next/dist/trace/trace.js:79:20)
#10 46.29 info - Generating static pages (1/6)
#10 46.29 (node:114) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
#10 46.29 (Use `node --trace-warnings ...` to show where the warning was created)
#10 46.36 info - Generating static pages (2/6)
#10 46.38 info - Generating static pages (4/6)
#10 46.42 info - Generating static pages (6/6)
#10 46.42
#10 46.43 > Build error occurred
So, the variables somehow don’t "reach" my fetch request: undefined/ghost/api/v3/content/posts/?key=undefined&fields=title,slug,html&include=tags. The associated function looks like this:
async function getPosts() {
const res = await fetch(
`${process.env.BLOG_URL}/ghost/api/v3/content/posts/?key=${process.env.CONTENT_API_KEY}&fields=title,slug,html&include=tags`,
).then((resp) => resp.json());
const posts = res.posts;
return posts;
}
My Dockerfile looks like this:
# Initialize builder layer
FROM node:18-alpine AS builder
ENV NODE_ENV production
# Install necessary tools
RUN apk add --no-cache libc6-compat yq --repository=https://dl-cdn.alpinelinux.org/alpine/edge/community
WORKDIR /app
# Copy the content of the project to the machine
COPY . .
RUN yq --inplace --output-format=json '.dependencies = .dependencies * (.devDependencies | to_entries | map(select(.key | test("^(typescript|#types/*|#upleveled/)"))) | from_entries)' package.json
RUN --mount=type=secret,id=BLOG_URL \
BLOG_URL="$(cat /run/secrets/BLOG_URL)"
RUN --mount=type=secret,id=CONTENT_API_KEY \
CONTENT_API_KEY="$(cat /run/secrets/CONTENT_API_KEY)"
RUN yarn install --frozen-lockfile
RUN yarn build
# Initialize runner layer
FROM node:18-alpine AS runner
ENV NODE_ENV production
# Copy built app
COPY --from=builder /app/.next ./.next
# Copy only necessary files to run the app (minimize production app size, improve performance)
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./
COPY --from=builder /app/.env.production ./
CMD ["yarn", "start"]
The build problem seems to have something to do with the environment variables, which I have tried to 1) set via flyctl secrets set BLOG_URL=xyz for runtime and 2) tried to set via flyctl deploy --build-secret BLOG_URL=xyz and tell docker to use it in my Dockerfile like so (also see above):
RUN --mount=type=secret,id=BLOG_URL \
BLOG_URL="$(cat /run/secrets/BLOG_URL)"
RUN --mount=type=secret,id=CONTENT_API_KEY \
CONTENT_API_KEY="$(cat /run/secrets/CONTENT_API_KEY)"
The (runtime) secrets exist when I run flyctl secrets list.
I don’t know what is going on and why neither the build secrets nor the runtime secrets change anything about my ‘undefined’ URL.
I appreciate any hints and help!

Answer 1

I could find a solution/a workaround with the help of a friend. The issue could be solved in a part of the code, that I did not post yet:
export const getServerSideProps = async () => {
const posts = await getPosts();
if (typeof posts === 'undefined') {
return {
props: {
error: 'Nothing to see here',
},
};
}
return {
props: { posts },
};
};
In this piece of code, I had used getStaticProps which needs the variables during build. By using getServerSideProps, the runtime env variables are enough.
So, now I do not use any docker secrets, neither during deployment nor in my Dockerfile, only runtime fly secrets.
🆒