Runtime env vars in create-react-app based on https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/

Dockerfile

### STAGE 1: Build ###
FROM node:12.10.0-alpine as builder

WORKDIR /app

COPY package.json package-lock.json ./
COPY public/ public/
COPY src/ src/

RUN npm install
RUN npm run build

### STAGE 2: Production Environment ###
FROM nginx:1.15.2-alpine

RUN rm -rf /etc/nginx/conf.d

COPY nginx.default.conf /etc/nginx/conf.d/default.conf
COPY nginx.gzip.conf /etc/nginx/conf.d/gzip.conf

COPY --from=builder /app/build /usr/share/nginx/html

EXPOSE 80

WORKDIR /usr/share/nginx/html
COPY ./env.sh .
COPY .env .

RUN apk add --no-cache bash

RUN chmod +x env.sh

CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

env.sh

#!/bin/bash

# Recreate config file
rm -rf ./env-config.js
touch ./env-config.js

# Add assignment 
echo "window._env_ = {" >> ./env-config.js

# Read each line in .env file
# Each line represents key=value pairs
while read -r line || [[ -n "$line" ]];
do
  # skip empty lines
  echo "* Read line from .env: " $line
  if [ -z "$line" ]; then
    echo "  - Skipping, line is empty!"
    continue
  fi

  # Split env variables by character `=`
  if printf '%s\n' "$line" | grep -q -e '='; then
    varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
    varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
  fi

  echo "  - Found variable in .env: " $varname
  echo "  - Variable has value: " $varvalue

  # check if it is safe to publish var
  # it will be available ni browser
  # so only vars beginning with REACT_APP are permitted 
  if [[ $varname != "REACT_APP"* ]]; then
    echo "  - Variable name does not start from REACT_APP, skipping!"
    continue
  fi

  # Read value of current variable if exists as Environment variable
  value=$(printf '%s\n' "${!varname}")
  # Otherwise use value from .env file
  if [ -z $value ]; then
    value=${varvalue}
  else
    echo "  - Same variable was found in env vars. Using value from env vars not from .env file!"
    echo "  - Variable has value: " $value
  fi

  # Append configuration property to JS file
  echo "  - Saving to env-config.js!"

  echo "  $varname: '$value'," >> ./env-config.js
done < ./.env

echo "}" >> ./env-config.js

nginx.default.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;
    }
}

nginx.gzip.conf

gzip on;
gzip_http_version  1.0;
gzip_comp_level    5; # 1-9
gzip_min_length    256;
gzip_proxied       any;
gzip_vary          on;

# MIME-types
gzip_types
  application/atom+xml
  application/javascript
  application/json
  application/rss+xml
  application/vnd.ms-fontobject
  application/x-font-ttf
  application/x-web-app-manifest+json
  application/xhtml+xml
  application/xml
  font/opentype
  image/svg+xml
  image/x-icon
  text/css
  text/plain
  text/x-component;