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

前言

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

解决办法

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

步骤

  1. 在根目录创建start.sh文件,文件内容如下:
#!/usr/bin/env shcat /etc/nginx/nginx.conf
nginx -g "daemon off;"

注: #!/usr/bin/env sh 并不是注释的意思,而是选择编译语言的意思。建议使用sh,因为bash可能不是每台服务器都安装的。

注: 为什么要加nginx -g "daemon off;"
因为要让容器能持续运行,必须要有前台进程,这里将nginx转为前台进程。

  1. 在Dockerfile中复制start.sh,将其从容器外复制到容器内:
...
COPY start.sh /app/start.sh
  1. 在根目录创建nginx.conf.template文件,首先从nginx.conf复制代码,然后在文件的http -> server下添加ENV_VARS占位符,代码如下:
http {...server {.....location /env.json {default_type application/json;return 200 '${ENV_VARS}';}}
}
  1. 在项目的服务器端创建一个获取变量的方法,代码如下:
type Env = {logoutUrl?: string;
};export async function getEnvironmentVariables() {return request<Env>('/env.json', { method: 'GET' });
}
  1. 在项目代码中添加使用变量的方法,代码如下:
const logout = () => {getEnvironmentVariables().then((data) => {const logoutUrl = data?.logoutUrl;if (logoutUrl) {...}}).catch((e) => {...});};
  1. 在正常构建镜像之后,在生成容器时,可以通过环境变量传参来替换原前端nginx.conf.template文件中的ENV_VARS字符串:
docker run -e ENV_VARS='{"logoutUrl": "xxxxxx"}' --name test -p 81:8000 -itd swr.test:v0.0.31sh start.sh

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

后言

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/181300.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言每日一题(41)循环队列

力扣 622 循环队列 题目描述 设计你的循环队列实现。 循环队列是一种线性数据结构&#xff0c;其操作表现基于 FIFO&#xff08;先进先出&#xff09;原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。 循环队列的一个好处是我们可以利用这个队列之前…

5W2H分析法

5W2H分析法 5W2H分析法又叫七问分析法。 模型介绍 简单、方便&#xff0c;易于操作的思考&#xff08;框架&#xff09;模型&#xff0c;问题分析模型&#xff0c;它可以帮助我们保证思考的严谨与全面&#xff0c;也能给人启发&#xff0c;有着广泛的应用&#xff1a; 提问-可…

AndroidNDK开发之交叉编译

在Android studio2.2以及以上&#xff0c;构建原生库的默认工具是cmake。 CMake是一个跨平台的构建工具&#xff0c;可以使用简单的语句来描述所有平台的安装(编译过程)。 能够输出各种各样的makefile或者project文件。cmake并不直接构建出最终的软件&#xff0c;而是产生其他工…

Web学习笔记

Web学习笔记 flask库前端基础超链接&#xff1a;空连接&#xff1a;图片&#xff1a;视频&#xff08;音频&#xff09;&#xff1a;嵌套使用列表表格格式化表格input表单系列 网络请求GET方式POST请求通过GET方式获取输入参数通过POST方式获取输入参数注册页面 CSS三种使用方式…

vue-组件通信之provide/inject

vue-组件通信之provide/inject 一般父传子用的都是props 但是如果我们想要实现的是爷爷传给孙子&#xff0c;再去用props就比较麻烦了&#xff0c;中间还会经过爸爸。 所以我们可以使用provide/inject&#xff0c;孙子就可以直接用爷爷的东西啦&#xff0c;provide不关心去处&…

MYSQL存储

注意&#xff1a; 1.如果没有指定的SESSION/GLOBAL&#xff0c;默认是SESSION&#xff0c;会话变量。 2.mysql服务重新启动之后&#xff0c;所设置的全局参数会失效&#xff0c;要想不失效&#xff0c;可以在/etc/my.cnf中配置。 变量 用户定义变量是用户根据需要自己定义变量…

MyBatis和MyBatis Plus的区别

文章目录 前言共同点各自的优势MyBatisMyBatis Plus各自的代码示例MyBatis 示例&#xff1a;实体类 User.java&#xff1a;MyBatis Mapper XML 配置文件 UserMapper.xml&#xff1a;MyBatis Mapper 接口 UserMapper.java&#xff1a;MyBatis 使用&#xff1a; MyBatis Plus 示例…

Redis队列stream,Redis多线程详解

