Docker 如何在前端项目动态插入并使用变量

前言

根据项目需求,在实现登出功能时,需要根据测试环境和生产环境调用不同的登出URL。本文将介绍如何在Docker前端镜像中设置变量以及使用变量的方法。

解决办法

在生成前端容器的阶段,可以使用同一个镜像,根据不同的环境传入参数来创建不同的前端容器。下面将分享一个在容器执行阶段动态插入并使用变量的实例。

步骤

  1. 在根目录创建start.sh文件,文件内容如下:
bash 复制代码
#!/usr/bin/env sh

cat /etc/nginx/nginx.conf
nginx -g "daemon off;"

注: #!/usr/bin/env sh 并不是注释的意思,而是选择编译语言的意思。建议使用sh,因为bash可能不是每台服务器都安装的。
注: 为什么要加nginx -g "daemon off;"

因为要让容器能持续运行,必须要有前台进程,这里将nginx转为前台进程。

  1. 在Dockerfile中复制start.sh,将其从容器外复制到容器内:
Dockerfile 复制代码
...
COPY start.sh /app/start.sh
  1. 在根目录创建nginx.conf.template文件,首先从nginx.conf复制代码,然后在文件的http -> server下添加ENV_VARS占位符,代码如下:
nginx 复制代码
http {
    ...
    server {
        .....
        location /env.json {
            default_type application/json;
            return 200 '${ENV_VARS}';
        }
    }
}
  1. 在项目的服务器端创建一个获取变量的方法,代码如下:
typescript 复制代码
type Env = {
  logoutUrl?: string;
};

export async function getEnvironmentVariables() {
  return request<Env>('/env.json', { method: 'GET' });
}
  1. 在项目代码中添加使用变量的方法,代码如下:
typescript 复制代码
const logout = () => {
    getEnvironmentVariables()
      .then((data) => {
        const logoutUrl = data?.logoutUrl;
        if (logoutUrl) {
         ...
        }
      })
      .catch((e) => {
        ...
      });
  };
  1. 在正常构建镜像之后,在生成容器时,可以通过环境变量传参来替换原前端nginx.conf.template文件中的ENV_VARS字符串:
bash 复制代码
docker run -e ENV_VARS='{"logoutUrl": "xxxxxx"}' --name test -p 81:8000 -itd swr.test:v0.0.31

sh start.sh

注:如果替换的环境变量是JSON格式,需要将变量值用单引号包含,变量值内的属性值使用双引号。例如:ENV_VARS='{"logoutUrl": "xxxxxx"}'

后言

这个设计使得在前端独立容器化部署时,能够通过环境变量解耦登出地址,避免了一次又一次的构建镜像工作量。希望本文对您有所帮助,如果有任何问题,请在下方留言进行沟通。如果本文对您有一点帮助,请给我一个点赞支持一下。

希望以上优化建议对您有所帮助!如果您还有其他问题或需要进一步优化,请随时告诉我。

相关推荐
AI云原生1 小时前
云原生系列Bug修复:Docker镜像无法启动的终极解决方案与排查思路
运维·服务器·python·docker·云原生·容器·bug
啊啊啊啊8432 小时前
k8s lngress与安全机制
安全·容器·kubernetes
正在学习前端的---小方同学2 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
三坛海会大神5552 小时前
k8s(八)Ingress详解
云原生·容器·kubernetes
荣光波比2 小时前
K8S(十三)—— Helm3从入门到实战:简化Kubernetes应用部署与管理
云原生·容器·kubernetes
键盘不能没有CV键5 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ6 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python6 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tryCbest7 小时前
CentOS部署Docker容器
linux·docker·centos
tsumikistep7 小时前
【前端】前端运行环境的结构
前端