Docker部署前端,動態配置后端地址

本文介紹了使用Docker環境變量動態配置nginx。采用的是通過docker?run?-e?xxxx=xxx先往容器注入環境變量,然后進一步通過envsubst指令將環境變量寫入到conf文件中,實現動態配置文件內容。

背景

前后端分離的架構下,經常會用到nginx反向代理來解決跨域問題。部署時,同一份前端代碼有時候會根據開發環境不同,切換不同的后端接口地址進行代理,或者會部署到不同的環境中。這些都需要配置不同的后端地址,想法是打包好的鏡像不需要改動,部署到不同的環境時,啟動docker容器時,注入不同的后端地址。

實現

以前端打包好的dist文件夾開始,dist文件夾同級放Dockerfile和nginx.tmpl文件,

Dockerfile文件內容

FROM nginx:alpineCOPY dist/ /usr/share/nginx/htmlCOPY nginx.tmpl /etc/nginx/conf.dEXPOSE 80WORKDIR /etc/nginx/conf.dENTRYPOINT envsubst '$APP_ROOT' < nginx.tmpl > default.conf && cat default.conf && nginx -g 'daemon off;'

?nginx.tmpl文件內容

server {listen 80;location / {root /usr/share/nginx/html;try_files $uri $uri/ /index.html;index index.html;}location /api/ {proxy_read_timeout 200s;proxy_send_timeout 200s;proxy_pass  $APP_ROOT;proxy_set_header Host $host:$server_port;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;}
}

這里實現環境變量注入的核心原理是利用linux自帶的envsubst指令。envsubst '$APP_ROOT' < nginx.tmpl作用是取環境的$APP_ROOT的值注入到nginx.tmpl模板里對應的位置,然后后半句> default.conf是將替換好變量后的模板內容寫入到docker容器內/etc/nginx/conf.d文件夾下的default.conf文件里。cat default.conf這句話方便我們查看nginx的配置內容,也可以不加。

執行docker build -t xxxxx:vvv .打包鏡像

執行docker run -e APP_ROOT=http://xxx.xxx.xxx.xxx:yyy/ xxxxx:vvv 運行容器,通過-e將后端服務地址通過APP_ROOT環境變量注入

通過docker logs xxxxxx 查看docker日志,可以看到通過cat default.conf輸出的內容,可以看到nginx.tmpl里面的$APP_ROOT被注入的環境變量替換掉了。

說明

鏡像的基礎鏡像nginx:alpine中,nginx的配置文件在/etc/nginx/nginx.conf文件,打開查看內容,

可以看到include這個,包含了所有conf.d目錄下的所有conf文件,所以我們修改的文件放在了conf.d目錄下。

另外還有一點很重要,docker啟動時的命令行注入的環境變量-e APP_ROOT=http://xxx.xxx.xxx.xxx:yyy/,一定要以/結尾,否則,轉發到后端時,不會把/api前綴去掉,我一開始沒有注意這個細節問題,被困擾了很長時間才搞定。這兒也可以用更詳細的rewrite實現。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/34999.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/34999.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/34999.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

粉末冶金5G智能工廠工業物聯數字孿生平臺,推進制造業數字化轉型

粉末冶金5G智能工廠工業物聯數字孿生平臺&#xff0c;推進制造業數字化轉型。在數字化浪潮席卷全球的今天&#xff0c;制造業的數字化轉型已然成為不可逆轉的趨勢。粉末冶金行業&#xff0c;作為制造業的重要一環&#xff0c;亦需緊跟時代步伐&#xff0c;以5G智能工廠、工業物…

【SpringSecurity】認證與鑒權框架SpringSecurity——授權

目錄 權限系統的必要性常見的權限管理框架SpringSecurity授權基本流程準備腳本限制訪問資源所需權限菜單實體類和Mapper封裝權限信息封裝認證/鑒權失敗處理認證失敗封裝鑒權失敗封裝配置SpringSecurity 過濾器跨域處理接口添加鑒權hasAuthority/hasAnyAuthorityhasRole/? hasA…

華為HCIP Datacom H12-821 卷10

1.多選題 以下哪些動態路由協議可以應用在 IPv6 網絡? A、Is- Is B、BGP6 C、IS-ISv6 D、OSPFv3 正確答案: A,D 解析: 幾乎每個動態路由協議都支持IPv6,但是每個協議支持IPv6的時候的叫法不相同。支持IPv6的RIP協議,叫做RIPng;支持IPv6的OSPF協議,叫做OSPFv3;支持…

針對知識圖譜使用 Mistral-7b 從簡歷中提取實體

翻譯&#xff1a;“Entity Extraction from Resume using Mistral-7b for Knowledge Graphs” | by Tejpal Kumawat | Feb, 2024 | Medium[1] 在快速發展的自然語言處理&#xff08;NLP&#xff09;領域&#xff0c;從非結構化文本源中準確提取和分析信息的能力變得越來越重要。…

Python教程:認識一下print函數

print() 是 Python 中一個非常基礎但功能強大的函數&#xff0c;用于將數據輸出到標準輸出&#xff08;通常是控制臺&#xff09;或文件。本文我們一起聊一下這個“平凡”的print函數。 原理 print() 函數的原理相對簡單&#xff0c;它接受一個或多個參數&#xff0c;并將這些…

