应用容器化解决前后端websocket连接问题

问题：

在现有的前后端分离开发模式下，前端（vue/react）访问后端地址通常是在前端相应的配置文件写死的。随着容器化的不断发展，前后端如果是以容器化的方式进行部署，则前端访问后端的地址是可以做成环境变量的，做成环境变量后，整体配置更加灵活，

但是对于前端以websocket访问后端来说，由于ws特殊的性质，其无法直接将ws地址做成容器化环境变量，这样就会导致在代码中必须写死改地址，对于不同的代码分支来构建镜像，每次合代码都需要更改这个地址异常繁琐。

那么如何将websocket的地址做成容器化环境变量的形式呢？

本文提供了两种方法

1.将websocket的请求地址做成后端服务容器化环境变量，这样可保证每次用户自定义改地址。同时后端增加一个接口，用于前端查询该websocket请求地址，也就是说每次前端在发起websocket请求前，先调用后端接口获取该地址，然后根据拿到的地址再进行ws请求。

第一步：将websocket请求地址做成后端环境变量

第二步：后端服务增加一个接口，用于前端调用查询该地址

第三步：前端在ws请求前，先调用该接口查询该地址，然后根据后端反馈的地址进行请求

2.如果用户采用nacos作为配置中心，则可将其作为参数定义到nacos中。具体流程与1相同。