快捷導(dǎo)航

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

更新時(shí)間：2024年04月02日 11:13:29 作者：Evan不懂前端

這篇文章主要為大家詳細(xì)介紹如何在Docker前端鏡像中設(shè)置變量以及使用變量的方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前言

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

解決辦法

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

步驟

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，因?yàn)閎ash可能不是每臺(tái)服務(wù)器都安裝的。

注：為什么要加nginx -g "daemon off;"？

因?yàn)橐屓萜髂艹掷m(xù)運(yùn)行，必須要有前臺(tái)進(jìn)程，這里將nginx轉(zhuǎn)為前臺(tái)進(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.在項(xiàng)目的服務(wù)器端創(chuàng)建一個(gè)獲取變量的方法，代碼如下：

type Env = {
  logoutUrl?: string;
};

export async function getEnvironmentVariables() {
  return request<Env>('/env.json', { method: 'GET' });
}

5.在項(xiàng)目代碼中添加使用變量的方法，代碼如下：

const logout = () => {
    getEnvironmentVariables()
      .then((data) => {
        const logoutUrl = data?.logoutUrl;
        if (logoutUrl) {
         ...
        }
      })
      .catch((e) => {
        ...
      });
  };

6.在正常構(gòu)建鏡像之后，在生成容器時(shí)，可以通過環(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格式，需要將變量值用單引號(hào)包含，變量值內(nèi)的屬性值使用雙引號(hào)。例如：ENV_VARS='{"logoutUrl": "xxxxxx"}'

后言

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

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

您可能感興趣的文章: