nginx代理基本用法

前端配置

修改vue项目生产环境打包配置，需要在.env.production配置生产环境访问地址为nginx代理端口

VUE_APP_BASE_API = 'http://xxx.xx.xx.xx:8080'

proxy: {
  [process.env.VUE_APP_BASE_API]: {
    target: "http://xxx.xx.xx.xx:8080",
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  },
}

ngixn 配置

8080为nginx监听端口，访问的是dist目录下的index.html前端页面，需要配置里增加api监听和代理

listen       8080;
server_name  122.51.128.27;
#charset koi8-r;
#access_log  logs/host.access.log  main;

location / {
    root   /var/opt/client/dist;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}


location ^~ /api/{
    proxy_pass http://127.0.0.1:8088; #代理到实际接口地址，云服务器本地端口
}