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 I did: Created some variables in GitLabCI/CD setup Create .env.product file: VUE_APP_EMAILJS_USER_ID=*VUE_APP_EMAILJS_SERVICE_ID=*VUE_APP_EMAILJS_TEMPL

How to load variables from gitlab to .env VueJS-PHP Chinese Network Q&A

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:

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

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=*

My.gitlab-ci.yml

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

Configuration.Dockerfile

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?

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;"]

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 all(1)

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

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:

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:

Like +0

Add Reply