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

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

<pre><code>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
</code></pre>

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

<p>Here is my gitlab CI:</p>

<pre><code>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
</code></pre>

<p>Here is the Dockerfile for the client</p>

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

RUN npm -g install serve &amp;&amp; npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD [ "serve", "build", "-l", "3000" ]
</code></pre>

<p>Why is there such a difference between the 2 process ?</p>

<p>According to your answer in comments, <a href="https://docs.gitlab.com/ee/ci/variables/" rel="nofollow noreferrer">GitLab CI/CD environment variables</a> doesn't solve your issue. Gitlab CI environment is actual only in context of <a href="https://docs.gitlab.com/runner/" rel="nofollow noreferrer">GitLab Runner</a> that builds and|or deploys your app.</p>
<p>So, if you are going to propagate Env vars to the app, there are several ways to deliver variables from <code>.gitlab-cy.yml</code>to your app:</p>
<h1><a href="https://docs.docker.com/engine/reference/builder/#env" rel="nofollow noreferrer"><code>ENV</code></a> instruction Dockerfile</h1>
<p>E.g.</p>
<pre class="lang-yaml prettyprint-override"><code>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 &amp;&amp; npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD [ &quot;serve&quot;, &quot;build&quot;, &quot;-l&quot;, &quot;3000&quot; ]
</code></pre>
<h1>docker-compose <a href="https://docs.docker.com/compose/environment-variables/" rel="nofollow noreferrer"><code>environment</code></a> directive</h1>
<pre class="lang-yaml prettyprint-override"><code>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
</code></pre>
<h1>Docker <a href="https://docs.docker.com/engine/reference/run/#env-environment-variables" rel="nofollow noreferrer"><code>run -e</code></a></h1>
<blockquote>
<p>(Not your case, just for information)</p>
</blockquote>
<p><code>docker -e REACT_APP_DB_NAME=&quot;company&quot;</code></p>
<h1>P.S. Try Gitlab CI variables</h1>
<p>There is convenient way to store variables outside of your code: <a href="https://docs.gitlab.com/ee/ci/variables/#custom-environment-variables" rel="nofollow noreferrer">Custom environment variables</a></p>
<p>You can <a href="https://docs.gitlab.com/ee/ci/variables/#creating-a-custom-environment-variable" rel="nofollow noreferrer">set them up easily from the UI</a>. That can be very powerful as it can be used for scripting without the need to specify the value itself.</p>
<p><a href="https://i.stack.imgur.com/l3eIg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l3eIg.png" alt="creating-a-custom-environment-variable" /></a><br />
<sub>(source: <a href="https://docs.gitlab.com/ee/ci/variables/img/new_custom_variables_example.png" rel="nofollow noreferrer">gitlab.com</a>)</sub></p>
