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怎么在前端项目动态插入并使用变量