Qiankun+Nuxt微应用静态化部署
为什么这么做
qiankun 是基于 single-spa 做了二次封装的微前端框架,我们项目当前的服务端渲染是完全没法用了。在服务端没法用的前提下,其实nuxt启动的node服务,就只是启动了一个服务而已 并没有任何服务端渲染。而如果只是启动个服务、做一下代理的话nginx轻量化的多。
部署效率上,当前灵洞在gitlab上执行一次CI自动化部署 耗时15-19分钟,太慢了。主要时间被浪费在了npm run build 和 (docker build的时候node_modules里面这5-6万个文件)。而如果使用静态化的部署方式 npm run build 会快很多,docker build的时候也不需要node_modules。速度就快很多了 耗时1-2分钟。因为我们做的是微前端,原来部署一个项目,现在要部署10个左右的项目,所以提高部署效率很有必要。
服务器资源消耗少很多,部署到生产环境,node服务300-600M,nginx服务 140M左右。(。・ω・。)配置文件nuxt.config.js123export default { mode: 'spa ...
微前端访问子应用跨域问题
部署时的问题1、子应用生产环境下,主应用请求子应用会产生跨域错误。
2、主应用请求子应用的资源时是qiankun框架内自带的fetch方法,使用https访问页面时,fetch方法还是会发送http请求导致(blocked:mixed-content)错误。
3、一个服务器可能会部署多个子应用,所以需要区分不同的子应用,以便nginx能代理到正确的子应用服务。
解决办法
1、子应用nuxt.config.js中加入。
build: { publicPath: process.env.NODE_ENV === ‘production’ ? assets-path : ‘’,},为了便于维护及后续的处理,这里推荐统一格式{xxxx-path}
2、主应用中启动配置沙箱时加入自定义的fetch方法。
const portHash = { 10001: ‘system-child’,}start({ sandbox: { experimentalStyleIsolation: true, }, async fetch(url, …args) { if (window.lo ...
常用linux命令
常用:12345678910111213141516171819202122232425262728293031323334353637383940pwd 查看路径cd 切换工作目录ls 查看目录下的子目录和文件mkdir 新建文件夹touch 新建文件vi 修改文件i 保存并退出:wqrm -rf 文件 删除文件cp a.test b.test /home/user 复制a.test和b.test 到/home/usermv 移动打zip包:1.压缩一个zip文件: zip -r 压缩文件名称.zip 文件名称2.解压一个zip文件: unzip 压缩文件名称 unzip 压缩文件名称 -d 指定路径打tar/tar.gz包1.先打包一个目录: tar -cvf 压缩文件名.tar 文件名称2.紧接着是压缩这个打包的目录: gzip 压缩文件名.tar 压缩文件名.tar.gz3.解压一个XXXX.tar.gz文件为一个XXXX.tar文件: gzip -d 压缩文件名.tar.gz 再接下来是将打包文件解包: 解包在当前目录下面: tar -xvf ...
v-html指令潜在的xss攻击
什么是 XSSCross-Site Scripting(跨站脚本攻击)简称 XSS,是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本,使之在用户的浏览器上运行。利用这些恶意脚本,攻击者可获取用户的敏感信息如 Cookie、SessionID 等,进而危害数据安全。
XSS 的本质是:恶意代码未经过滤,与网站正常的代码混在一起;浏览器无法分辨哪些脚本是可信的,导致恶意脚本被执行。而由于直接在用户的终端执行,恶意代码能够直接获取用户的信息,或者利用这些信息冒充用户向网站发起攻击者定义的请求。在部分情况下,由于输入的限制,注入的恶意脚本比较短。但可以通过引入外部的脚本,并由浏览器执行,来完成比较复杂的攻击策略。
这里有一个问题:用户是通过哪种方法“注入”恶意脚本的呢?不仅仅是业务上的“用户的 UGC 内容”可以进行注入,包括 URL 上的参数等都可以是攻击的来源。在处理输入时,以下内容都不可信:
来自用户的 UGC 信息
来自第三方的链接
URL 参数
POST 参数
Referer (可能来自不可信的来源)
Cookie (可能来自其他子域注入)
XSS 分类根据攻击的来源,XS ...
GitHub Pages自定义域名
挑选域名注册服务商大的服务商主要有:1.阿里云 2.腾讯云 3.华为云
实名认证模板等待审核通过。
挑选购买域名买个顺眼的。
添加域名解析添加两条记录1.xxx.github.io2.IP(ping一下xxx.github.io)
1ping xxx.github.io
配置GitHub Pages在setting/pages/Custom domain 中填入我们的域名
等待完成
使用GitHub Pages搭建静态网站
简介GitHub Pages 是什么?GitHub Pages 是由 GitHub 官方提供的一种免费的静态站点托管服务,让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。官网:https://pages.github.com/
Hexo 是什么?Hexo 是一个快速、简洁且高效的静态博客框架,它基于 Node.js 运行,可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。官网:https://hexo.io/
环境Node.js官网:https://nodejs.org/en/
Git官网:https://git-scm.com/
Hexo安装hexo-cli1npm install -g hexo-cli
初始化项目1hexo init
常规操作12hexo shexo g
仓库仓库名1Github用户名.github.io
设置用户名和邮箱12git config --global user.name "GitHub用户名"git config --global user.email "GitHub邮箱& ...
提升GitHub访问速度
简介修改hosts文件,达到绕过国内DNS解析的目的,提升Github访问速度。
查询IP使用http://ping.chinaz.com/查询以下三个链接
123github.comassets-cdn.github.comgithub.global.ssl.fastly.net
修改hostshosts文件位置
1C:\Windows\System32\drivers\etc
打开hosts文件后,在末尾添加以下
1234#github查询到的IP github.com查询到的IP assets-cdn.github.com查询到的IP github.global.ssl.fastly.net
更新dns打开cmd,执行如下
1ipconfig/flushdns
可以流畅地访问GitHub了