问题:
在现有的前后端分离开发模式下,前端(vue/react)访问后端地址通常是在前端相应的配置文件写死的。随着容器化的不断发展,前后端如果是以容器化的方式进行部署,则前端访问后端的地址是可以做成环境变量的,做成环境变量后,整体配置更加灵活,
但是对于前端以websocket访问后端来说,由于ws特殊的性质,其无法直接将ws地址做成容器化环境变量,这样就会导致在代码中必须写死改地址,对于不同的代码分支来构建镜像,每次合代码都需要更改这个地址异常繁琐。
那么如何将websocket的地址做成容器化环境变量的形式呢?
本文提供了两种方法
1.将websocket的请求地址做成后端服务容器化环境变量,这样可保证每次用户自定义改地址。同时后端增加一个接口,用于前端查询该websocket请求地址,也就是说每次前端在发起websocket请求前,先调用后端接口获取该地址,然后根据拿到的地址再进行ws请求。
第一步:将websocket请求地址做成后端环境变量
第二步:后端服务增加一个接口,用于前端调用查询该地址
第三步:前端在ws请求前,先调用该接口查询该地址,然后根据后端反馈的地址进行请求
2.如果用户采用nacos作为配置中心,则可将其作为参数定义到nacos中。具体流程与1相同。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。