'How to supply an external config file to NextJS running within a docker container

I've been trying to get this to work but I can't seem to figure it out.

I wrote a little Dashboard-App using NextJS for my company. The Dashboard displays a variety of pre-defined links employees need for their daily work. Users log into the Dashboard with their AD-Accounts.

Up until now I've been saving my config variables in my .env files and in a myconfig.json file.

the .env file contains LDAP URI, DN, and the Password, while the myconfig.json file contains the list of the links which are displayed in the dashboard.

Example:

"CustomLinks": [
  {
    "title": "Google",
    "url": "https://www.google.at",
    "image": "https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"
  },
  {
    "title": "Facebook",
    "url": "https://www.facebook.com",
    "image": "https://cdn-icons-png.flaticon.com/512/124/124010.png"
  },
  {
    "title": "Yahoo",
    "url": "https://www.yahoo.com",
    "image": "https://cdn-icons-png.flaticon.com/512/124/124010.png"
  },

My issue with this is, that I, or anybody else, can't edit the links or add anything to that array on the fly.

It's working while developing because of the Hot-Reload of NextJS but as soon as I deploy the app it stops working.

The idea is to run this app in a docker container which mounts a directory of the linux host it's running on.

My Dockerfile looks as follows:


FROM node:16-alpine as dependencies
WORKDIR /dashboard
COPY package.json package-lock.json ./
RUN npm install --frozen-lockfile

FROM node:16-alpine as builder
WORKDIR /dashboard
COPY . .
COPY --from=dependencies /dashboard/node_modules ./node_modules
RUN npm run build

FROM node:16-alpine as runner
WORKDIR /dashboard
ENV NODE_ENV production
# If you are using a custom next.config.js file, uncomment this line.
COPY --from=builder /dashboard/next.config.js ./
COPY --from=builder /dashboard/.env.production ./
COPY --from=builder /dashboard/public ./public
COPY --from=builder /dashboard/.next ./.next
COPY --from=builder /dashboard/node_modules ./node_modules
COPY --from=builder /dashboard/package.json ./package.json

# 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

EXPOSE 3000
CMD ["npm", "start"]
docker run -p 80:3000 --mount type=bind,source=/home/dashboard/config,target=/dashboard/config -itd --name dashboard dashboard

This part seems to be working as intended. The files on the linux host are the same as the files within the docker container. Changes to either of those respectively affect their counterpart. So I'm assuming I'm fine on that end.

I think my issues lies within NextJS bundling the /config/myconfig.json in the build process and thus ignoring any changes to /config/myconfig.json during runtime.

Sadly I can't figure out a way to "outsource" the myconfig.json file or make NextJS apply those changes.

It's working perfectly fine if I was to re-run the build and start process but that's not really what we want.

Things I've already tried:

  • import myconfig from "/config/myconfig.json"
  • loading myconfig.json via getStaticProps and getServerSideProps
  • fetching myconfig.json clientSide

Is there any way to accomplish this goal?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source