How do I add a .env file in gitlab ci during deployment stage?

Question

So I have a react/typescript app in my repo that I'm working on and in my repo I have a .env file that I'm ignoring so that my secrets don't get exposed and a .env-example file of important environment variables to configure. My problem is, since I'm not pushing the .env file to my repo, when I deploy my app through the google app engine(this is done in the deployment stage in my gitlab-ci.yml file), these environment variables will not be present in production and I need them for my app to work as I do something like this in my webpack.config.js file.

const dotenv = require('dotenv').config({ path: __dirname + '/.env' });

and then

new webpack.DefinePlugin({
  'process.env': dotenv.parsed
})

Here is my .gitlab-ci file for reference in case anyone here wants to see.

cache:
  paths:
    - node_modules/

stages:
  - build
  - test
  - deploy

Build_Site:
  image: node:8-alpine
  stage: build
  script:
    - npm install --progress=false
    - npm run-script build
  artifacts:
    expire_in: 1 week
    paths:
      - build

Run_Tests:
  image: node:8-alpine
  stage: test
  script:
    - npm install --progress=false
    - npm run-script test

Deploy_Production:
  image: google/cloud-sdk:latest
  stage: deploy
  environment: Production
  only:
    - master
  script:
    - echo $DEPLOY_KEY_FILE_PRODUCTION > /tmp/$CI_PIPELINE_ID.json
    - gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
    - gcloud config set project $PROJECT_ID_PRODUCTION
    - gcloud info
    - gcloud --quiet app deploy
  after_script:
    - rm /tmp/$CI_PIPELINE_ID.json

Also, feel free to critique my gitlab-ci.yml file so I can make it better.

Have you found a solution to this? I'm also looking for a way to do this. — IMB, Jan 07 '19 at 14:49
@IMB One solution was to create a bash script that creates a temporary .env from the environment variables setup through gitlab duing the build phase(put this in the before scipt), builds the project through npm run build and then deletes the .env file so that it doesn't remain as an artifact(put this in the after script). — Luis Averhoff, Jan 07 '19 at 18:02
@LuisAverhoff do you have an example of this solution to share? — graffitiMSX, May 03 '21 at 17:11

score 67 · Accepted Answer · edited Dec 03 '19 at 10:56

67

I don't know if you still need this, but this is how I achieved, what you wanted to.

Create your environment variables in your gitlab repo config
Create setup_env.sh:

#!/bin/bash

echo API_URL=$API_URL >> .env
echo NODE_ENV=$NODE_ENV >> .env

Modify your .gitlab-ci.yml. Upsert below to your before_script: section

  - chmod +x ./setup_env.sh
  - ./setup_env.sh

In webpack.config.js make use of https://www.npmjs.com/package/dotenv

require('dotenv').config();

This passes your .env variables available in webpack.config.js file.

Add this to your plugins array (add those variables you need):

    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      ...
    })

Now your deployment should use your environment variables specified in you gitlab settings.

edited Dec 03 '19 at 10:56

Michiel Roos

863
11
13

answered Apr 08 '19 at 20:18

Mike Czarnota

799
8
9

1

committing .env files to the repo is a bad practice – Francis Manoj Fernnado Aug 05 '19 at 06:17
10

@FrancisManojFernnado yup. That's why there is such procedure – Mike Czarnota Aug 06 '19 at 09:00
7

@MichałCzarnota, would you consider copying the all .env content inside a giltab CI environment variable as a bad practice? As advised here we need to set as much variables as we define entries in the .dotenv file (in the worst case at least). Then we reconstruct the .env file in the prescript instruction. Seems overkill to me. let put the entire .env content in the Gitlab CI environement variable. – chaiyachaiya Jun 29 '20 at 08:36
2

@chaiyachaiya I think you are right. In the next project I omitted this overhead. But, unfortunately, I didn't find a way to avoid setting env variables in gitlab repo config. – Mike Czarnota Jul 15 '20 at 20:20
thanks for this. This was my solution for dotenv in Flutter using CodeMagic CI – Karl Anthony Baluyot Dec 21 '21 at 01:07
For me, the line that adds the token needed a slight modification with quotes and curly brackets: echo 'AUTH_TOKEN=${AUTH_TOKEN}' >> .env – Omer Gurarslan Jul 01 '22 at 13:15

