在运行时使用 docker 设置 vueJS 环境变量答案

【问题标题】：Setting vueJS env variables with docker at runtime在运行时使用 docker 设置 vueJS 环境变量
【发布时间】：2020-07-15 07:32:41
【问题描述】：

所以这是我的问题，我必须对我的 vue 应用程序进行 dockerize 才能在 kubernetes/rancher 环境中使用它。

我想在我的牧场主中设置一些环境变量，例如 API 基本 url，但我不知道该怎么做。

这是我的 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 ]

如果有必要，还有我的 .env

VUE_APP_API_BASE_URL = hello

非常感谢

【问题讨论】：

标签： docker vue.js nginx environment-variables rancher

【解决方案1】：

我找到了答案

码头文件：

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 配置

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

【讨论】：

【解决方案2】：

在 Rancher 中会有一个升级选项，您可以在其中找到添加环境变量（在命令选项卡下），以将环境变量作为键/值对传递。

【讨论】：

是的，我知道，关键是代码在 Rancher 中已经构建好了，所以通过 Rancher 传递 env 变量是行不通的
我明白了，然后是一个问题：您究竟在哪里构建代码？就像在您的 docker 文件中一样，没有构建命令（如 webpack 或类似的东西）如果您在复制到 Dockerfile 之前进行构建，无论如何它都不会工作。如果您将应用程序构建为 docker build 的一部分，请使用 export VUE_APP_API_BASE_URL = hello
在我的 gitlabCI 中，我将在初始帖子中添加 gitlabci conf
太好了，那么您正在 Gitlab CI 中构建代码 >> 创建 dist 文件夹并最后烘焙图像。如果我理解正确，环境变量应该进入 GitLab 的配置。如果我遗漏了什么，请告诉我。
我猜你是对的。我应该在构建我的 gitlab ci 时传递环境变量吗？

【解决方案3】：

在 GitLab 配置中尝试以下操作

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

【讨论】：

但在这种情况下，它不会在运行时。每次我想更改一个值时，我都必须进入代码来更改代码。在那种情况下，我猜经典的 vue 模式更干净cli.vuejs.org/guide/mode-and-env.html
您可以创建两个管道，一个用于生产，另一个用于开发。或者使用 single 并使用环境变量而不是在 yaml 文件中对其进行硬编码。参考docs.gitlab.com/ee/ci/variables