nginx用法之门户模式同时支持http和https且配置请求转发

àì夳堔傛蜴生んèń 2022-12-18 01:58 158阅读 0赞

### nginx用法之门户模式同时支持http和https且配置请求转发 ###

*  1. 写在前面的话
 *   *  1.1 不使用Nginx 部署我们的企业级应用程序
     *  1.2 使用Nginx 部署我们的企业级应用程序
 *  2. nginx用法之门户模式
 *   *  2.1 Nginx 用法之引用外部配置文件
     *  2.2 自定义企业应用Nginx 配置
     *   *  2.2.1 http 和https 同时兼容
         *  2.2.2 配置应用程序请求转发

# 1. 写在前面的话 #

大家好，我是技术宅星云。

今天是北京时间2020年10月24日，1024——程序员的节日，在这里祝大家节日快乐。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70_pic_center]  
好了废话不多说，开始写点干货。

当我们后端开发好的企业应用程序，一般都会部署到Centos等Linux服务器上，然后提供Restful API 给APP移动端使用，

## 1.1 不使用Nginx 部署我们的企业级应用程序 ##

其中有一个最基础的做法是直接为我们部署的应用程序开放特定的端口，然后APP移动端通过IP（域名）+端口的方式来请求我们的API.

限制假设APP需要请求 `https://www.xxx.com/api/v1/login.do` 来执行用户登陆请求

如果不使用nginx 那么就是  
![在这里插入图片描述][2020102422534981.png_pic_center]  
通过这种方式当然也可以实现，甚至一些Java后端新手就是这么干的，但是不知你们有没有想过，这种方式存在一些缺点：

> 1.  Linux服务器需要对外开放除了80端口以外的其他端口
> 2.  端口设置操作复杂（需要配置阿里云控制台的端口策略或iptable 防火墙的一些配置）
> 3.  开放的端口多了，就有可能被不怀好意的人找到漏洞渗透进去。
> 4.  如果部署的端口发生变化，App端需要修改。

## 1.2 使用Nginx 部署我们的企业级应用程序 ##

能避免问题的另外一种比较好的做法那就是通过使用Nginx 来做请求转发和负载均衡等操作。

如果使用Nginx 则是这样的效果：  
![在这里插入图片描述][20201024225542877.png_pic_center]  
我们可以看到，当使用了Nginx之后，相当于有了一个门户模式，App 端无论请求任何API 都只需要请求80端口即可，不再需要单独对外网可以访问9001端口，这样大大增强了我们的系统安全性，甚至后面需求等不可控因素导致我们需要把9001端口换成9002端口，这也没有任何问题，App端不需要任何改变。

# 2. nginx用法之门户模式 #

## 2.1 Nginx 用法之引用外部配置文件 ##

为了让nginx 帮我们处理好请求转发，往往需要修改我们的nginx 配置文件，但是为了尽可能不修改乱了原来的配置文件，我们有一种比较好的做法就是将我们的自己的配置，写到nginx配置的外面，然后在nginx 中引入这个配置文件即可。

方法很简单只需要添加这么一行代码即可。

include   hb_ssd.conf;

完整代码如下：

#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;
        include   hb_ssd.conf;
    
        #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       8080;
            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;
            #}
        }
    
    
        # another virtual host using mix of IP-, name-, and port-based configuration
        #
        #server { 
        # listen 8000;
        # listen somename:8080;
        # server_name somename alias another.alias;
    
        # location / { 
        # root html;
        # index index.html index.htm;
        # }
        #}
    
    
        # HTTPS server
        #
        #server { 
        # listen 443 ssl;
        # server_name localhost;
    
        # ssl_certificate cert.pem;
        # ssl_certificate_key cert.key;
    
        # ssl_session_cache shared:SSL:1m;
        # ssl_session_timeout 5m;
    
        # ssl_ciphers HIGH:!aNULL:!MD5;
        # ssl_prefer_server_ciphers on;
    
        # location / { 
        # root html;
        # index index.html index.htm;
        # }
        #}
    }

## 2.2 自定义企业应用Nginx 配置 ##

接下来我们将用nginx 配置为所有的App请求支持http 和https 两种请求方式.

这样有一个最好的系统兼容性。

### 2.2.1 http 和https 同时兼容 ###

http 和https 同时兼容很简单，需要80端口监听http 请求，443 监听https 请求即可。

然后别忘了配置SSL 证书即可。

假设hb\_ssd.conf 配置文件在 /usr/local/nginx/conf/hb\_ssd.conf 目录下。  
那么证书文件应该位于 /usr/local/nginx/conf/cert

### 2.2.2 配置应用程序请求转发 ###

*  首先是后台管理系统访问请求分别是：

>  *  开发服：https://www.xxx.com/my-app/console-dev-admin/
>  *  测试服: https://www.xxx.com/my-app/console-test-admin/
>  *  预生产服: https://www.xxx.com/my-app/console-uat-admin/
>  *  正式生产服://www.xxx.com/my-app/console-prod-admin/

由于现在都是前后台分离，因此这几个不同服的后台管理静态页面位置分别位于：

>  *  开发服：`/opt/app/my-app/dev/admin/`
>  *  测试服: `/opt/app/my-app/test/admin/`
>  *  预生产服: `/opt/app/my-app/uat/admin/`
>  *  正式生产服:`/opt/app/my-app/prod/admin/`

