Nginx配置和switchhosts工具的使用

首先，了解一下，如果不采用nginx配置代理，需要在config目录下的index.js文件中配置代理服务，配置如下，以某个项目为例：

proxyTable        : {
            '/gateway': {
                target      : 'http://api.robotsphere.com:8081',
                changeOrigin: true,
                pathRewrite : {}
            },
            '/cgi'    : {
                target      : 'http://api.robotsphere.com:8081',
                changeOrigin: true,
                pathRewrite : {}
            },
        }

现在，我用nginx反向代理替换上述的方案：

开发环境

开发前配置switchhosts里面ip域名，指明后，当我们访问某个指明的域名，就会首先查看配置里对应指明的ip地址，而无须通过dns域名解析访问

#开发环境
    server {
        #配置端口号
        listen 80;
        #配置server_name
        server_name lufeifei.com;
        #设置默认页面 地址为webpack-devserver地址
        location  / {
            proxy_pass http://127.0.0.1:8075; 
        }
        #这里因为我的的vue-router 所以将带#号的请求转发到本地服务器
        location ~ .*#.*$ {
            proxy_pass http://127.0.0.1:8075;
        }
        #请求后端接口的服务器地址
        location ~ /(gateway|cgi)/ {
            proxy_pass http://api.robotsphere.com:8081;
        }
    }

开发环境下没有dist目录，所以location中代理路径填的是我们npm run dev 后的服务地址，当我们在url输入server_name配置的域名后，nginx会帮我们代理访问http://127.0.0.1:8075（npm run dev后配置生成的url），这里也可以是http://localhost:8075,127.0.0.1指向的就是localhost，8075端口是我们在vue项目中config目录下的index.js中配置的端口号。注意：后端服务器地址也要带上端口号。

生产环境

#生产环境
    server {
        #监听80端口，80端口是知名端口号，用于HTTP协议
        listen       80;
        
        #定义使用www.xx.com访问
        server_name  work.lufei.com lufei.com;
        
        location / {
            root D:\workspace/robot\dist;   
            index  index.html index.htm;
        }
        
        #反向代理的路径（和upstream绑定），location 后面设置映射的路径 ,proxy_pass 后为服务端的域名和端口
        location ~ /(gateway|cgi)/ {   
            proxy_pass http://api.robotsphere.com:8081;  
        } 
    }

生产环境下，我们会npm run build生成一个dist目录，这个目录就是webpack打包后的目录，所以在生产环境下，location下的root指向的是这个生成的目录，里面有我们需要的入口（首页）的html文件，即index.html， location下的index也是用来配置默认打开的文件，后面可以配置多个，即如果找不到index.html会继续往后面查看index.htm文件并默认打开它。server_name 后面同样可以配置多个域名，需要在switchhosts配置，如下为switchhosts配置：

# robotsphere.com
#后端服务
192.168.1.118 api.robotsphere.com 
#自定义域名
127.0.0.1 work.lufei.com lufei.com lufeifei.com 

这里我附上我参考的博文地址：https://blog.csdn.net/qq_32930863/article/details/77164738