详解Docker如何在前端项目动态插入并使用变量
前言
根据项目需求，在实现登出功能时，需要根据测试环境和生产环境调用不同的登出URL。本文将介绍如何在Docker前端镜像中设置变量以及使用变量的方法。
解决办法
在生成前端容器的阶段，可以使用同一个镜像，根据不同的环境传入参数来创建不同的前端容器。下面将分享一个在容器执行阶段动态插入并使用变量的实例。
步骤
1.在根目录创建start.sh文件，文件内容如下:
#!/usr/bin/env sh cat /etc/nginx/nginx.conf nginx -g "daemon off;"
注: #!/usr/bin/env sh 并不是注释的意思，而是选择编译语言的意思。建议使用sh，因为bash可能不是每台服务器都安装的。
注： 为什么要加nginx -g "daemon off;"？
因为要让容器能持续运行，必须要有前台进程，这里将nginx转为前台进程。
2.在Dockerfile中复制start.sh，将其从容器外复制到容器内:
... COPY start.sh /app/start.sh
3.在根目录创建nginx.conf.template文件，首先从nginx.conf复制代码，然后在文件的http -> server下添加ENV_VARS占位符，代码如下:
http {
...
server {
.....
location /env.json {
default_type application/json;
return 200 '${ENV_VARS}';
}
}
}
4.在项目的服务器端创建一个获取变量的方法，代码如下：
type Env = {
logoutUrl?: string;
};
export async function getEnvironmentVariables() {
return request<Env>('/env.json', { method: 'GET' });
}
5.在项目代码中添加使用变量的方法，代码如下：
const logout = () => {
getEnvironmentVariables()
.then((data) => {
const logoutUrl = data?.logoutUrl;
if (logoutUrl) {
...
}
})
.catch((e) => {
...
});
};
6.在正常构建镜像之后，在生成容器时，可以通过环境变量传参来替换原前端nginx.conf.template文件中的ENV_VARS字符串:
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"}'
后言
这个设计使得在前端独立容器化部署时，能够通过环境变量解耦登出地址，避免了一次又一次的构建镜像工作量。
到此这篇关于详解Docker如何在前端项目动态插入并使用变量的文章就介绍到这了,更多相关Docker前端插入并使用变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了Docker不同网段下的容器互联的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要给大家介绍了关于Docker容器端口映射后突然无法连接的排查过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
docker-compose是docker提供的一个命令行工具，用来定义和运行由多个容器组成的应用，这篇文章主要介绍了使用docker-compose.yml构建镜像的方法,需要的朋友可以参考下2023-05-05
使用Docker方式启动tomcat,访问首页出现404的解决方案
这篇文章主要介绍了使用Docker方式启动tomcat,访问首页出现404的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要介绍了docker直接下载太慢,如何更换国内靠谱镜像源问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
Docker容器在运行期间有时可能会需要修改或者添加暴露的端口，但是有时候运行的容器又不想再另外建立一个新的镜像。接下来通过本文给大家分享Docker动态添加端口不需要重新建立镜像的方法，感兴趣的朋友一起看看吧2019-07-07
Grafana 是一个强大的开源监控和数据分析平台,它能够与各种数据源集成,并提供灵活的可视化和仪表盘功能,下面给大家分享Docker 中安装 Grafana 的基本步骤,感兴趣的朋友一起看看吧2024-01-01
Docker Desktop启动失败的解决(Docker failed to i
本文主要介绍了Docker Desktop启动失败的解决(Docker failed to initialize Docker Desktop is shutting down)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
使用Docker构建开发环境的方法步骤( Windows和mac)
利用Docker,我们可以做很多事情。所以本文就详细介绍了使用Docker构建开发环境的方法步骤，分为 Windows和mac版本，具有一定的参考价值，感兴趣的可以了解一下2021-12-12
这篇文章主要介绍了docker如何更改镜像问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论