score 16 · Answer 2 · answered Mar 03 '23 at 08:11

Gitlab now allows you to have file type variables, here's how I'm using.

FYI: In this case a Vuejs app.

Then on my .gitlab-ci file:

...
before_script:
    ...
    - cp ${PRODUCTION_ENV_FILE} .env.production
script:
    ...
    - npm ci
    - npm run build
...

Maxime Lafarie · Answer 3 · 2022-05-11T07:47:11.940

Committing .env files isn't a bad practice if you don't push any sensitive information in it like:

# App Configuration
PORT=3000
NODE_ENV=production
APP_ENV=APP_ENV
TZ=utc
COMMIT_SHA=COMMIT_SHA

# Rabbitmq configuration
RABBITMQ_HOST=RABBITMQ_HOST
RABBITMQ_USER=RABBITMQ_USER
RABBITMQ_PASS=RABBITMQ_PASS
RABBITMQ_PORT=RABBITMQ_PORT
...

(assuming variables like RABBITMQ_HOST are safely set in your GitLab CI environment variables)

So in the .gitlab-ci.yml job, you can just duplicate the needed .env file and it will automatically be interpreted:

...
test:e2e:
  image: node:lts
  services:
    - postgres:13-alpine
    - rabbitmq:3.9-management
  stage: test
  before_script:
    - cp .env.test .env      # <--- env vars will be applied
    - npm install pm2 -g
    - npm run install:ci
    - npm run db:drop
    - npm run db:migrate
    - npm run db:fixture
    - pm2 start npm -- start --name "myapp"
  script:
    - npm run test:e2e
  after_script:
    - pm2 delete "myapp"
  variables:                 # <---- override any env var you want here
    POSTGRES_DB: test
    POSTGRES_USER: test
    POSTGRES_PASSWORD: testPwd!
    POSTGRES_HOST_AUTH_METHOD: trust
  cache:
    key:
      files:
        - package-lock.json
    paths:
      - .npm/
    policy: pull
  except:
    - /^release.*$/i
    - tags
...

No tricky stuff needed.

Just wonder, if it will even work. Shouldn't the cp's arguments are inverted? Otherwise, gitlab runner will throw something like `cp: cannot stat '.env.test': No such file or directory` — PavelPraulov, Jun 08 '23 at 11:35
@PavelPraulov take a look at this : https://explainshell.com/explain?cmd=cp+.env.test+.env . (quick answer: since `.env` isn't a directory, it copies the file perfectly. So yes it works! — Maxime Lafarie, Jun 08 '23 at 12:12

score 3 · Answer 4 · answered Oct 27 '22 at 17:02

Now Gitlab CI/CD can use files in pipelines. You should choose variables with type "file" (Settings > CI/CD > Variables > add variable > set type: file) and fill the "value" field by content of your .env file (https://docs.gitlab.com/ee/ci/variables/#cicd-variable-types)

score 1 · Answer 5 · answered Jul 21 '22 at 15:59

Updated and simple answer:

Supposing you have your .env file like this:

 UPLOADER_URL=http://localhost:3333/api
 FIREBASE_API_KEY=123456abcd

Your normal .gitlab-ci.yml is like this:

image: node:14.18.0-alpine

before_script:
  - npm i -g firebase-tools

desploy-hosting:
  stage: deploy
  script:
    - yarn
    - yarn build
    - firebase deploy --only hosting --token $FIREBASE_TOKEN
  only:
    - master

You just have to "create" your .env in your container and echo/write each variable in it.

Your final .yml will be like this:

image: node:14.18.0-alpine

before_script:
  - npm i -g firebase-tools
  - echo UPLOADER_URL=$UPLOADER_URL >> .env         # Add here!
  - echo FIREBASE_API_KEY=$FIREBASE_API_KEY >> .env # Add here!

desploy-hosting:
  stage: deploy
  script:
    - yarn
    - yarn build
    - firebase deploy --only hosting --token $FIREBASE_TOKEN
  only:
    - master

How do I add a .env file in gitlab ci during deployment stage?

5 Answers5

Updated and simple answer:

Linked