本文分享前后端分離，容器化前端項(xiàng)目時(shí)動(dòng)態(tài)插入后端API基地址，這是一個(gè)很贊的實(shí)踐，解決了前端項(xiàng)目容器化過程中受制后端調(diào)用的尷尬。

尷尬從何而來

常見的web前后端分離：前后端分開部署，前端項(xiàng)目由nginx承載打包文件，反向代理請(qǐng)求。
應(yīng)用的某些部分必須是可配置的，比如API調(diào)用基地址， 前端打包時(shí)候統(tǒng)一插入該地址，最終形成chunk files，并由nginx承載。

# ------------------------------------------------------
# generate chunk files
# ------------------------------------------------------
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;"]

當(dāng)在Docker中打包前端，或許會(huì)嘗試用鏡像構(gòu)建參數(shù)Arg/Env來傳遞后端API調(diào)用基地址，但這樣是很不理想的：
打包時(shí)參數(shù)被統(tǒng)一插入，打包結(jié)果chunk file作為最終鏡像的一部分，導(dǎo)致最終的前端鏡像會(huì)與后端API地址強(qiáng)關(guān)聯(lián)。

“

或許你會(huì)針對(duì)不用的后端環(huán)境（canary、staging、production）構(gòu)建不同的前端鏡像，但這是一次又一次的工作量，并不是最佳實(shí)踐。

下面分享一個(gè)容器執(zhí)行階段動(dòng)態(tài)插入后端API基地址的實(shí)踐

前端獨(dú)立部署，動(dòng)態(tài)插入后端API基地址(in Docker)

我希望將API基地址延遲到生成容器階段(與構(gòu)建鏡像的過程解耦)， 這樣我就可以使用一個(gè)鏡像，針對(duì)不同的環(huán)境傳參形成不同的前端容器。

前端項(xiàng)目插入配置的腳本如下：

// FILE: set-env.ts
...
export const environment = {
  production: ${isProd},
apiBaseUrl: 'API_BASE_URL',
  version: 'v${require('../package.json').version}'
};
...

我們?cè)谇岸伺渲弥袑懭?code>API_BASE_URL占位符，按照既定流程前端打包；

Dockerfile ?CMD指令指示容器如何運(yùn)行：

• 用真實(shí)值替換前端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的內(nèi)容：

#!/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;"

正常構(gòu)建鏡像之后；現(xiàn)在生成容器時(shí)，可通過環(huán)境變量傳參替換原前端chunk files的API_BASE_URL字符串

docker build -t front .
docker run -p 80:80 -e API_BASE_URL=http://somebackend.com/api front

總結(jié)輸出

這是一個(gè)巧妙的設(shè)計(jì)，讓我們?cè)谇岸霜?dú)立容器化部署時(shí)能解耦后端API基地址，避免了一次又一次的構(gòu)建鏡像工作量。

Dockerfile CMD指令包裝的容器啟動(dòng)腳本：讓我們?cè)趎ginx承載前端打包文件之前，做一次字符串替換，成功將后端API基地址“延遲”到容器運(yùn)行階段。

關(guān)注我們
更多Java技術(shù)干貨

請(qǐng)關(guān)注Java后端編程公眾號(hào)