nginx配置反向代理

参考官网
Beginner’s Guide (nginx.org)

1. 进入nginx的conf目录

安装目录可能不一样,我这里是
cd /usr/local/nginx/conf/

2.编辑配置文件
vi nginx.conf

关注这段代码

server {
        # 监听的端口
        listen       80;
        #服务名
        server_name  localhost;
        #字符集
        #charset koi8-r;
        
        #access_log  logs/host.access.log  main;
        #静态资源代理
        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #设置错误页面
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
  
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

简单的代理例子
要把 80端口下 / 的请求转发给本机下的8234端口

server {
        # 监听的端口
        listen       80;
        #服务名
        server_name  localhost;
       
        location / {
            proxy_pass   http://127.0.0.1:8234;
        }
  
    }

实践

现在有两个前端服务,vue写端口为8876(blog),spring boot写的端口为8125（player），现在想直接通过ip/服务名的形式访问这两个服务(端口默认80)

• 编写nginx的配置文件

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        # proxy the myblog scripts to Apache listening on 127.0.0.1:80


         location /blog {
            proxy_pass   http://127.0.0.1:8876;
        }

        location /player {
            proxy_pass    http://159.75.38.125:8125;
        }

    }

}

• 启动nginx，访问浏览器可以看到，虽然通过ip/服务名的访问到了服务，但是js,css等文件都报404,原因很简单，以/blog来说,这些请求都少了前缀/blog, nginx里没有匹配的，所以返回404
  解决方法：
  1、在配置文件加入匹配的代码

worker_processes  1;

events {
   worker_connections  1024;
}

http {
   include       mime.types;
   default_type  application/octet-stream;
   sendfile        on;
   keepalive_timeout  65;
   server {
       listen       80;
       server_name  localhost;

        location /blog {
           proxy_pass   http://127.0.0.1:8876;
       }

       location /player {
           proxy_pass    http://159.75.38.125:8125;
       }

       location ~ .*\.(js|css|jpg|jpeg|gif|png|ico|pdf|txt|data|fonts|eot|svg|ttf|woff|woff2)$ {
           proxy_pass http://127.0.0.1:8876;
        }
   }
}

这样虽然解决了/blog的问题，但是另外一个前端服务/player的依旧被拦截，因为/player的样式文件都被代理到/blog那里去了

2、加前缀

• 使服务blog发请求使都带/blog前缀
  在vue.config.js添加属性publicPath：’/blog’

module.exports = {
    publicPath: '/blog'
}

• 使服务player发请求时都带/player前缀
  在application.properties添加

server.servlet.context-path=/player

修改后浏览器访问，两个服务均正常显示