CODEWITHSUNDEEP
dockervue.jsnginxenvironment-variablesrancher
Umbreoon
Umbreoon

Reputation: 57

Setting vueJS env variables with docker at runtime

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

Upvotes: 1

Views: 2577

Answers (3)

Umbreoon
Umbreoon

Reputation: 57

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

Upvotes: 1

Abhishek
Abhishek

Reputation: 1180

Try below in GitLab config

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

Upvotes: 0

Abhishek
Abhishek

Reputation: 1180

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.

Upvotes: 0

Related Questions