This lesson uses some advanced concepts and some bash scripting to build a better Dockerfile. By using the concepts showed here, you will be able to build more future-proof and production-ready containers. If you prefer to focus on the content about containers, feel free to ignore this lesson and come back to it later on if needed.

Currently, we use sed to overwrite the hard-coded path to the API. This works well when there is a single value to replace. Now if one of your team members replaced the value of localhost:3000, your build will break.

We'll use jq to fix this issue. Jq is a command-line tool that makes it easy to change values in a JSON file. The base image that we used for building the application does not contain this tool, but that is not an issue. To install jq, you will need to download the binary, we'll need that to execute jq commands in our Dockerfile. This will allow us to update specific properties i

 

Let's say the config.json file contains the endpoint frontend needs, and we change it to:

{
  "BASE_URL": "$BASE_URL"
}

 

Dockerfile:

FROM node:14 AS builder
COPY . /app
WORKDIR /app
## add jq
ENV JQ_VERSION=1.5
RUN wget --no-check-certificate https://github.com/stedolan/jq/releases/download/jq-${JQ_VERSION}/jq-linux64 -O /tmp/jq-linux64
RUN cp /tmp/jq-linux64 /usr/bin/jq
RUN chmod +x /usr/bin/jq
RUN contents="$(jq '.BASE_URL = "$BASE_URL"' config.json)" && echo ${contents} > config.json
RUN npm install
RUN npm run build

FROM nginx:1.17
WORKDIR /usr/share/nginx/html
## Copy the file from first step into current working dir
COPY --from=builder /app/dist .

 

Run:

docker run -d --rm --name front -p 8888:80 -e BASE_URL=http://localhost:3000 k8scourse-front