Nginx反向代理，实现不同域名的WEB服务共用80端口

1、正向代理和反向代理的区别

正向代理和反向代理的区别，这两张图可以帮助我们很好的理解：

（图片来源于网络）

2、反向代理的配置

我有一台服务器：118.118.119.119，还有一个域名 aaa.com

部署了两个端口：

web：118.118.119.119:8888

server：118.118.119.119:9999（接口服务，统一/api/开头）

实现：

1、打开www.aaa.com访问118.118.119.119:8888

2、打开www.aaa.com/api/访问118.118.119.119:8888/api/（这里就是8888端口，通过nginx代理转发可实现）

aaa.com域名解析如下

发现：域名解析的是80端口，强大的Nginx可以通过反向代理实现多个服务共同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;


    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    #默认80端口
    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   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        
    }
    #***************************以下web服务配置***************************
    # web服务
    server {
        listen       8888;
        server_name  localhost;

        #charset koi8-r;
        #access_log  logs/host.access.log  main;

        location / {           
            root   /home/web;  #vue前端项目打包后放在这里             
            index  index.html index.htm;   #这个index.html  是上面dist目录下的index.html 
            try_files $uri $uri/ /index.html; # 解决刷新出现404                 
        }       
    }
    #***************************以下反向代理配置***************************
    # 80端口，为www.aaa.com服务
    server {
        listen       80;
        server_name  www.aaa.com;
 
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        
        location / {              
            proxy_pass   http://localhost:8888/;            
        }
        # 转发
        location ^~ /api/ {
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;            #通过nginx传递真实Ip
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
            proxy_pass http://localhost:9999/api/;   #后端服务接口地址         
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
    }
    # ***************************结尾***************************
   

}

如有其它项目，同理添加配置即可

2、重启nginx

cd /usr/local/nginx/sbin/
# 重启
./nginx -s reload

3、测试

在浏览器上打开

www.aaa.com

www.aaa.com/api/

亲测可用，如有问题，可来交流。