*  然后后台管理系统API 统一请求：

>  *  开发服：https://www.xxx.com/my-app/dev-api/
>  *  测试服: https://www.xxx.com/my-app/test-api/
>  *  预生产服: https://www.xxx.com/my-app/uat-api/
>  *  正式生产服://www.xxx.com/my-app/prod-api/

实际对应的是内网实际应用：

>  *  开发服：http://127.0.0.1:6001/my-app/dev-api/
>  *  测试服: http://127.0.0.1:7001/my-app/prod-api/
>  *  预生产服: http://127.0.0.1:8001/my-app/prod-api/
>  *  正式生产服:http://127.0.0.1:9001/my-app/prod-api/

另外，上面我还做了一个巧妙的操作，

https://www.xxx.com/my-app/test-api/

实际请求的是 http://127.0.0.1:7001/my-app/test-api/

`https://www.xxx.com/my-app/dev-api/vue-element-admin/timer-task-service/`

实际请求的是

`http://127.0.0.1:7100/my-app/test-api/vue-element-admin/timer-task-service/`

--------------------

hb\_ssd.conf完整代码如下：

server { 
      listen 80;
      listen 443;
      server_name www.xxx.com;
      large_client_header_buffers 4 16k;
      client_max_body_size 300m;
      client_body_buffer_size 128k;
      proxy_connect_timeout 600;
      proxy_read_timeout 600;
      proxy_send_timeout 600;
      proxy_buffer_size 64k;
      proxy_buffers 4 32k;
      proxy_busy_buffers_size 64k;
      proxy_temp_file_write_size 64k;
    
      ssl on;
      ssl_certificate cert/my_certificate.pem;
      ssl_certificate_key cert/my_certificate.key;
      ssl_session_timeout 5m;
      ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
      ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
      ssl_prefer_server_ciphers on;
      
      # 后台管理系统
       # Dev Environment admin
      location /my-app/console-dev-admin/ { 
        alias /opt/app/my-app/dev/admin/;
        index index.html index.htm;
      }
      # Test Environment admin
      location /my-app/console-test-admin/ { 
        alias /opt/app/my-app/test/admin/;
        index index.html index.htm;
      }
      # UAT Environment admin
      location /my-app/console-uat-admin/ { 
        alias /opt/app/my-app/uat/admin/;
        index index.html index.htm;
      }
     # PROD Environment admin
      location /my-app/console-prod-admin/ { 
        alias /opt/app/my-app/prod/admin/;
        index index.html index.htm;
      }
    
      # Dev API
      location ^~ /my-app/dev-api/ { 
        proxy_redirect off;
        proxy_set_header x-real-ip $remote_addr;
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header host $http_host;
        proxy_pass http://127.0.0.1:6001/my-app/dev-api/;
      }
      location ^~ /my-app/dev-api/vue-element-admin/timer-task-service/ { 
        proxy_redirect off;
        proxy_set_header x-real-ip $remote_addr;
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header host $http_host;
        proxy_pass http://127.0.0.1:6100/my-app/dev-api/vue-element-admin/timer-task-service/;
      }
      # TEST API
      location ^~ /my-app/test-api/ { 
        proxy_redirect off;
        proxy_set_header x-real-ip $remote_addr;
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header host $http_host;
        proxy_pass http://127.0.0.1:7001/my-app/test-api/;
      }
      location ^~ /my-app/test-api/my-app/timer-task-service/ { 
        proxy_redirect off;
        proxy_set_header x-real-ip $remote_addr;
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header host $http_host;
        proxy_pass http://127.0.0.1:7100/my-app/test-api/vue-element-admin/timer-task-service/;
      }
      # UAT API
      location ^~ /my-app/uat-api/ { 
        proxy_redirect off;
        proxy_set_header x-real-ip $remote_addr;
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header host $http_host;
        proxy_pass http://127.0.0.1:8001/my-app/uat-api/;
      }
     location ^~ /my-app/uat-api/vue-element-admin/timer-task-service/ { 
        proxy_redirect off;
        proxy_set_header x-real-ip $remote_addr;
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header host $http_host;
        proxy_pass http://127.0.0.1:8100/my-app/uat-api/vue-element-admin/timer-task-service/;
      }
    
      # PROD API
      location ^~ /my-app/prod-api/ { 
        proxy_redirect off;
        proxy_set_header x-real-ip $remote_addr;
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header host $http_host;
        proxy_pass http://127.0.0.1:9001/my-app/prod-api/;
      }
      location ^~ /my-app/prod-api/vue-element-admin/timer-task-service/ { 
        proxy_redirect off;
        proxy_set_header x-real-ip $remote_addr;
        proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header host $http_host;
        proxy_pass http://127.0.0.1:9100/my-app/prod-api/vue-element-admin/timer-task-service/;
      }
    }

好了以上操作就完美实现了，比最开始那种部署方法要好很多。

今天的分享到此结束，我们下篇再见。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhZHVlcw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/f2f93de593f246d59382272dfe88a20c.png
[2020102422534981.png_pic_center]: /images/20221122/5e03785148a3465d891a5e3e8f8f5281.png
[20201024225542877.png_pic_center]: /images/20221122/1691daf31b51401299b95766f8fb6aab.png