search

Home  >  Q&A  >  body text

How to load variables from gitlab to .env VueJS

I want to load Gitlab variables into .env.Production in a VueJS application so that I can use process.env.VUE_APP_VARIABLE_NAME.

what did I do:

  1. Create some variables in the GitLab CI/CD setup
  2. Create .env.product file:

1

2

3

4

5

6

7

8

9

10

11

VUE_APP_EMAILJS_USER_ID=*

VUE_APP_EMAILJS_SERVICE_ID=*

VUE_APP_EMAILJS_TEMPLATE_ID=*

 

VUE_APP_FIREBASE_API_KEY=*

VUE_APP_FIREBASE_AUTH_DOMAIN=*

VUE_APP_FIREBASE_PROJECT_ID=*

VUE_APP_FIREBASE_STORAGE_BUCKET=*

VUE_APP_FIREBASE_MESSAGING_SENDER_ID=*

VUE_APP_FIREBASE_APP_ID=*

VUE_APP_FIREBASE_MEASUREMENT_ID=*

  1. My.gitlab-ci.yml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

build-docker-image:

  stage: build

  before_script:

    # $CI_JOB_TOKEN is variable automatically added by Gitlab: see https://docs.gitlab.com/ee/ci/variables/predefined_variables.html#variables-reference

    - echo $CI_JOB_TOKEN | docker login -u gitlab-ci-token registry.gitlab.com --password-stdin

  script:

    # build and push docker image to gitlab registry

    - docker pull $GITLAB_IMAGE || true # Allows us to use --cache-from

    - docker build

      --build-arg VUE_APP_EMAILJS_USER_ID=$VUE_APP_EMAILJS_USER_ID

      --build-arg VUE_APP_EMAILJS_SERVICE_ID=$VUE_APP_EMAILJS_SERVICE_ID

      --build-arg VUE_APP_EMAILJS_TEMPLATE_ID=$VUE_APP_EMAILJS_TEMPLATE_ID

      --build-arg VUE_APP_FIREBASE_API_KEY=$VUE_APP_FIREBASE_API_KEY

      --build-arg VUE_APP_FIREBASE_AUTH_DOMAIN=$VUE_APP_FIREBASE_AUTH_DOMAIN

      --build-arg VUE_APP_FIREBASE_PROJECT_ID=$VUE_APP_FIREBASE_PROJECT_ID

      --build-arg VUE_APP_FIREBASE_STORAGE_BUCKET=$VUE_APP_FIREBASE_STORAGE_BUCKET

      --build-arg VUE_APP_FIREBASE_MESSAGING_SENDER_ID=$VUE_APP_FIREBASE_MESSAGING_SENDER_ID

      --build-arg VUE_APP_FIREBASE_APP_ID=$VUE_APP_FIREBASE_APP_ID

      --build-arg VUE_APP_FIREBASE_MEASUREMENT_ID=$VUE_APP_FIREBASE_MEASUREMENT_ID

      --cache-from $GITLAB_IMAGE -t $GITLAB_IMAGE:$CI_COMMIT_SHA .

    - docker push $GITLAB_IMAGE:$CI_COMMIT_SHA

  1. Configuration.Dockerfile

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

FROM node:14.18 as build-stage

WORKDIR /app

COPY package*.json ./

COPY yarn.lock ./

RUN yarn install

COPY . .

 

# pass Docker varibales to VueJS environment varibales

ARG VUE_APP_EMAILJS_USER_ID

ENV VUE_APP_EMAILJS_USER_ID $VUE_APP_EMAILJS_USER_ID

ARG VUE_APP_EMAILJS_SERVICE_ID

ENV VUE_APP_EMAILJS_SERVICE_ID $VUE_APP_EMAILJS_SERVICE_ID

ARG VUE_APP_EMAILJS_TEMPLATE_ID

ENV VUE_APP_EMAILJS_TEMPLATE_ID $VUE_APP_EMAILJS_TEMPLATE_ID

 

ARG VUE_APP_FIREBASE_API_KEY

ENV VUE_APP_FIREBASE_API_KEY $VUE_APP_FIREBASE_API_KEY

ARG VUE_APP_FIREBASE_AUTH_DOMAIN

ENV VUE_APP_FIREBASE_AUTH_DOMAIN $VUE_APP_FIREBASE_AUTH_DOMAIN

