后端服务路径:

172.168.0.2:8080

172.168.0.2:7080

前端目录(html + css + js):

/root/apps/mzsg-web

1、修改 /etc/nginx.conf,注释掉nginx默认网站配置

include /etc/nginx/conf.d/*.conf;

#include /etc/nginx/sites-enabled/*;

 2、在/etc/nginx/conf.d目录下面新建配置文件,建议以网站简称全名,如mzsg.conf

upstream cat {
server 172.168.0.2:8080 weight=5;
server 172.168.0.2:7080 weight=5;
}
server{
 listen 80;
  server_name localhost;
  location / {
proxy_pass http://cat;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-real-ip $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header APP_ID mzsg;
proxy_set_header APP_KEY 31134314124fadfadf;
}   location ~ \.(html|js|css|png|gif|jpg)$ {
root /root/apps/mzsg-web;
index index.html index.htm;
  }
}

 如果是以.(html|js|css|png|gif|jpg)作为后缀的请求,则直接请求静态资源 /root/apps/mzsg-web 否则,转发给两个后端,这里两个后端负载策略采用了权重的方式,可以根据实际情况选择其它策略,如轮询、IP哈希、最小连接等

  proxy_set_header X-real-ip $remote_addr; proxy_set_header X-Forwarded-For $remote_addr;
  这两个HTTP头是因为采用了nginx作为代理后,后端可以通过 X-real-ip 或 X-Forwarded-For取得用户IP地址

  proxy_set_header APP_ID mzsg;
proxy_set_header APP_KEY 31134314124fadfadf;

  这两个HTTP头是因为后端权限校验需要

    proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";

      声明支持websocket

3、支持SSL

修改前端websocket连接代码,原本ws://需要改为wss://(购买或)生成密钥和证书,过程省略。需要注意的是:自己生成的证书在很多浏览器上会报警告,忽略后websocket仍然能用,如Chrom、Firefox,但有些浏览器不能用,如Safari。修改/etc/nginx/conf.d/mzsg.conf

upstream cat {
server 172.168.0.2:8080 weight=5;
server 172.168.0.2:7080 weight=5;
}
server{
 listen 443;
ssl on;
ssl_certificate /etc/nginx/server.crt;
ssl_certificate_key /etc/nginx/server.key;
  server_name localhost;
  location / {
proxy_pass http://cat;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-real-ip $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header APP_ID mzsg;
proxy_set_header APP_KEY 31134314124fadfadf;
}   location ~ \.(html|js|css|png|gif|jpg)$ {
root /root/apps/mzsg-web;
index index.html index.htm;
  }
}

 

websocket+前后端分离+https的nginx配置的更多相关文章

  1. 前后端分离 vue的nginx配置

    nginx配置vue 有全静态化  与 vue自己的应用端口 两种方式 以下是nginx跳转到vue自己的端口 https://www.jianshu.com/p/b7bd0d352db7 以下是全静 ...

  2. 前后端分离,使用nginx解决跨域问题

    前端:vue.js+nodejs+webpack 后台:SpringBoot 反向代理服务器:nginx 思想:将前端代码打包,让nginx指向静态资源,nginx对后台请求进行转发. 1.将前端代码 ...

  3. springboot 前后端分离项目跨域配置

    @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public ...

  4. springboot vue前后端分离 跨跨域配置

    public class CustomCorsFilter extends OncePerRequestFilter { @Override protected void doFilterIntern ...

  5. docker-compose 部署 Vue+SpringBoot 前后端分离项目

    一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...

  6. 【Docker】1、 前后端分离项目 下载启动运行

    人人开源前后端分离项目下载与配置 文章目录 人人开源前后端分离项目下载与配置 前后端分离框架介绍 后端项目下载与配置 1.renren-fast后台项目介绍 2.开发环境搭建 3.下载后端renren ...

  7. 论JavaWeb前后端分离放弃jsp

    1.静态资源使用Nginx反向代理Tomcat,Tomcat挂了网站仍可访问.2.静态与后端服务器分离,提升性能.3.大并发情况下,可同时扩展前后端服务器.4.接口可复用至App相关服务.5.网站热部 ...

  8. Springboot前后端分离开发

    .1.springboot前后端分离开发之前要配置好很多东西,这周会详细补充博客内容和遇到的问题的解析 2,按照下面流程走一遍 此时会加载稍等一下 pom.xml显示中加上阿里云镜像可以加速下载配置文 ...

  9. 前后端分离项目 nginx配置实践

    新项目采用前后端分离的方式开发,前后端代码打算分开部署(同机器且同域名),但打算支持后端依然可访问静态资源. 搜索nginx配置大部分都通过url前缀进行转发来做前后端分离,不适用目前项目. 说明 前 ...

随机推荐

  1. spring bean范围

    总结: 实例代码具体解释: 文件夹结构 Car.java package com.coslay.beans.autowire; public class Car { private String br ...

  2. PHP类

    类就是很多方法的集合这些方法是你在程序中经常会用到的一些逻辑或算法将他们包进类里面,可以提升程序的效率,减少代码的重复 比如你有一个类文件 web_common.class.php ,里面有一个类,名 ...

  3. w5cValidator【AngularJS】 2.0 版本发布

    w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些错误提示的功能,让大家不用在每个表单上写一些提示信息的模板,专心的去实现业务逻辑. 代码地址:https://g ...

  4. 加密算法 MD5/SHA1

    近来想学习函数式编程. 但是一直不知道怎么展开这个学习过程,目前的研究进度也不深入,想讲解一些原理也无从下手. 先简单的上一些算法,逐步分析语法和思想.虽然程度不深,但至少能记录这个过程. 本例子用F ...

  5. 领域模型中分散的事务如何集中统一处理(C#解决方案)

    领域模型中分散的事务如何集中统一处理(C#解决方案)   开篇 什么是事务,事务的应用场景 做项目时,经常会遇到一些需求,比如注册用户时,要求同时存入用户的基本信息和初始化该用户的帐户,如果在这两个环 ...

  6. 【译】Experienced programmers but new to Objective-C(一)

    注:这是raywenderlich博客上的一个系列文章.是写给从其他语言转到OC语言上的程序员的,一共5节.最近打算学习一下,并且把一些重要的知识点摘抄并且尝试翻译一下,第一次翻译,有些原文如果不知道 ...

  7. C#中利用JQuery实现视频网站

    C#中利用JQuery实现视频网站的缩略图采集   最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应 ...

  8. PHP GD 库 缩略图 添加水印

    class cls_image { var $error_no = 0; var $error_msg = ''; //var $images_dir = IMAGE_DIR; //var $data ...

  9. [NLP自然语言处理]计算熵和KL距离,java实现汉字和英文单词的识别,UTF8变长字符读取

    算法任务: 1. 给定一个文件,统计这个文件中所有字符的相对频率(相对频率就是这些字符出现的概率——该字符出现次数除以字符总个数,并计算该文件的熵). 2. 给定另外一个文件,按上述同样的方法计算字符 ...

  10. IOS学习之路十八(通过 NSURLConnection 发送 HTTP 各种请求)

    你想通过 Http 协议向服务器发送一个 Get 的包装请求,并在这个请求中添加了一些请 求参数. 向远程服务器发送一个 GET 请求,然后解析返回的数据.通常一个 GET 请求是添加了 一些参数的, ...