I'm trying to build my React / NodeJS project using Docker and Gitlab CI.

When I build manually my images, I use .env file containing env vars, and everything is fine.

docker build --no-cache -f client/docker/local/Dockerfile . -t espace_client_client:local
docker build --no-cache -f server/docker/local/Dockerfile . -t espace_client_api:local

But when deploying with Gitlab, I can build successfully the image, but when I run it, env vars are empty in the client.

Here is my gitlab CI:

image: node:10.15
variables:
  REGISTRY_PACKAGE_CLIENT_NAME: registry.gitlab.com/company/espace_client/client
  REGISTRY_PACKAGE_API_NAME: registry.gitlab.com/company/espace_client/api
  REGISTRY_URL: https://registry.gitlab.com
  DOCKER_DRIVER: overlay
  # Client Side
  REACT_APP_API_URL: https://api.espace-client.company.fr
  REACT_APP_DB_NAME: company
  REACT_APP_INFLUX: https://influx-prod.company.fr
  REACT_APP_INFLUX_LOGIN: admin
  REACT_APP_HOUR_GMT: 2


stages:
  - publish

docker-push-client:
  stage: publish
  before_script:
    - docker login -u gitlab-ci-token -p $CI_BUILD_TOKEN $REGISTRY_URL
  image: docker:stable
  services:
    - docker:dind
  script:
    - docker build --no-cache -f client/docker/prod/Dockerfile . -t $REGISTRY_PACKAGE_CLIENT_NAME:latest
    - docker push $REGISTRY_PACKAGE_CLIENT_NAME:latest

Here is the Dockerfile for the client

FROM node:10.15-alpine
WORKDIR /app
COPY package*.json ./
ENV NODE_ENV production

RUN npm -g install serve && npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD [ "serve", "build", "-l", "3000" ]

Why is there such a difference between the 2 process ?

According to your answer in comments, GitLab CI/CD environment variables doesn't solve your issue. Gitlab CI environment is actual only in context of GitLab Runner that builds and|or deploys your app.

So, if you are going to propagate Env vars to the app, there are several ways to deliver variables from .gitlab-cy.ymlto your app:

ENV instruction Dockerfile

E.g.

FROM node:10.15-alpine
WORKDIR /app
COPY package*.json ./
ENV   NODE_ENV production
ENV   REACT_APP_API_URL: https://api.espace-client.company.fr
ENV   REACT_APP_DB_NAME: company
ENV   REACT_APP_INFLUX: https://influx-prod.company.fr
ENV   REACT_APP_INFLUX_LOGIN: admin
ENV   REACT_APP_HOUR_GMT: 2

RUN npm -g install serve && npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD [ "serve", "build", "-l", "3000" ]

docker-compose environment directive

web:
  environment:
    - NODE_ENV=production
    - REACT_APP_API_URL=https://api.espace-client.company.fr
    - REACT_APP_DB_NAME=company
    - REACT_APP_INFLUX=https://influx-prod.company.fr
    - REACT_APP_INFLUX_LOGIN=admin
    - REACT_APP_HOUR_GMT=2

Docker run -e

(Not your case, just for information)

docker -e REACT_APP_DB_NAME="company"

P.S. Try Gitlab CI variables

There is convenient way to store variables outside of your code: Custom environment variables

You can set them up easily from the UI. That can be very powerful as it can be used for scripting without the need to specify the value itself.

_{(source: gitlab.com)}