ARG VUE_APP_FIREBASE_PROJECT_ID

ENV VUE_APP_FIREBASE_PROJECT_ID $VUE_APP_FIREBASE_PROJECT_ID

ARG VUE_APP_FIREBASE_STORAGE_BUCKET

ENV VUE_APP_FIREBASE_STORAGE_BUCKET $VUE_APP_FIREBASE_STORAGE_BUCKET

ARG VUE_APP_FIREBASE_MESSAGING_SENDER_ID

ENV VUE_APP_FIREBASE_MESSAGING_SENDER_ID $VUE_APP_FIREBASE_MESSAGING_SENDER_ID

ARG VUE_APP_FIREBASE_APP_ID

ENV VUE_APP_FIREBASE_APP_ID $VUE_APP_FIREBASE_APP_ID

ARG VUE_APP_FIREBASE_MEASUREMENT_ID

ENV VUE_APP_FIREBASE_MEASUREMENT_ID $VUE_APP_FIREBASE_MEASUREMENT_ID

 

# build the application

RUN yarn build

 

FROM nginx:1.19 as production-stage

RUN mkdir /app

COPY --from=build-stage /app/dist /app

COPY nginx.conf /etc/nginx/nginx.conf

But I only receive null values ​​for all variables

Does anyone know my name?

P粉682987577P粉682987577374 days ago512

reply all(1)I'll reply

  • P粉668113768

    P粉6681137682024-03-27 10:52:20

    I think you did a good job but forgot to pass ENV on the Dockerfile I have the same configuration but passing them using = notation, for example:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    FROM node:14.18 as build-stage

    WORKDIR /app

    COPY package*.json yarn.lock ./

    RUN yarn install

    COPY . .

     

    # pass Docker varibales to VueJS environment varibales

    ARG VUE_APP_FIREBASE_APP_ID \

        VUE_APP_EMAILJS_USER_ID  \

        VUE_APP_FIREBASE_API_KEY \

        VUE_APP_EMAILJS_SERVICE_ID \

        VUE_APP_EMAILJS_TEMPLATE_ID \

        VUE_APP_FIREBASE_PROJECT_ID \

        VUE_APP_FIREBASE_AUTH_DOMAIN \

        VUE_APP_FIREBASE_STORAGE_BUCKET \

        VUE_APP_FIREBASE_MEASUREMENT_ID \

        VUE_APP_FIREBASE_MESSAGING_SENDER_ID

     

    ENV VUE_APP_FIREBASE_APP_ID=$VUE_APP_FIREBASE_APP_ID \

        VUE_APP_EMAILJS_USER_ID=$VUE_APP_EMAILJS_USER_ID \

        VUE_APP_FIREBASE_API_KEY=$VUE_APP_FIREBASE_API_KEY \

        VUE_APP_EMAILJS_SERVICE_ID=$VUE_APP_EMAILJS_SERVICE_ID \

        VUE_APP_EMAILJS_TEMPLATE_ID=$VUE_APP_EMAILJS_TEMPLATE_ID \

        VUE_APP_FIREBASE_PROJECT_ID=$VUE_APP_FIREBASE_PROJECT_ID \

        VUE_APP_FIREBASE_AUTH_DOMAIN=$VUE_APP_FIREBASE_AUTH_DOMAIN \

        VUE_APP_FIREBASE_STORAGE_BUCKET=$VUE_APP_FIREBASE_STORAGE_BUCKET \

        VUE_APP_FIREBASE_MEASUREMENT_ID=$VUE_APP_FIREBASE_MEASUREMENT_ID \

        VUE_APP_FIREBASE_MESSAGING_SENDER_ID=$VUE_APP_FIREBASE_MESSAGING_SENDER_ID

     

    # build the application

    RUN yarn build

     

    FROM nginx:1.19 as production-stage

    RUN mkdir /app

    COPY --from=build-stage /app/dist /app

    COPY nginx.conf /etc/nginx/nginx.conf

    CMD ["nginx", "-g", "daemon off;"]

    To separate development and production environments, you can add DEV_ and MAIN_ before the environment name on your Gitlab CI/CD env and .gitlab-ci.yml files, like: 

    build-docker-image-develop:
  stage: build
  before_script:
    # $CI_JOB_TOKEN is variable automatically added by Gitlab: see https://docs.gitlab.com/ee/ci/variables/predefined_variables.html#variables-reference
    - echo $CI_JOB_TOKEN | docker login -u gitlab-ci-token registry.gitlab.com --password-stdin
  script:
    # build and push docker image to gitlab registry
    - docker pull $GITLAB_IMAGE || true # Allows us to use --cache-from
    - docker build 
      --build-arg VUE_APP_EMAILJS_USER_ID=$DEV_VUE_APP_EMAILJS_USER_ID
      --build-arg VUE_APP_FIREBASE_APP_ID=$DEV_VUE_APP_FIREBASE_APP_ID
      --build-arg VUE_APP_FIREBASE_API_KEY=$DEV_VUE_APP_FIREBASE_API_KEY
      --build-arg VUE_APP_EMAILJS_SERVICE_ID=$DEV_VUE_APP_EMAILJS_SERVICE_ID
      --build-arg VUE_APP_EMAILJS_TEMPLATE_ID=$DEV_VUE_APP_EMAILJS_TEMPLATE_ID
      --build-arg VUE_APP_FIREBASE_PROJECT_ID=$DEV_VUE_APP_FIREBASE_PROJECT_ID
      --build-arg VUE_APP_FIREBASE_AUTH_DOMAIN=$DEV_VUE_APP_FIREBASE_AUTH_DOMAIN
      --build-arg VUE_APP_FIREBASE_MEASUREMENT_ID=$DEV_VUE_APP_FIREBASE_MEASUREMENT_ID
      --build-arg VUE_APP_FIREBASE_STORAGE_BUCKET=$DEV_VUE_APP_FIREBASE_STORAGE_BUCKET
      --build-arg VUE_APP_FIREBASE_MESSAGING_SENDER_ID=$DEV_VUE_APP_FIREBASE_MESSAGING_SENDER_ID
      --cache-from $GITLAB_IMAGE -t $GITLAB_IMAGE:$CI_COMMIT_SHA .
    - docker push $GITLAB_IMAGE:$CI_COMMIT_SHA
  only:
    - develop
  tags:
    - docker-build

