前端开发本地搭建nginx服务相关操作

问题引入：

前端本地开发，处理bug等，需要连接不同后端或者测试环境服务，前端切换vue.config文件，然后重启耗费较长时间

解决方案：

利用nginx代理，以及启动重载速度快，解决此问题

1.vue.config文件devServe代理修改为本地端口，例如代理本地8080端口

devServer: {port: 8189,open: true,proxy: {'/xxx/api/': {target: 'http://127.0.0.1:8080/localsystem',changeOrigin: true,ws: true,},},},

2.配置本地nginx代理地址，监听本地8080端口

server    {listen    8080;location /localsystem {
            proxy_set_header Host $proxy_host;# 测试环境# proxy_pass http://10.12.xxx.xx:xxx/;
      # 后台1proxy_pass http://10.12.xxx.xx:xxx/;
      # 后台2# proxy_pass http://10.12.xxx.xx:xxx/;
        }}

3.启动nginx

start nginx

后续切换环境只用修改nginx.config监听的端口与服务地址。可同时支持多个项目，监听多个端口，以及同个端口不同后端微服务地址。

说明： 如若访问还是有问题，考虑nginx版本，切换稳定版本可解决。附nginx安装包

nginx安装包

nginx相关简单操作：

<!-- 启动 -->
start nginx
<!-- 重载 -->
nginx -s reload
<!-- 停止 -->
nginx -s stop

自动化

考虑到频繁重启或者每次启动nginx需要到对应目录执行cmd相关命令，可写简单的bat自动程序，直接双击运行，说明如下：

# 打开命令窗口
start cmd# /k 执行完命令不关闭cmd命令窗口
start cmd /k

# /c 执行完命令关闭cmd命令窗口
start cmd /c

# 执行具体命令

　start cmd /k "cd /d D:\nginx-1.14.2 && start nginx"