I have a next js application that I want to host on azure app service. I've setup a dockerfile for running the application, which looks the following:
# Install dependencies only when needed
FROM node:14.15.5-alpine 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
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build:testing
# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app
ENV NODE_ENV production
# You only need to copy next.config.js if you are NOT using the default configuration
COPY --from=builder /app/next.config.js ./next.config.js
COPY --from=builder /app/next-i18next.config.js ./next-i18next.config.js
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN chown -R nextjs:nodejs /app/.next
USER nextjs
EXPOSE 3000
# 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.
# RUN npx next telemetry disable
CMD ["yarn", "start:testing"]
The docker image is build and push to azure from bitbucket pipeline. The image is working fine and the push goes well. I am pushing using Microsofts own supplied code https://bitbucket.org/microsoft/azure-web-apps-containers-deploy/src/master/.
My issue lies in the appsettings set in the app service is not available in the application hosted on azure. I am trying to access the variables as environment variables as described in https://learn.microsoft.com/en-us/azure/app-service/configure-language-nodejs?pivots=platform-linux but with no luck. The variable is just undefined. I've tried accessing both from client and serverside in next js (should only be available server side as far as I understand).
I have a staging and production deployment slot, which needs to change which backend to use, and I want to switch between them by swapping staging into production. One of the things that change when swapping is appsettings as far as I can see. I've checked that the variable I am trying to access is set in kudu.
To repeat the question: How do I access the appsettings variables in my next js applicaton?
Best Drachon
PS. I made an error, and error with the deployment flow of docker. Now I can fetch the appsettings from the serverside of nextjs
