前端开发本地搭建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/;
      # 后台1
            proxy_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

# 执行具体命令