Gitlab-ci and docker - env variables

Question

My scenario: Gitlab runner deploying my react app in ubuntu server using docker.

My problem: I want to know how can i pass the environmental variables created in gitlab to docker compose ( or dockerfile). In order to use them when building the app.

My files:

image: docker:latest
services:
    - docker:dind

stages:
    - deploy

step-develop:
    stage: deploy
    only:
        - dev
    tags:
        - dev
    script:
        - echo MY_VAR_FROM_GITLAB # This is working good.
        - sudo docker image prune -f
        - sudo docker-compose -f docker-compose.yml build --no-cache
        - sudo docker-compose -f docker-compose.yml up -d
step-production:
    stage: deploy
    only:
        - prod
    tags:
        - prod
    script:
        - sudo docker image prune -f
        - sudo docker-compose -f docker-compose-prod.yml build --no-cache
        - sudo docker-compose -f docker-compose-prod.yml up -d

#the docker compose file version
version: '3'
# you can run multiple services inside one docker compose file
# define them with their dependencies one after the other
services:
    # service 1 named react-dev
    react-dev:
        # service 1 container name
        container_name: react-dev
        build:
            # the context (working directory) is the current directory
            # change this to the directory containing the dockerfile if in a different place
            context: .
            # the dockerfile to be run
            dockerfile: Dockerfile
        # map the exposed port from the underlying service to a port exposed to the outside
        # in this case  map port 3000 exposed by create react app to also 3000
        # to be used to access the container from the outside
        ports:
            - '3000:80'
        # the mounted volumes (folders which are outside docker but being used by docker)
        # volumes:
        #     - '.:/gt-strapi-react'
        #     - '/gt-strapi-react/node_modules'
        # set the environment to development
        environment:
            - NODE_ENV=development

Answer 1

Since is a react app you can't add environment variables at run time, so you have to add them at build time. In order to do that add them as arguments in the docker-compose file

build:
  # the context (working directory) is the current directory
  # change this to the directory containing the dockerfile if in a different place
  context: .
  # the dockerfile to be run
  dockerfile: Dockerfile
  args:
    - MY_VAR_FROM_GITLAB=${MY_VAR_FROM_GITLAB}

And you also need to specify it in dockerfile

ARG MY_VAR_FROM_GITLAB
ENV MY_VAR_FROM_GITLAB $MY_VAR_FROM_GITLAB

EDIT

As discussed in comments create a .env file where you have the docker-compose.yml

touch .env

and add in that file the variable

echo "MY_VAR_FROM_GITLAB =$MY_VAR_FROM_GITLAB" >> .env