Redis 目前最新版本为 Redis-6.2.6 &#xff0c;会以 CentOS7 下 Redis-6.2.4 版本进行讲解。 下载地址&#xff1a; https://redis.io/download 安装运行 Redis 很简单&#xff0c;在 Linux 下执行上面的 4 条命令即可 &#xff0c;同时前面的 课程已经有完整的视…

《尚品甄选》:后台系统——权限管理之分类和品牌管理,使用EasyExcel导入导出数据(debug一遍)

文章目录 一、分类管理1.1 表结构介绍1.2 分类列表查询 二、EasyExcel使用2.1 EasyExcel简介2.2 导出功能2.3 导入功能 三、品牌管理3.1 表结构介绍3.2 列表查询3.3 添加品牌3.4 修改品牌3.5 删除品牌 一、分类管理 分类管理就是对商品的分类数据进行维护。 1.1 表结构介绍 分…

缺省参数的声明和定义

首先&#xff0c;函数缺省参数不能同时出现在声明和定义中&#xff0c;如出现则报错&#xff1a; 声明和定义中同时出现缺省参数 ctrlb&#xff0c;编译报错&#xff0c;提示 “test"&#xff1a;重定义默认参数&#xff1a;参数1 编译报错 当函数的声明和定义中都出现…

第10关:基数排序

任务要求参考答案问答98 任务描述相关知识 基数排序算法编程要求测试说明 任务描述 本关任务&#xff1a;实现基数排序算法&#xff0c;并将乱序数列变成升序。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.基数排序算法。 基数排序算法 基数排序是按…

Node.js下载安装教程

一、下载安装包 1、百度网盘自提链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1Bbw895MtUgjlfZylPHCCxw 提取码&#xff1a;x89v 2、进入官网下载 https://nodejs.org/zh-cn/download/ 选择对应版本&#xff0c;我这里选的windows64位版本 二、安装程序 1、…

使用shell快速查看电脑曾经连接过的WiFi密码

此方法只能查看以前连接过的wifi名称和对应的密码 查看连接过的WiFi名称netsh wlan show profiles查看具体的WiFi名称netsh wlan show profile name"你的wifi名称" keyclear

2023 OI 总结

2023 O I 2023 \space OI 2023 OI ここは总 • 结です ここは总\space• \space结です ここは总 • 结です 我也不知道要写些什么&#xff0c;就随便写了 csp/s第一题10min出ac思路&#xff0c;结果写炸了qwq&#xff0c;被旁边的大哥影响稍微有点大&#xff0c;没调完第一题…

vivado综合分析与收敛技巧1

使用细化视图对 RTL 进行最优化 完成任意实现步骤后使用 report_timing 、 report_timing_summary 或 report_design_analysis 分析时序结果时&#xff0c; 您必须审查关键路径结构 &#xff0c; 了解是否可通过修改 RTL 、使用综合属性或者使用其他综合选项来更有效地将…

LeetCode.24两两交换链表中的节点

LeetCode.24两两交换链表中的节点 1.问题描述2.解题思路3.代码 1.问题描述 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示…

雷达公式实现(matlab)

雷达公式实现 代码来源&#xff1a;《雷达系统分析与设计(MATLAB版)(第三版)》 function [snr] radar_eq(pt,freq,g,sigma,b,nf,loss,range) % This program implements Eq.(1.63) %% Inputs:% pt——峰值功率&#xff0c;W% freq——雷达中心频率&#xff0c;Hz% g——天线…

IntelliJ IDEA 中有什么让你相见恨晚的技巧

一、条件断点 循环中经常用到这个技巧&#xff0c;比如&#xff1a;遍历1个大List的过程中&#xff0c;想让断点停在某个特定值。 参考上图&#xff0c;在断点的位置&#xff0c;右击断点旁边的小红点&#xff0c;会出来一个界面&#xff0c;在Condition这里填入断点条件即可&…

AI旅游:旅游行业的人工智能成熟艺术适应从实践到表现报告

今天分享的是AI系列深度研究报告&#xff1a;《AI旅游&#xff1a;旅游行业的人工智能成熟艺术适应从实践到表现报告》。 &#xff08;报告出品方&#xff1a;accenture&#xff09; 报告共计&#xff1a;25页 旅行还没有充分利用AI所能做的一 而旅游业比两年前强多了。公司…

如何通过Portal实现消息集成

在数字化时代浪潮下&#xff0c;信息的流通与交互已变得至关重要&#xff0c;不论是在企业内部日常协作&#xff0c;还是与外部客户的紧密沟通&#xff0c;信息的快速、准确、实时传递都成为了确保业务顺畅进行的关键因素、决策精准的核心要素。 为了满足这种日益增长的需求&a…