詳解Docker如何在前端項(xiàng)目動(dòng)態(tài)插入并使用變量
前言
根據(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ù)來(lái)創(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 并不是注釋的意思,而是選擇編譯語(yǔ)言的意思。建議使用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í),可以通過(guò)環(huán)境變量傳參來(lái)替換原前端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í),能夠通過(guò)環(huán)境變量解耦登出地址,避免了一次又一次的構(gòu)建鏡像工作量。
到此這篇關(guān)于詳解Docker如何在前端項(xiàng)目動(dòng)態(tài)插入并使用變量的文章就介紹到這了,更多相關(guān)Docker前端插入并使用變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Docker不同網(wǎng)段下的容器互聯(lián)的實(shí)現(xiàn)
本文主要介紹了Docker不同網(wǎng)段下的容器互聯(lián)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01Docker容器端口映射后突然無(wú)法連接的排查過(guò)程
這篇文章主要給大家介紹了關(guān)于Docker容器端口映射后突然無(wú)法連接的排查過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03使用docker-compose.yml構(gòu)建鏡像的方法
docker-compose是docker提供的一個(gè)命令行工具,用來(lái)定義和運(yùn)行由多個(gè)容器組成的應(yīng)用,這篇文章主要介紹了使用docker-compose.yml構(gòu)建鏡像的方法,需要的朋友可以參考下2023-05-05使用Docker方式啟動(dòng)tomcat,訪問(wèn)首頁(yè)出現(xiàn)404的解決方案
這篇文章主要介紹了使用Docker方式啟動(dòng)tomcat,訪問(wèn)首頁(yè)出現(xiàn)404的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03docker直接下載太慢,如何更換國(guó)內(nèi)靠譜鏡像源
這篇文章主要介紹了docker直接下載太慢,如何更換國(guó)內(nèi)靠譜鏡像源問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05Docker動(dòng)態(tài)添加端口不需要重新建立鏡像的方法
Docker容器在運(yùn)行期間有時(shí)可能會(huì)需要修改或者添加暴露的端口,但是有時(shí)候運(yùn)行的容器又不想再另外建立一個(gè)新的鏡像。接下來(lái)通過(guò)本文給大家分享Docker動(dòng)態(tài)添加端口不需要重新建立鏡像的方法,感興趣的朋友一起看看吧2019-07-07Docker Desktop啟動(dòng)失敗的解決(Docker failed to i
本文主要介紹了Docker Desktop啟動(dòng)失敗的解決(Docker failed to initialize Docker Desktop is shutting down),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03使用Docker構(gòu)建開(kāi)發(fā)環(huán)境的方法步驟(?Windows和mac)
利用Docker,我們可以做很多事情。所以本文就詳細(xì)介紹了使用Docker構(gòu)建開(kāi)發(fā)環(huán)境的方法步驟,分為?Windows和mac版本,具有一定的參考價(jià)值,感興趣的可以了解一下2021-12-12