websocket+前后端分离+https的nginx配置
后端服务路径:
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配置的更多相关文章
- 前后端分离 vue的nginx配置
nginx配置vue 有全静态化 与 vue自己的应用端口 两种方式 以下是nginx跳转到vue自己的端口 https://www.jianshu.com/p/b7bd0d352db7 以下是全静 ...
- 前后端分离,使用nginx解决跨域问题
前端:vue.js+nodejs+webpack 后台:SpringBoot 反向代理服务器:nginx 思想:将前端代码打包,让nginx指向静态资源,nginx对后台请求进行转发. 1.将前端代码 ...
- springboot 前后端分离项目跨域配置
@Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public ...
- springboot vue前后端分离 跨跨域配置
public class CustomCorsFilter extends OncePerRequestFilter { @Override protected void doFilterIntern ...
- docker-compose 部署 Vue+SpringBoot 前后端分离项目
一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...
- 【Docker】1、 前后端分离项目 下载启动运行
人人开源前后端分离项目下载与配置 文章目录 人人开源前后端分离项目下载与配置 前后端分离框架介绍 后端项目下载与配置 1.renren-fast后台项目介绍 2.开发环境搭建 3.下载后端renren ...
- 论JavaWeb前后端分离放弃jsp
1.静态资源使用Nginx反向代理Tomcat,Tomcat挂了网站仍可访问.2.静态与后端服务器分离,提升性能.3.大并发情况下,可同时扩展前后端服务器.4.接口可复用至App相关服务.5.网站热部 ...
- Springboot前后端分离开发
.1.springboot前后端分离开发之前要配置好很多东西,这周会详细补充博客内容和遇到的问题的解析 2,按照下面流程走一遍 此时会加载稍等一下 pom.xml显示中加上阿里云镜像可以加速下载配置文 ...
- 前后端分离项目 nginx配置实践
新项目采用前后端分离的方式开发,前后端代码打算分开部署(同机器且同域名),但打算支持后端依然可访问静态资源. 搜索nginx配置大部分都通过url前缀进行转发来做前后端分离,不适用目前项目. 说明 前 ...
随机推荐
- Android在View拉丝工艺和invalidate()和其他相关方法
转载请注明出处:http://blog.csdn.net/qinjuning 前言: 本文是我读<Android内核剖析>第13章----View工作原理总结而成的,在此膜拜下作者 . ...
- .NET Framework和C#版本历史概览
发布日期 .Net版本 C#版本 CLR版本 开发工具 功能介绍 2002 1.0 1.0 初始版本 Visual Studio .Net 初始版本 .NET框架结构,详见: 2003 1.1 ...
- java中数据库通用层
/** * 数据库通用类 * */ public class ConnDB { /** * 获取数据库连接对象 * @return 数据库连接对象 * */ public static Connect ...
- bootstrap弹出框
要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...
- WXPP QuickFramework V2.0
微信快速开发框架(WXPP QuickFramework)V2.0版本上线--源码已更新至github 用了一个多星期的时间,把微信快速开发框架进行了改进,之前1.0版本针对的是普通订阅号,V2. ...
- MVC ValidationAttribute 服务器端自定义验证
MVC ValidationAttribute 服务器端自定义验证 客户端验证 上文只说了客户端的自定义验证,这样对于用户的输入还是不够可靠,用户完全可以绕过我们定义的客户端验证.所以仅有客户端的验证 ...
- 冒泡动画按钮的简单实现(使用CSS3)
冒泡动画按钮的简单实现(使用CSS3) 原始的参考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ,基本原理是利用了 ...
- ${pageContext.request.contextPath}的作用
刚开始不知道是怎么回事,在网上也查找了一些资料,看了还是晕. 看了另一个大侠的,终于有了点眉目. 那位大侠在博客中这样写道“然后在网上找,更让我郁闷的事,TMD!网上“抄袭”的真多啊!而且扯了一大堆! ...
- JUnit java单元测试
首先须导入JUnit包:所在项目右击->Build Path->Add Libraries->选择JUnit->选择一个版本->Finish 一.手动生成 1.测试方法, ...
- angularjs图片上传后不刷新的解决办法
刚接触angularjs在使用的过程中遇到这个问题 首先我们的图片地址是根据ID来获取的,所以用了指令来完成图片的绑定 .directive("cImg", ['appUrl', ...