Setting vueJS env variables with docker at runtime

Question

So here's my problem, I have to dockerize my vue app to use it in a kubernetes/rancher environment.

I'd like to set in my rancher some env variable like the API base url for example, but I don't know how to do that.

Here's my dockerFile:

FROM nginx:stable-alpine
# define 'app'
WORKDIR /app

COPY dist /usr/share/nginx/html

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

.gitlab-ci.yml

image: node:lts-alpine

stages:
- install
- tests
- build
- deploy-docker
- rerun-docker

cache:
  paths:
    - node_modules/

install:
  stage: install
  script: npm install
  tags: [ docker ]

test:
  stage: tests
  script: npm run test:unit
  tags: [ docker ]

build:
  stage: build
  script: npm run build
  artifacts:
    paths:
    - dist
  tags: [ docker ]

build_image:
  stage: deploy-docker
  image: //myurl//
  script:
  - docker build -t //myurl// .
  - docker push //myurl//
  only:
  - develop
  - feat/CI-front
  tags: [ docker ]

rerun:
  stage: rerun-docker
  image: //adress///kubectl:latest
  script:
  - kubectl scale deployment //myproject// --replicas=0 -n //name//
  - kubectl scale deployment //myproject// --replicas=1 -n //name//
  only:
  - develop
  - feat/CI-front
  tags: [ docker ]

And my .env if that's necessary

VUE_APP_API_BASE_URL = hello

Thank a lot

Umbreoon · Accepted Answer · 2020-07-15 08:44:51Z

I found an answer

dockerFile:

FROM openresty/openresty
# define 'app'
WORKDIR /app

COPY dist /usr/local/openresty/nginx/html/
COPY nginx.conf /usr/local/openresty/nginx/conf/nginx.conf

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

Nginx conf

worker_processes 1;

events {
  worker_connections 1024;
}

env VUE_APP_API_BASE_URL;

http {
  include mime.types;
  default_type application/octet-stream;

  gzip on;
  gzip_disable "msie6";

  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;
  gzip_min_length 256;
  gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon application/javascript image/webp;

  server {
    server_name localhost;

    location / {
      root /usr/local/openresty/nginx/html;
      index index.html;
      set_by_lua $api_url 'return os.getenv("VUE_APP_API_BASE_URL")';
      sub_filter_types *;
      sub_filter '[[VUE_APP_API_BASE_URL]]' '$api_url';
      sub_filter_once off;
      try_files $uri $uri/ /index.html;
    }
  }
}

.env

VUE_APP_API_BASE_URL = [[VUE_APP_API_BASE_URL]]

Dharman · Accepted Answer · 2020-07-15 08:16:35Z

0

in Rancher there will an upgrade option where you can find Add Environment Variables(under Command tab) to pass env variables as key/value pair.

edited Jul 15, 2020 at 8:16

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jul 15, 2020 at 8:10

Abhishek

1,45013 silver badges22 bronze badges

6 Comments

Umbreoon Over a year ago

Yes I know that, the point is the code is already built when in rancher so passing env variables through rancher won't work

Abhishek Over a year ago

I see, then one question: where exactly you are building the code? As in your docker file, there are no build commands (like webpack or something similar) If you are building before copying into Dockerfile, anyway it won't work. In case you are building the app as part of docker build, use export VUE_APP_API_BASE_URL = hello

Umbreoon Over a year ago

In my gitlabCI I'll add the gitlabci conf in initial post

Abhishek Over a year ago

Great, then you are building the code in Gitlab CI >> creating the dist folder and lastly baking the image. If I understand correctly, the environment variable should go into the configuration of GitLab. Let me know if I am missing anything.

Umbreoon Over a year ago

I guess you're right. Should I look to pass the env variables when building my gitlab ci?

|

Abhishek · Accepted Answer · 2020-07-15 08:29:01Z

0

Try below in GitLab config

build:
  stage: build
  script: export VUE_APP_API_BASE_URL = hello; npm run build
  artifacts:
    paths:
    - dist
  tags: [ docker ]

answered Jul 15, 2020 at 8:29

Abhishek

1,45013 silver badges22 bronze badges

2 Comments

Umbreoon Over a year ago

But in that case it would nt be in runtime. Everytime I'd like to change a value I will have to go into the code to change the code. And in that case I guess the classic vue mode is cleaner cli.vuejs.org/guide/mode-and-env.html

Abhishek Over a year ago

You can create two pipelines one for prod and another for dev. Or use single and use the environment variable instead of hard coding it in the yaml file. Refer docs.gitlab.com/ee/ci/variables

Collectives™ on Stack Overflow

Setting vueJS env variables with docker at runtime

3 Answers 3

Comments

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related