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

 更新时间:2024年04月02日 11:13:29   作者:Evan不懂前端  
这篇文章主要为大家详细介绍如何在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-compose安装minio

    详解docker-compose安装minio

    这篇文章主要介绍了docker-compose安装minio的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 详解Dockerfile 中的 COPY 与 ADD 命令

    详解Dockerfile 中的 COPY 与 ADD 命令

    Dockerfile 中提供了两个非常相似的命令 COPY 和 ADD,本文尝试解释这两个命令的基本功能,以及其异同点,然后总结其各自适合的应用场景。感兴趣的朋友跟随小编一起看看吧
    2018-09-09
  • docker搭建php+nginx+swoole+mysql+redis环境的方法

    docker搭建php+nginx+swoole+mysql+redis环境的方法

    这篇文章主要介绍了docker搭建php+nginx+swoole+mysql+redis环境的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • docker-maven-plugin打包镜像并上传到私有仓库

    docker-maven-plugin打包镜像并上传到私有仓库

    本文主要介绍了docker-maven-plugin打包镜像并上传到私有仓库,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Docker容器/bin/bash start.sh无法找到not found问题解决

    Docker容器/bin/bash start.sh无法找到not found问题解决

    最近在学习联系中遇到一个问题,百度后发现这个需求还是挺常见的,所以下面这篇文章主要给大家介绍了关于Docker容器/bin/bash start.sh无法找到not found问题的解决方法,需要的朋友可以参考下
    2022-08-08
  • docker镜像的导入和导出的实现

    docker镜像的导入和导出的实现

    这篇文章主要介绍了docker镜像的导入和导出的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Docker搭建私有仓库(registry与Harbor)的实现

    Docker搭建私有仓库(registry与Harbor)的实现

    这篇文章主要介绍了Docker搭建私有仓库(registry与Harbor)的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 如何修改Docker镜像的映射端口号

    如何修改Docker镜像的映射端口号

    这篇文章主要介绍了如何修改Docker镜像的映射端口号问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • docker 如何搭建私有仓库(ubuntu 14.04,Docker版本1.6.4)详细介绍

    docker 如何搭建私有仓库(ubuntu 14.04,Docker版本1.6.4)详细介绍

    这篇文章主要介绍了docker 如何搭建私有仓库(ubuntu 14.04,Docker版本1.6.4)详细介绍的相关资料,需要的朋友可以参考下
    2017-01-01
  • Dockerfile中的ENV指令的具体使用详解

    Dockerfile中的ENV指令的具体使用详解

    这篇文章主要介绍了Dockerfile中的ENV指令的具体使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论