※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
當全世界的人們隨著網路時代而改變向上時您還停留在『網站美醜不重要』的舊有思維嗎？機會是留給努力改變現況的人們，別再浪費一分一秒可以接觸商機的寶貴時間！
開門見山，本文分享前後端分離，容器化前端項目時動態插入後端API基地址，這是一個很贊的實踐，解決了前端項目容器化過程中受制後端調用的尷尬。
尷尬從何而來
常見的web前後端分離：前後端分開部署，前端項目由nginx承載打包文件，反向代理請求。
應用的某些部分必須是可配置的，比如API調用基地址，
前端打包的時候需要統一插入該地址形成完整chunk files。
# ------------------------------------------------------
# generate chunk file
# ------------------------------------------------------
FROM node:10-alpine as builder
# install and cache app dependencies
COPY package.json package-lock.json ./
RUN npm install && mkdir /react-frontend && mv ./node_modules ./react-frontend
WORKDIR /react-frontend
COPY . .
RUN npm run build
# ------------------------------------------------------
# Production Build
# ------------------------------------------------------
FROM nginx:latest
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=builder /react-frontend/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
當在Docker中打包前端，或許會嘗試用鏡像構建參數Arg/Env來傳遞後端API調用基地址，但這樣是很不理想的：
打包時參數被統一插入，打包結果chunk files作為最終鏡像的一部分，導致最終的前端鏡像會與後端API地址強關聯。
或許你會針對不用的後端環境（canary、staging、production）構建不同的前端鏡像，但這是一次又一次的工作量，並不是最佳實踐。
下面分享一個容器執行階段動態插入後端API基地址的實踐
前端獨立部署，動態插入後端API基地址(in Docker)
我希望將API基地址延遲到生成容器階段(與構建鏡像的過程解耦)， 這樣我就可以使用一個鏡像，針對不同的環境傳參形成不同的前端容器。
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
透過資料庫的網站架設建置，建立公司的形象或購物系統，並提供最人性化的使用介面，讓使用者能即時接收到相關的資訊
前端項目插入配置的腳本如下：
// FILE: set-env.ts
...
export const environment = {
production: ${isProd},
apiBaseUrl: 'API_BASE_URL',
version: 'v${require('../package.json').version}'
};
...
我們在前端配置中寫入API_BASE_URL佔位符，按照既定流程前端打包；
Dockerfile CMD指令指示容器如何運行：
- 用真實值替換前端chunk files中原插入的
API_BASE_URL佔位符 - 使用nginx承載替換后的chunk files
# FILE: Dockerfile
...
EXPOSE 80
COPY --from=builder /react-frontend/replace_api_url.sh /
CMD ["sh", "replace_api_url.sh"]
下面是replace_api_url.sh的內容：
#!/usr/bin/env sh
find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,API_BASE_URL,'"$API_BASE_URL"',g' {} \;
nginx -g "daemon off;"
正常構建鏡像之後；現在生成容器時，可通過環境變量傳參替換原前端chunk files的API_BASE_URL字符串
docker build -t front .
docker run -p 80:80 -e API_BASE_URL=http://somebackend.com/api front
總結輸出
這是一個巧妙的設計，讓我們在前端獨立容器化部署時,能解耦後端API基地址，避免了一次又一次的構建鏡像工作量。
Dockerfile CMD指令包裝的容器啟動腳本：讓我們在nginx承載前端打包文件之前，做一次字符串替換，成功將後端API基地址“延遲”到容器運行階段。
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
※想知道最厲害的網頁設計公司嚨底家"!
RWD（響應式網頁設計）是透過瀏覽器的解析度來判斷要給使用者看到的樣貌