欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Docker如何在前端項目動態(tài)插入并使用變量

 更新時間:2024年04月02日 11:13:29   作者:Evan不懂前端  
這篇文章主要為大家詳細(xì)介紹如何在Docker前端鏡像中設(shè)置變量以及使用變量的方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前言

根據(jù)項目需求,在實現(xiàn)登出功能時,需要根據(jù)測試環(huán)境和生產(chǎn)環(huán)境調(diào)用不同的登出URL。本文將介紹如何在Docker前端鏡像中設(shè)置變量以及使用變量的方法。

解決辦法

在生成前端容器的階段,可以使用同一個鏡像,根據(jù)不同的環(huán)境傳入?yún)?shù)來創(chuàng)建不同的前端容器。下面將分享一個在容器執(zhí)行階段動態(tài)插入并使用變量的實例。

步驟

1.在根目錄創(chuàng)建start.sh文件,文件內(nèi)容如下:

#!/usr/bin/env sh

cat /etc/nginx/nginx.conf
nginx -g "daemon off;"

注: #!/usr/bin/env sh 并不是注釋的意思,而是選擇編譯語言的意思。建議使用sh,因為bash可能不是每臺服務(wù)器都安裝的。

注: 為什么要加nginx -g "daemon off;"?

因為要讓容器能持續(xù)運行,必須要有前臺進(jìn)程,這里將nginx轉(zhuǎn)為前臺進(jìn)程。

2.在Dockerfile中復(fù)制start.sh,將其從容器外復(fù)制到容器內(nèi):

...
COPY start.sh /app/start.sh

3.在根目錄創(chuàng)建nginx.conf.template文件,首先從nginx.conf復(fù)制代碼,然后在文件的http -> server下添加ENV_VARS占位符,代碼如下:

http {
    ...
    server {
        .....
        location /env.json {
            default_type application/json;
            return 200 '${ENV_VARS}';
        }
    }
}

4.在項目的服務(wù)器端創(chuàng)建一個獲取變量的方法,代碼如下:

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.在正常構(gòu)建鏡像之后,在生成容器時,可以通過環(huán)境變量傳參來替換原前端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

注:如果替換的環(huán)境變量是JSON格式,需要將變量值用單引號包含,變量值內(nèi)的屬性值使用雙引號。例如:ENV_VARS='{"logoutUrl": "xxxxxx"}'

后言

這個設(shè)計使得在前端獨立容器化部署時,能夠通過環(huán)境變量解耦登出地址,避免了一次又一次的構(gòu)建鏡像工作量。

到此這篇關(guān)于詳解Docker如何在前端項目動態(tài)插入并使用變量的文章就介紹到這了,更多相關(guān)Docker前端插入并使用變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Docker不同網(wǎng)段下的容器互聯(lián)的實現(xiàn)

    Docker不同網(wǎng)段下的容器互聯(lián)的實現(xiàn)

    本文主要介紹了Docker不同網(wǎng)段下的容器互聯(lián)的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • Docker容器端口映射后突然無法連接的排查過程

    Docker容器端口映射后突然無法連接的排查過程

    這篇文章主要給大家介紹了關(guān)于Docker容器端口映射后突然無法連接的排查過程,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 使用docker-compose.yml構(gòu)建鏡像的方法

    使用docker-compose.yml構(gòu)建鏡像的方法

    docker-compose是docker提供的一個命令行工具,用來定義和運行由多個容器組成的應(yīng)用,這篇文章主要介紹了使用docker-compose.yml構(gòu)建鏡像的方法,需要的朋友可以參考下
    2023-05-05
  • 使用Docker方式啟動tomcat,訪問首頁出現(xiàn)404的解決方案

    使用Docker方式啟動tomcat,訪問首頁出現(xiàn)404的解決方案

    這篇文章主要介紹了使用Docker方式啟動tomcat,訪問首頁出現(xiàn)404的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2025-03-03
  • docker直接下載太慢,如何更換國內(nèi)靠譜鏡像源

    docker直接下載太慢,如何更換國內(nèi)靠譜鏡像源

    這篇文章主要介紹了docker直接下載太慢,如何更換國內(nèi)靠譜鏡像源問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • Docker動態(tài)添加端口不需要重新建立鏡像的方法

    Docker動態(tài)添加端口不需要重新建立鏡像的方法

    Docker容器在運行期間有時可能會需要修改或者添加暴露的端口,但是有時候運行的容器又不想再另外建立一個新的鏡像。接下來通過本文給大家分享Docker動態(tài)添加端口不需要重新建立鏡像的方法,感興趣的朋友一起看看吧
    2019-07-07
  • 使用Docker快速安裝grafana的基本步驟

    使用Docker快速安裝grafana的基本步驟

    Grafana 是一個強(qiáng)大的開源監(jiān)控和數(shù)據(jù)分析平臺,它能夠與各種數(shù)據(jù)源集成,并提供靈活的可視化和儀表盤功能,下面給大家分享Docker 中安裝 Grafana 的基本步驟,感興趣的朋友一起看看吧
    2024-01-01
  • Docker Desktop啟動失敗的解決(Docker failed to initialize Docker Desktop is shutting down)

    Docker Desktop啟動失敗的解決(Docker failed to i

    本文主要介紹了Docker Desktop啟動失敗的解決(Docker failed to initialize Docker Desktop is shutting down),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • 使用Docker構(gòu)建開發(fā)環(huán)境的方法步驟(?Windows和mac)

    使用Docker構(gòu)建開發(fā)環(huán)境的方法步驟(?Windows和mac)

    利用Docker,我們可以做很多事情。所以本文就詳細(xì)介紹了使用Docker構(gòu)建開發(fā)環(huán)境的方法步驟,分為?Windows和mac版本,具有一定的參考價值,感興趣的可以了解一下
    2021-12-12
  • docker如何更改鏡像

    docker如何更改鏡像

    這篇文章主要介紹了docker如何更改鏡像問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08

最新評論