Gitlab CI Runner + Docker Compose + React, problem with "ENV Variables"

Question

Hello i have the following scenario. I have set up a gitlab runner that with deploy my react application to my ubuntu server using docker. I cannot find a way to get the environmental variables when deploying. The only way it works is if i push .env to the repository ( i dont want to do it ). If i don't push it, when gitlab runner runs docker-compose it throws an error saying that .env is not found. I have also tried creating env variables in gitlab, i can echo them in gitlab-ci.yml, but i don't know how to use them in docker compose later.

image: docker:latest
services:
    - docker:dind

stages:
    - deploy

step-develop:
    stage: deploy
    only:
        - dev
    tags:
        - dev
    script:
        - echo $REACT_APP_BASE_PAGE_URL
        - echo $REACT_APP_CMS_URL
        - 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
        env_file:
            - .env
        environment:
            - NODE_ENV=development
            - REACT_APP_BASE_PAGE_URL=${REACT_APP_BASE_PAGE_URL}
            - REACT_APP_CMS_URL=${REACT_APP_CMS_URL}

torkel torkel · Accepted Answer · 2020-12-09T11:33:48

You should remove the env_file section from your Docker Compose configuration. Any files named .env in the root folder are read by Docker Compose automatically, and the env_file section is for tuning this.

You should also not run docker-compose as sudo.

Finally, you want to be super explicit about environment variables passed to docker-compose, you can execute it like this from the GitLab CI config:

step-production:
    script:
        - env 
        - REACT_APP_CMS_URL=${REACT_APP_CMS_URL} 
        - docker-compose 
        - -f 
        - docker-compose-prod.yml 
        - up 
        - -d

Gitlab CI Runner + Docker Compose + React, problem with "ENV Variables"

1 Answers