nextjs+Dockerfile: env variables pass to nextjs.config.js

Question

I have a next.config.js

module.exports = {
  .........
  env: {
    BASE_URL: 'http://xx.xx.xx.xx:8000',
  },
  ............
};

Now I want to change the BASE_URL while building docker image

my Dockerfile file

FROM node:16-alpine3.14

WORKDIR /usr/app

COPY ./package.json ./

RUN yarn install

ENV BASE_URL=http://yy.yyy.yy.yy:80

# Copy all files
COPY ./ ./

RUN yarn build

So passing ENV BASE_URL=http://yy.yyy.yy.yy:80 in Dockerfile will it help to change the BASE_URL: 'http://xx.xx.xx.xx:8000' in the next.config.js

Or what the way i can change the BASE_URL

I'd recommend you use a .env file to setup your environment variables instead. See Next.js Environment Variables. — juliomalves
– juliomalves, Commented Nov 14, 2021 at 16:12

felixmosh · Accepted Answer · 2021-11-14 14:02:53Z

2

ENV BASE_URL=http://yy.yyy.yy.yy:80 in your docker file will set an environment variable BASE_URL to it's value, you need to read it for that variable.

//next.config.js
module.exports = {
  .........
  env: {
    BASE_URL: process.env.BASE_URL || 'http://xx.xx.xx.xx:8000', //read the value from env id empty use default value.
  },
  ............
};

answered Nov 14, 2021 at 14:02

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kwex · Accepted Answer · 2023-06-02 23:26:50Z

Created an entrypoint.sh file and put the below script in it:

#!/bin/bash
# no verbose

set +x
# config
envFilename='.env'

nextFolder='./.next/'
function apply_path {
  # read all config file  
  while read line; do
    # no comment or not empty
    if [ "${line:0:1}" == "#" ] || [ "${line}" == "" ]; then
      continue
    fi

echo "***** line ******"
echo $line

# split
configName="$(cut -d'=' -f1 <<<"$line")"
configValue="$(cut -d'=' -f2 <<<"$line")"

echo "**** configName ****"
echo $configName

echo "**** configValue ****"
echo $configValue

# get system env
envValue=$(env | grep "^$configName=" | grep -oe '[^=]*$');

echo "**** envValue ****"
echo $envValue


# if config found
    if [ -n "$configValue" ] && [ -n "$envValue" ]; then
      # replace all
      echo "Replace: ${configValue} with: ${envValue}"
      find $nextFolder \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#$configValue#$envValue#g"
    fi
    done < $envFilename
}
apply_path
echo "Starting Nextjs *** "
echo $API_URL
exec "$@"

Below is my Dockerfile referencing the entrypoint.sh file

# Dockerfile

# base image
FROM node:alpine

# create & set working directory
RUN mkdir -p /usr/src
WORKDIR /usr/src

# install dependencies
COPY package*.json /usr/src/
RUN npm install

# copy source files
COPY . /usr/src

# start app
RUN npm run build

# Make it executable
RUN apk add --no-cache --upgrade bash
RUN ["chmod", "+x", "/usr/src/entrypoint.sh"]

EXPOSE 3000

# Execute script
ENTRYPOINT ["/usr/src/entrypoint.sh"]

CMD npm run start

Modified by next.config.js to define an environment variable as per the below:

  publicRuntimeConfig: {
      // Will be available on both server and client
      API_URL: process.env.API_URL,
  },

And run docker image with other environment for example in file '.env.stagging' like: docker run --env-file .env.stagging -p 3000:3000 [image]:[tag]

Collectives™ on Stack Overflow

nextjs+Dockerfile: env variables pass to nextjs.config.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related