#### production

build-docker-image-main:
  stage: build
  before_script:
    # $CI_JOB_TOKEN is variable automatically added by Gitlab: see https://docs.gitlab.com/ee/ci/variables/predefined_variables.html#variables-reference
    - echo $CI_JOB_TOKEN | docker login -u gitlab-ci-token registry.gitlab.com --password-stdin
  script:
    # build and push docker image to gitlab registry
    - docker pull $GITLAB_IMAGE || true # Allows us to use --cache-from
    - docker build 
      --build-arg VUE_APP_EMAILJS_USER_ID=$MAIN_VUE_APP_EMAILJS_USER_ID
      --build-arg VUE_APP_FIREBASE_APP_ID=$MAIN_VUE_APP_FIREBASE_APP_ID
      --build-arg VUE_APP_FIREBASE_API_KEY=$MAIN_VUE_APP_FIREBASE_API_KEY
      --build-arg VUE_APP_EMAILJS_SERVICE_ID=$MAIN_VUE_APP_EMAILJS_SERVICE_ID
      --build-arg VUE_APP_EMAILJS_TEMPLATE_ID=$MAIN_VUE_APP_EMAILJS_TEMPLATE_ID
      --build-arg VUE_APP_FIREBASE_PROJECT_ID=$MAIN_VUE_APP_FIREBASE_PROJECT_ID
      --build-arg VUE_APP_FIREBASE_AUTH_DOMAIN=$MAIN_VUE_APP_FIREBASE_AUTH_DOMAIN
      --build-arg VUE_APP_FIREBASE_MEASUREMENT_ID=$MAIN_VUE_APP_FIREBASE_MEASUREMENT_ID
      --build-arg VUE_APP_FIREBASE_STORAGE_BUCKET=$MAIN_VUE_APP_FIREBASE_STORAGE_BUCKET
      --build-arg VUE_APP_FIREBASE_MESSAGING_SENDER_ID=$MAIN_VUE_APP_FIREBASE_MESSAGING_SENDER_ID
      --cache-from $GITLAB_IMAGE -t $GITLAB_IMAGE:$CI_COMMIT_SHA .
    - docker push $GITLAB_IMAGE:$CI_COMMIT_SHA
  only:
    - main
  tags:
    - docker-build

    reply
    0
  • Cancelreply