怎么在前端项目中动态插入后端API基地址

发布时间:2021-12-13 15:39:46 作者:iii
来源:亿速云 阅读:155

这篇文章主要介绍“怎么在前端项目中动态插入后端API基地址”,在日常操作中,相信很多人在怎么在前端项目中动态插入后端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


# ------------------------------------------------------
# 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;"]
 
怎么在前端项目中动态插入后端API基地址  

当在Docker中打包前端,或许会尝试用镜像构建参数Arg/Env来传递后端API调用基地址,但这样是很不理想的:
打包时参数被统一插入,打包结果chunk file作为最终镜像的一部分,导致最终的前端镜像会与后端API地址强关联。

或许你会针对不用的后端环境(canary、staging、production)构建不同的前端镜像,但这是一次又一次的工作量,并不是最佳实践。

下面分享一个容器执行阶段动态插入后端API基地址的实践

 

前端独立部署,动态插入后端API基地址(in Docker)

我希望将API基地址延迟到生成容器阶段(与构建镜像的过程解耦), 这样我就可以使用一个镜像,针对不同的环境传参形成不同的前端容器。

怎么在前端项目中动态插入后端API基地址  

怎么在前端项目中动态插入后端API基地址前端项目插入配置的脚本如下:

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

我们在前端配置中写入API_BASE_URL占位符,按照既定流程前端打包;

怎么在前端项目中动态插入后端API基地址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;"
 

怎么在前端项目中动态插入后端API基地址正常构建镜像之后;现在生成容器时,可通过环境变量传参替换原前端chunk files的API_BASE_URL字符串

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

到此,关于“怎么在前端项目中动态插入后端API基地址”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. php是前端还是后端?
  2. javaee是前端还是后端

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

api

上一篇:Prometheus怎么监控Docker Swarm集群

下一篇:数据库中NESTED_TABLE_SET_REFS hint有什么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》