ravynOS 0.5.0 發布 - 基于 FreeBSD 的 macOS 兼容開源操作系統

ravynOS 0.5.0 發布 - 基于 FreeBSD 的 macOS 兼容開源操作系統 ravynOS - 一個旨在提供 macOS 的精致性和 FreeBSD 的自由度的操作系統 請訪問原文鏈接&#xff1a;https://sysin.org/blog/ravynos/&#xff0c;查看最新版。原創作品&#xff0c;轉載請保留出處。 作者主頁…

snakeyaml從1.x升級2.x的方案

一、背景 因公司漏洞掃描&#xff0c;發現SnakeYAML 反序列化漏洞(CVE-2022-1471)&#xff0c;所以要求對SnakYaml進行升級。 因項目中未直接引用snakyaml包&#xff0c;經分析是springboot引用的這個包。但是在這個項目中&#xff0c;springboot用的版本是2.3.12.RELEASE版本…

睡眠剝奪對記憶鞏固的神經生物學影響

近期&#xff0c;《自然》雜志刊載的研究揭示了睡眠不足對記憶相關神經信號的不利影響&#xff0c;強調了即使在后續恢復充分睡眠的情況下&#xff0c;這種損害亦難以完全逆轉。 神經元作為大腦的基本功能單位&#xff0c;其活動并非孤立進行&#xff0c;而是通過復雜的網絡連接…

QT拖放事件之四:自定義拖放操作-利用QDrag來拖動完成數據的傳輸-案例demo

1、核心代碼 #include "Widget.h" #include "ui_Widget.h" #include "MyButton.h"Widget::Widget(QWidget *parent): QWidget

CSS3 分頁

CSS3 分頁 分頁是網頁設計中常見的一種布局方式&#xff0c;它允許將內容分布在多個頁面中&#xff0c;從而提高用戶體驗和網站的可管理性。CSS3 提供了多種靈活的方式來設計分頁&#xff0c;使得開發者能夠創建既美觀又實用的分頁導航。本文將詳細介紹如何使用 CSS3 來創建和…

python 正則表達式提取字符串

以某個字符開始、某個字符結束&#xff0c;期待的提取結果包含首末字符串 提取公式&#xff1a;a re.findall(“開始字符串.*末字符串”,str) 以某個字符開始、某個字符結束&#xff0c;期待的提取結果不包含末字符串&#xff0c;但包含首字符串 提取公式&#xff1a;a re.…

Cesium--旋轉3dtiles

以下代碼來自Cesium 論壇&#xff1a;3DTileset rotation - CesiumJS - Cesium Community 在1.118中測試可行&#xff0c;可直接在Sandcastle中運行&#xff1a; const viewer new Cesium.Viewer("cesiumContainer", {terrain: Cesium.Terrain.fromWorldTerrain()…

機器學習課程復習——線性回歸

Q&#xff1a;回歸和分類的區別&#xff1f; 回歸是連續的&#xff0c;分類是離散的 Q:用最小二乘法對線性回歸模型進行參數估計思路 例題

排序。。。

1. 掌握常用的排序方法&#xff0c;并掌握用高級語言實現排序算法的方法&#xff1b; 2. 深刻理解排序的定義和各種排序方法的特點&#xff0c;并能加以靈活應用&#xff1b; 3. 了解各種方法的排序過程及其時間復雜度的分析方法。 編程實現如下功能&#xff1a; &#xff08;1…

Makefile中error函數的用法

在 Makefile 中&#xff0c;error 函數是一個特殊的函數&#xff0c;用于在執行過程中生成一個錯誤消息并終止 Makefile 的執行。它的基本語法如下&#xff1a; $(error error-message)其中&#xff0c;error-message 是一個字符串&#xff0c;表示要顯示的錯誤消息。當 Makef…

vue+three.js渲染3D模型

安裝three.js: npm install three 頁面部分代碼&#xff1a; <div style"width: 100%; height: 300px; position: relative;"><div style"height: 200px; background-color: white; width: 100%; position: absolute; top: 0;"><div id&…

【繞過無限Debugger】

文章目錄 引言無限Debugger的工作原理繞過無限Debugger的常用技巧條件斷點法置空法代碼修改與加密 引言 在Web開發中&#xff0c;debugger語句是一種強大的JavaScript功能&#xff0c;允許開發者在代碼中設置斷點&#xff0c;便于調試和理解代碼執行流程。然而&#xff0c;這一…

【文末附gpt升級秘笈】程序的“通用性”與“過度設計”的困境

程序的“通用性”與“過度設計”的困境 四、解決方案的深入闡述 &#xff08;一&#xff09;明確需求和目標&#xff1a;需求驅動設計 在軟件開發的初期&#xff0c;我們需要與業務團隊緊密合作&#xff0c;深入了解項目的實際需求和目標。這不僅包括明確的功能需求&#xf…

filelist中+incdir+的用法

在大多數 Verilog 編譯器&#xff08;如 VCS、ModelSim/Questa、Verilator&#xff09;中&#xff0c;使用 incdir 選項指定包含路徑后&#xff0c;仍然需要在 filelist 文件中列出每一個 Verilog 源文件。incdir 選項僅告訴編譯器在特定目錄中查找頭文件&#xff08;例如 .vh …