nginx中经常会因为业务需求,需要通过location配置不同的子目录,访问不同的后端,如下
松哥最近正在录制 TienChin 项目视频~采用 Spring Boot+Vue3 技术栈,里边会涉及到各种好玩的技术,小伙伴们来和松哥一起做一个完成率超 90% 的项目,戳戳戳这里-->TienChin 项目配套视频来啦。 ---- TienChin 项目也是一个前后端分离项目,前后端分离项目如果做成 SPA(单页面)的形式,就必然面临一个首屏加载的问题,因为默认情况下首页文件比较大,可能超过 1 MB,进而带来首页加载很慢的问题。所以我们要通过优化,来提高首页的加载速度。 问题的解决,一般来说有这样几
「本文之前发过,但是比较零散,这里我把用到的方案都汇总一下,方便大家索引,有需要的小伙伴可以收藏下方便查找。里边提到的几种方案,大家都可以对照着视频试一下」
我们这系统是使用nginx+多台业务服务器部署的架构,nginx充当代理转发,也起到负载均衡的作用。
前言:以前一直认为性能优化很遥远,也很复杂,但当今天尝试过后,发现也并不是触不可及
安装步骤 安装前环境准备 1:下载nginx安装包nginx-1.17.5(当前最新),并上传到服务器上 这样上传到/root/
本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等
前三篇文章其实已经将博客部分的功能基本上走了一遍流程,博客部分还剩下的只有首页右侧导航栏动态渲染以及文章详情界面带评论功能尚待开发。本篇文章准备讲讲博客的部署,本篇涉及的知识点前端vue打包部署到nginx,后端Node部署并使用PM2进行进程管理。并且对vue首屏加载过慢做了适当的优化,提高首屏加载速度。
RPO (Relative Path Overwrite) 相对路径覆盖,最早由 Gareth Heyes 在其发表的文章中提出。主要是利用浏览器的一些特性和部分服务端的配置差异导致的漏洞,通过一些技巧,我们可以通过引入相对路径来引入其他资源文件,以达到我们的目的。
之前总有人说nginx没办法调试,写多个变量,不知道变量值是啥,写多个location不知道走的是哪个location,今天带来三种方式
现在项目已经有了,但是要把它放到生产环境中还是有些事情要做,在这最后一节,来把它们一一搞定。 这一节其实更多是关于webpack的内容。不过要想把react用得很爽,我们需要一个现代化的构建工具。在前面几节webpack都在默默地工作着。react全都是关于组件的,组件意味着模块化,webpack让前端模块化得淋漓尽致。我们的目标是要把react用起来,并且是很舒坦的用起来,所以我觉得这节并没跑题,而且很重要。 打包部署文件 我们的源代码是没法直接跑起来的。ES6语法大部分浏览器还不完全支持,有些浏览器完全
苏宁的技术架构,由苏宁云、基础支撑、后台、中台和前台组成。苏宁云主要为业务开发提供云服务。基础支撑,包括数据连接协议、防火墙、日志、中间件、短信等。在苏宁云和基础支撑之上,业务开发分为前中后台。而 Web 前端,主要集中在前台上。包含 PC 端、移动 WAP 端等。
点击关注公众号,Java干货及时送达 问题背景 大家看看这个页面,有没有发现什么问题? 主页:http://www.javastack.cn/ 是的,页面 CSS 样式全丢失了,导致页面混乱。。 这个页面是我人为删除了样式(为了演示),真正出现问题是另外一个页面,最近栈长发现有个页面时不时就会出现样式错乱的问题,很诡异!! 于是这篇就记录下排查过程,和大家分享下解决方案,也许你会觉得这和 Nginx 有啥关系??我也万万想不到,这的确是因为 Nginx 限流引起的。。 开始排查 页面样式错乱,那肯定是检
配置Nginx统一代理web容器如tomcat,jetty的请求,在日常开发中很常见,那么在配置集成的时候应该注意些什么呢 下面我们将通过一个例子介绍如何和Nginx配置: 首先,我们先看下一个spring boot项目的结构: demo src main assemble package.xml filters dev.properties test.pr
昨天尝试部署一个 Vue+Koa2 的前后端分离项目,没想到因为前端项目部署的问题,卡了一整天,今天才终于找到了问题所在,成功解决。这篇文章主要谈谈:
1、什么是CSRF? 已经有很多博文讲解其过程和攻击手段,在此就不重复了。 O(∩_∩)O 不清楚的同学,请自行搜索或按链接去了解: http://blog.csdn.net/Flaght/article/details/3873590 2、CSRFGuard_Project 开源项目 CSRFGuard,介绍了如何使用在 HTTP 请求中加入 token 并验证的方法来抵御 CSRF。 https://www.owasp.org/index.php/Category:OWASP_CSRFGuard_
这一步之后,打包后会发现很大的chunk-vendors.xxxxxxx.js不见了,其实是分成了不同的js文件
VCC里面的文件是设置成根目录,可以直接找到,gsccTest里面的文件需要加上前缀才能找到,所以打包时是有区别的。
受疫情推迟开学影响,这段时间全国如火如荼推广网络教学,前段时间搭建了edx慕课平台,但还缺点什么,就是网络直播教学,花一天时间,搭建成功,记录备用。
如果我们使用 PHP 来编写后端的代码时,需要 Apache 或者 Nginx 的 HTTP 服务器,并配上 mod_php5 模块和 php-cgi。
引言 本文从一个很小的前端工程说起,慢慢推导出我目前多个项目前端实践的工程结构。 为Web前端项目建工程 Web工程需要建工程吗?不是建个目录就可以开搞的吗?你一定会这么问。但事实上面对越来越复杂的前端页面逻辑,真的有必要好好组织一下前端的代码结构。同时前端代码的依赖管理、编译方式真的需要考量一下。 mkdir -p demo1 cd demo1 npm install # 回答一系列回答后,一个npm工程就建好了 创建前端源代码目录及编译后产物目录 从Java带来的习惯,我是不习惯将源代码与编译后的产物放
推流只能用rtmp协议,拉流可以使用rtmp协议和hls协议。rtmp协议是adobe公司开发的开放协议,hls是苹果公司推出的直播协议。我们使用nginx的rtmp插件来搭建推流服务器
推流只能用rtmp协议,拉流可以使用rtmp协议和hls协议。rtmp协议时adobe公司开发的开放协议,hls是苹果公司推出的直播协议。我们使用nginx的rtmp插件来搭建推流服务器
初始化之后其实有三个文件,index.html、README.md、.nojekyll。
背景 前段时间做了一个 COVID-19 的疫情数据每日邮箱推送平台(https://ncov.ouorz.com),本着给自己用的小工具顺便练手的精神,尝试接触了一些新的关于 JavaScript 的技术栈。包括 Vue-Cli、Node.js、MongoDB 等,好不一番爽快的开发体验。顺便一提,这个疫情数据订阅平台我拿着去填写在了 Github Trending 爆火的 wuhan2020 项目(https://github.com/wuhan2020/wuhan2020)举办的「黑客马拉松」报名表里
这些年积累了很多前端性能优化的知识点和思路,日常工作很少涉及技术层极限优化,近期终于一点点把博客独立搭建并部署了,对之前的一些技术点进行了深度探索,最终结果也达到了预期效果,由于水平有限,写的不好的地方,敬请谅解
究其原因,还是 live 和本地的环境差异导致,这里的原因就可能有很多,我理解主要是以下两点:
接下来的开发任务中会涉及到前端埋点的一些内容,埋点的本质其实就是对用户的行为进行记录,生成出用户的行为数据,然后对这些数据进行分析,为业务侧人员提供线索。
小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书。
首先看一张访问TT猫首页的截图: 1.png 测试环境为谷歌浏览器,暂且不讨论其它浏览器,截图下方我们可以观察到以下参数: DOMContentLoaded:1.42s | Load:2.31s 以上
以上参数是在CTRL+F5下测试的,也就是说不存在浏览器本地缓存一说,DOM渲染时间为1.42s,整个页面load时间为2.31s。
PS:秒杀系统不仅仅讲秒杀,主要是讲如何利用限流,缓存,异步分布式互联网大并发的场景。
传送门:https://segmentfault.com/a/1190000022994032
应用背景:应用采用前后端分离开发,前端直接使用nginx部署vue打包文件提供访问需要;
请求链路要求:客户端发送请求先经过nginx,再用nginx转至内部访问网关gateway,最后由网关服务的路由规则转发到微服务的内部服务。
访问:https://xxxx.xxxx.xxx.com/chii/ 即可打开调试监控
Node.js是一个开源JavaScript运行环境,用于构建服务器端和网络应用程序。该平台可在Linux,macOS,FreeBSD和Windows上运行。虽然您可以在命令行运行Node.js应用程序,但本教程将重点介绍如何将它们应用于服务器中运行。这意味着它们将在重启故障时再次重新启动,并且可以安全地用于生产环境中。
最近这段时间主要在不同平台测试模块的稳定性,目前播放这一块没发现问题,由于条件限制,除了FreeBSD平台没测试过,Windows 7,Debian 7.x和macOS Sierra都测试过了,由于Nginx官方对Windows支持不太好,没用Windows平台最强大的IOCP接口(使用的select),所以导致Windows平台上运行效率不太高,表现在推流等待时间长,3s+,首屏时间很长,4s+,select本身原因限制客户端个数,默认是1024。推流等待时间和首屏时间最短的是macOS Sierra,本机上测试时基本上是秒推秒开。昨晚专门注意了一下,在macOS Sierra下编译时,SO_REUSEPORT和TCP_FASTOPEN两项都支持,前者让Nginx的每个子进程都可以listen,都有一个专门的accept队列,解决了惊群效应;后者则是在发起SYN时就已经携带实际数据,而不是握手完毕后再传输实际数据。秒推秒开可能跟这两个选项有关。但是macOS Sierra并不支持将某个进程绑定到某个CPU上,所以可能进程上下文切换会有开销,系统负载较大时可能效率不如Linux。由于macOS Sierra是公司的电脑,所以未做压力测试。我的笔记本装的是Debian 7.x,因为内核版本较低,所以macOS Sierra上支持的两个选项都不支持。测试时推流等待时间和首屏时间都介于Windows 7和macOS Sierra之间,在服务器上测试时(系统CentOS 6.4,支持SO_REUSEPORT但是不支持TCP_FASTOPEN)跟macOS Sierra上差不多,但是考虑到服务器的CPU性能强大得多,所以负载不高情况下,macOS Sierra的表现是最好的。由于macOS Sierra是从Mac OS X更新来的,而Mac OS X的底层最初是在FreeBSD基础上开发的,所以推测在FreeBSD上的表现应该也不错。
小程序无疑是今年互联网的重大热点。本实验带您从零开始,基于 NodeJS 搭建起一个可以支撑小程序运行的服务,包括 HTTPS 部署、会话服务、WebSocket 服务,最后利用这些服务实现一个实时的剪刀石头布小游戏。 任务大纲 1 st 准备域名和证书 耗时:20min ~ 40min 2 nd 搭建小程序开发环境 耗时:15min ~ 30min 3 rd 搭建 HTTP 服务 耗时:15min ~ 30min 4 th 搭建 HTTPS 服务 耗时:15
腾讯云健康看板(Tencent Cloud Health Dashborad,下面简称:腾讯云status page ),采用了Next.js全栈框架实现SSR+SSG。
攻击者在入侵网站后,常常会通过恶意劫持流量来获取收益,从而实现流量变现。有一些黑帽劫持的手法堪称防不胜防,正常的访问行为很难发现异常。今天给大家分享一下常见的网站劫持手法和排查思路。
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。
视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或 浏览器插件播放器,其中以flash和H5播放器最常见。
开发多个项目的时候,我们希望能通过指定的前缀路径去访问不同的项目。比如,通过前缀 /projectA/ 去访问项目 A;通过前缀 /projectB/ 去访问项目 B。我们应该怎么设置呢?
解决一个场景,在请求前,后做一些统一的事情 现代项目中请求往往是统一封装的例如在统一包含的axios方法中做一些操作 //添加token axios.interceptors.request.use( config => { config.headers['token'] = 'xxxx' return config }, error => { return Promise.reject(error) } ) //统一异常处理 axios.interceptors.r
最近博客上线,但是在首次加载的时候,需要消耗很多时间,大概在50秒左右,就是说第一页登录页面,就需要用户等待50秒(服务器是最低配置也是一个原因),看了一下network,发现有两个文件加载的时间特别长,一个是vendor.js,一个是app.js,打包的时候,这两个文件也提示文件过大
领取专属 10元无门槛券
手把手带您无忧上云