当前位置: 首页 > article >正文

关于Nginx前后端分离部署spring boot和vue工程以及反向代理的配置说明

最近项目中用到关于Nginx前后端分离部署spring boot和vue工程以及反向代理的配置,总结了一下说明:

1、后端是spring boot工程,端口8000,通过 jar命令启动

nohup java -jar xxx-jsonflow-biz.jar > /usr/local/nohup.out 2>&1 &

2、后台前端是vue工程,打包成dist文件夹,端口是13000,nginx配置如下:

    server {
        listen 13000;
        server_name localhost;
        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 4;
        gzip_proxied any;
        gzip_types text/plain text/xml text/css;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.(?!.*SV1)";

        root /usr/local/nginx/html/dist;

       location ~* ^/jsonflow/ {
           #proxy_pass http://127.0.0.1:8000;
           proxy_connect_timeout 15s;
           proxy_send_timeout 15s;
           proxy_read_timeout 15s;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto http;
           #proxy_method GET POST PUT DELETE;
           add_header Access-Control-Allow-Origin *; 
           add_header Access-Control-Allow-Credentials 'true'; 
           add_header Access-Control-Allow-Methods 'GET,PUT,POST,OPTIONS'; 
           add_header Access-Control-Allow-Headers 'user-id,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
           if ($request_method = 'OPTIONS') {
              return 204;
           }
           proxy_pass http://127.0.0.1:8000;
        }

        if ($request_uri ~ "/actuator"){
            return 403;
        }
    }

3、h5移动端是2个应用,配了2个server,分别对应h5文件夹下的2个目录,nginx配置如下:

    server {
        listen       9001;
        server_name  localhost;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        error_page 403 =200 /40x.html;
        location /40x.html {
           root html;
        }

        location / {
            root   html/h5/yiyuan;
            index  index.html ;
        }
    }

    server {
        listen       9002;
        server_name  localhost;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        error_page 403 =200 /40x.html;
        location /40x.html {
           root html;
        }

        location / {
            root   html/h5/yaodian;
            index  index.html ;
        }
    }

4、完整的nginx.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 {
     map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }
    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;

    server {
        listen       9001;
        server_name  localhost;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        error_page 403 =200 /40x.html;
        location /40x.html {
           root html;
        }

        location / {
            root   html/h5/yiyuan;
            index  index.html ;
        }
    }

    server {
        listen       9002;
        server_name  localhost;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        error_page 403 =200 /40x.html;
        location /40x.html {
           root html;
        }

        location / {
            root   html/h5/yaodian;
            index  index.html ;
        }
    }

    server {
        listen 13000;
        server_name localhost;
        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 4;
        gzip_proxied any;
        gzip_types text/plain text/xml text/css;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.(?!.*SV1)";

        root /usr/local/nginx/html/dist;

       location ~* ^/(jsonflow/ws) {
          proxy_pass http://127.0.0.1:8000;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
       }

       location ~* ^/jsonflow/ {
           #proxy_pass http://127.0.0.1:8000;
           proxy_connect_timeout 15s;
           proxy_send_timeout 15s;
           proxy_read_timeout 15s;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto http;
           #proxy_method GET POST PUT DELETE;
           add_header Access-Control-Allow-Origin *; 
           add_header Access-Control-Allow-Credentials 'true'; 
           add_header Access-Control-Allow-Methods 'GET,PUT,POST,OPTIONS'; 
           add_header Access-Control-Allow-Headers 'user-id,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
           if ($request_method = 'OPTIONS') {
              return 204;
           }
           proxy_pass http://127.0.0.1:8000;
        }

        location ~* ^/(gen) {
           proxy_pass http://127.0.0.1:5003;
           proxy_connect_timeout 15s;
           proxy_send_timeout 15s;
           proxy_read_timeout 15s;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto http;
        }

        if ($request_uri ~ "/actuator"){
            return 403;
        }
    }
}

5、nginx目录如下图:

6、番外,关于https证书的配置:

	server {
		listen 443 ssl;
		server_name localhost;
		gzip on;
		gzip_static on;
		gzip_min_length 1k;
		gzip_comp_level 4;
		gzip_proxied any;
		gzip_types text/plain text/xml text/css;
		gzip_vary on;
		gzip_disable "MSIE [1-6]\.(?!.*SV1)";
        ssl_protocols GMTLSv1.1;
        ssl_certificate crt/gm/SS.pem;
        ssl_certificate_key crt/gm/SS.key.pem;
        ssl_certificate crt/gm/SE.pem;
        ssl_certificate_key crt/gm/SE.key.pem;

        root /usr/local/dist;
		
	   location ~* ^/(ewaycloud) {
		   proxy_pass http://127.0.0.1:8000;
		   proxy_connect_timeout 60s;
		   proxy_send_timeout 60s;
		   proxy_read_timeout 60s;
		   proxy_set_header X-Real-IP $remote_addr;
		   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		   proxy_set_header X-Forwarded-Proto http;
		}

}


http://www.kler.cn/a/420275.html

相关文章:

  • 基于hexo框架的博客搭建流程
  • 深入探索 HarmonyOS 的 Navigation 组件:灵活的页面管理与动态导航
  • 13TB的StarRocks大数据库迁移过程
  • SpringMVC(二)
  • 【iOS】多线程基础
  • Android矩阵Matrix在1张宽平大Bitmap批量绘制N个小Bitmap,Kotlin(1)
  • 学习ASP.NET Core的身份认证(基于Session的身份认证2)
  • 域名解析系统 DNS
  • vue和react的diff算法区别?
  • Git 使用总结
  • 【前端面试】数据结构与set和map
  • ETSI EN 300328 标准的一些笔记
  • Qt | TCP客户端简单实现+TCP助手测试
  • Unity Ads的常见问题:投放、变现、安装等注意事项
  • 洛谷P1075
  • 如何在MySQL中计算两个日期的间隔天数
  • 锁-读写锁-Swift
  • 基于DHCP,ACL的通信
  • Flutter如何适配RTL
  • redis渐进式遍历
  • 学习思考:一日三问(周末学习篇)之网络模型
  • DreamCamera2相机预览变形的处理
  • 使用Dockerfile制作jdk镜像
  • Epic Spinners - 免费开源的 Vue3 加载动画组件,纯 CSS 实现的,动效精致酷炫
  • Spring Boot【二】
  • MySQL-CPU使用率高的原因排查和解决方法