Vue ，React ，Angular多个服务器下部署同一个web项目,只需打一个包

前言：

有这样一个需求，需要在多个不同的服务器下部署同一个前端项目，（正常操作是每一台服务器都根据不同的IP地址build一个包依次部署，非常繁琐，因此简化为多个环境只需要用打一个包即可）

解决方案：首先需要服务器设置系统环境变量，在打包后部署到服务器，通过运行.sh文件来获取环境变量set到项目中

以下是vue项目为例， React ，Angular 均可以使用

1，在项目根目录创建 run.sh 文件

注解：

第一行 apiUrl为当前系统配置的系统环境变量名称

第二行 将获取到的ip地址赋值到打包后的dist文件下index.html下的body中

2，项目中使用

3，将打包后的dist文件上传到服务器后，运行 run.sh，运行完成，页面就可以正常请求啦~

运行命令如下，也可手动运行

重要：需要在部署的服务器提前配置系统环境变量API_URL，否则获取不到

本篇配置不在docker内实现build，而是外部build

更多关于dockerfile指令详解

nginx镜像有一个默认的配置文件 default.conf

默认的配置有一个问题, 在非首页的路由页面刷新就会报404错误

我们使用 react-router 作为路由管理，在开发端的express服务器下运行和测试表现均正常，部署到线上的nginx服务器后，还需要对该应用在nginx的配置里作相应调整，否则浏览器将不能正常刷新，表现为页面不显示或页面跳转错误等异常。原因在于这些react应用在运行时会更改浏览器uri而又不真的希望服务器对这些uri去作响应，如果此时刷新浏览器，服务器收到浏览器发来的uri就去寻找资源，这个uri在服务器上是没有对应资源，结果服务器因找不到资源就发送403错误标志给浏览器。所以，我们要做的调整是：浏览器在使用这个react应用期间，无论uri更改与否，服务器都发回index.html这个页面就行。

docker使用镜像

打开浏览器，访问 localhost:80。出现如下页面表示工作正常，测试通过。

参考文档： https://segmentfault.com/a/1190000010415158

---