前端如何调用后端接口_前后端分离，如何在前端项目中动态插入后端API基地址？...

本文分享前后端分离，容器化前端项目时动态插入后端API基地址，这是一个很赞的实践，解决了前端项目容器化过程中受制后端调用的尴尬。

尴尬从何而来

常见的web前后端分离：前后端分开部署，前端项目由nginx承载打包文件，反向代理请求。
应用的某些部分必须是可配置的，比如API调用基地址， 前端打包时候统一插入该地址，最终形成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


# ----------