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

老战士

前言

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

解决办法

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

步骤

1.在根目录创建start.sh文件，文件内容如下:

1. #!/usr/bin/env sh
   
2. 
   
3. cat /etc/nginx/nginx.conf
   
4. nginx -g "daemon off;"

复制代码

注: #!/usr/bin/env sh 并不是注释的意思，而是选择编译语言的意思。建议使用sh，因为bash可能不是每台服务器都安装的。
注： 为什么要加nginx -g "daemon off;"？
因为要让容器能持续运行，必须要有前台进程，这里将nginx转为前台进程。
2.在Dockerfile中复制start.sh，将其从容器外复制到容器内:

1. ...
   
2. COPY start.sh /app/start.sh

复制代码

3.在根目录创建nginx.conf.template文件，首先从nginx.conf复制代码，然后在文件的http -> server下添加ENV_VARS占位符，代码如下:

1. http {
   
2.     ...
   
3.     server {
   
4.         .....
   
5.         location /env.json {
   
6.             default_type application/json;
   
7.             return 200 '${ENV_VARS}';
   
8.         }
   
9.     }
   
10. }

复制代码

4.在项目的服务器端创建一个获取变量的方法，代码如下：

1. type Env = {
   
2.   logoutUrl?: string;
   
3. };
   
4. 
   
5. export async function getEnvironmentVariables() {
   
6.   return request<Env>('/env.json', { method: 'GET' });
   
7. }

复制代码

5.在项目代码中添加使用变量的方法，代码如下：

1. const logout = () => {
   
2.     getEnvironmentVariables()
   
3.       .then((data) => {
   
4.         const logoutUrl = data?.logoutUrl;
   
5.         if (logoutUrl) {
   
6.          ...
   
7.         }
   
8.       })
   
9.       .catch((e) => {
   
10.         ...
    
11.       });
    
12.   };

复制代码

6.在正常构建镜像之后，在生成容器时，可以通过环境变量传参来替换原前端nginx.conf.template文件中的ENV_VARS字符串:

1. docker run -e ENV_VARS='{"logoutUrl": "xxxxxx"}' --name test -p 81:8000 -itd swr.test:v0.0.31
   
2. 
   
3. sh start.sh

复制代码

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

后言

这个设计使得在前端独立容器化部署时，能够通过环境变量解耦登出地址，避免了一次又一次的构建镜像工作量。
到此这篇关于详解Docker如何在前端项目动态插入并使用变量的文章就介绍到这了,更多相关Docker前端插入并使用变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/server/319124f3i.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！