20-前端代码优化之配置文件抽取思路
问题：在前端开发某个项目过程中，遇到了好几次需要换环境部署的场景，每次都需要在代码中改后端url以后重新打包，这样非常麻烦。
如果可以把这部分配置抽取出来，每次需要换环境部署时只要改一下配置文件，就可以不用重新打包，省下大量无意义的重复劳动，实现一包多用。
解决方案：将配置抽取到一个json文件中，放到public目录下，通过请求的方式获取。
来自GPT的赞美：
10-实现博客更新推送后自动刷新EdgeOne节点缓存
前情：在上一篇建站记录系列文章中，我们为博客源服务器配置了CDN加速，但是实际使用中发现，我们推送代码，自动构建生成的新包发到服务器后，我们使用域名访问站点，内容缺没有更新，这是为什么呢？实际上是因为站点资源更新后，CDN没有及时回源进行缓存刷新。
如果对更新的及时性没有特别的需求，完全可以设置CDN定时清除缓存来实现刷新。但是，我要精益求精，实现代码推送后CDN立即刷新，不推送代码就不刷新的功能，不然我浑身难受。
我使用的CDN是腾讯云新一代的EdgeOne，据说是新一代的CDN，多了DDos攻击防御和CC攻击功能，下面就以EdgeOne为例，记录下我的优化过程中。
关键流程：思路：开始动手前，需要先理清优化思路，我的优化思路如下：
在服务器上创建一个service，守护一个bash脚本，监听托管给nginx的静态资源文件夹的变化；
push代码时，静态资源包传到服务器，触发bash脚本，执行nodeJS文件
nodeJS文件中调用腾讯云API，发送请求刷新EdgeOne中博客站点的缓存
动手：1.编写bash脚本123456789101112131415161718192021 ...
使用cdn加速优化腾讯云COS图床的安全性问题
问题：之前在搭建腾讯云COS图床的过程中，查阅资料时留意到了有小伙伴说有被盗刷的风险，于是上网查阅了一下相关资料，还真是！(这个图里的兄弟太惨了😂)
参考链接：https://cloud.tencent.com/developer/article/2239296?areaSource=100001.4&traceId=kQzP3W3NM0uma1MVnz5AP
于是升级图床的安全性防护就很有必要，查了N多方案后，了解到可以通过CDN加速的方式提高图床的安全性，有效防止盗刷流量。
思路：
COS桶设置私有读写，禁止空refer访问；
设置私有读写后，直接使用COS桶的默认url就无法访问桶内的资源了，怎么办呢？这时候CDN就出场了
使用子域名配置一个CDN，指向COS桶的URL，腾讯云会提示授权给cdn访问COS桶，点击确认授权
上一步授权后，CDN就可以访问私有读写的存储桶了
等CDN部署完成，就可以使用CDN加速的域名访问我们存储桶内的资源，大功告成！🥳
具体操作：
需要前置知识：CDN，域名
知道原理以后操作就很简单，我这里就暂时先不复现了，后面有时候可能会更 ...
记录一次在Cesium场景中模型贴地效果的优化
问题：今天在开发业务过程中接到一个需求，是优化Cesium场景中模型的贴地效果，之前模型贴地的实现方式是在模型加载时，设置HeightReference为CLAMP_TO_GROUND来实现的，但是在实际使用场景中，这种方式并不能满足需求，以这种方式批量加载的模型，会在视角移过去之后才慢慢一个一个贴到地形上面，如果电脑性能很慢，或者浏览器没有启用GPU渲染，就会非常卡。
优化思路：问了下万能的GPT，它是这样说的：
然后查了下官方文档，发现有例子，直接复制粘贴需要的部分：
最后改造原有的loadModel函数
12345678910111213141516171819202122232425262728293031323334353637383940async loadModel({ position: [lng, lat], modelUrl, bearing = 0 }) { console.log('模型加载') //获取精确贴地形高度 const terrainProvider = viewer.sc ...
09-使用CDN加速网站
一、CDN基本概念CDN是什么？CDN的英文全称是Content Delivery Network，中文翻译叫内容分发网络
用现实中的例子来解释，就好比京东的物流网：
货物如果都呆在原产地，等客户下单后直接从原产地发货，这种就是不用cdn，网站访客与服务器直连的方式
货物如果生产出来先预先发货到几个大的物流中心，分管西部、西北、华中、东南、东北几大地区，那么这些地区的客户下单后，如果物流中心有货，就直接从物流中心发货，如果没货再从原产地发货，这种方式就是用上了cdn加速的方式
CDN是怎么工作的？CDN 的工作原理如下：
缓存内容： CDN 在全球（或全国）各地部署了多个服务器节点，这些节点被称为边缘服务器。这些服务器会缓存网站的静态资源，如图像、CSS、JavaScript 文件等。
就近访问： 当用户请求访问某个网站时，CDN 会自动将用户的请求路由到离用户地理位置最近的边缘服务器上。
加速传输： 边缘服务器会提供缓存过的内容，从而减少从源服务器到用户的传输距离，加速数据传输。这有助于降低延迟并提高网站加载速度。
利用CDN的优势？
提高网站性能： 用户可以从离他们更近的服 ...
ssl证书部署—使网站支持https访问
背景：前端时间在网站部署完成后，直接通过http访问时，浏览器会提示网站不安全，为了使网站支持https访问，需要申请一个https证书部署到服务器上。
步骤：1.申请免费的ssl证书如果没有特殊需求，可以直接申请免费的ssl证书使用，我买的是腾讯云的域名，可以在ssl证书控制台直接申请
2.下载证书上传到服务器申请到免费证书后在我的证书里点击下载，然后上传到服务器的/etc/nginx/ssl目录下
3.修改nginx配置使证书生效nginx配置文件：
1234567891011121314151617181920212223242526272829server { #SSL 默认访问端口号为 443 listen 443 ssl; #请填写绑定证书的域名 server_name cloud.tencent.com; #请填写证书文件的相对路径或绝对路径 ssl_certificate cloud.tencent.com_bundle.crt; #请填写私钥文件的相对路径或绝对路径 ssl_certificate_key cloud. ...
nginx静态网站部署配置高级
背景：在刚开始使用nginx部署静态网站时，我对nginx中的多个配置文件——nginx.d,nginx.conf,sites-available/* 的作用和概念搞不清楚，不太明白他们是怎么工作的，经过几天跟gpt的问答学习，逐渐梳理出来了一些关键问题，有助于新手搞清楚nginx的配置文件脉络，在这里分享给大家。
问答：Q1: nginx配置文件有哪些 ?Nginx的配置文件通常包括以下几个主要部分：
nginx.conf：这是Nginx的主配置文件，包含全局配置指令，比如worker_processes（工作进程数）、events（事件模块配置）等，可以理解为项目开发中的main函数，即入口配置文件
sites-available目录：这个目录通常包含所有可用的网站配置文件。每个配置文件对应一个网站的配置。这个目录下有一个默认的default配置文件，是nginx为我们提供的配置模版，在新增配置时，推荐以复制该模版然后进行修改的方式来新增配置。
sites-enabled目录：这个目录包含了实际生效的网站配置文件的符号链接。Nginx默认加载这个目录中的配置文件。
...
博客自动部署优化-静态网站自动部署方案盘点
前言：从开始研究本站博客自动部署方案开始到现在已经有三周左右了，准备在这篇文章里做一个方案盘点。
在自动部署过程中，核心是需要代码仓库有一个执行bash脚本的环境，这需要仓库服务提供商提供云计算资源，于是就产生了费用。在这其中，较大的商家因为有雄厚的经济实力，就可以提供一些免费的CI执行分钟数。
这其中广为流传的就是GithubAction,每个月有2000分钟数可以白嫖，此外netlify每月有300分钟，其他的我就不太了解了。如有了解的小伙伴可以再评论区补充一下。
本文所探讨的自动部署方案全都基于GithubAction实现，按部署的目的地，分第三方服务器和私有服务器两个部分介绍。
一、部署到第三方服务器这部分介绍三个方案，分别是部署到GithubPage，腾讯云存储桶，netlify，他们都有静态网站托管的服务，可以直接把打包好的文件传上去部署网站，部署以后会生成一个子域名以供访问，自己有域名也可以绑定自定义的域名。
此外还有vercel，giteePage等方式，我暂时还没使用过，有用过的朋友也可以评论区补充一下。
方案1——部署到GithubPage
优点：部署最简单，网上攻 ...
解决文件权限问题导致的nginx403报错
问题描述：nginx配置好以后，通过浏览器访问遇到403报错，这里记录一下解决过程；
问题排查：1.首先查看是否是文件访问权限问题，如果nginx的执行用户无法访问需要托管的文件，就会报403，键入如下命令查看文件权限
1ls -l your/file
该命令会列出文件或文件夹中所有文件的访问权限，如图所示的文件的访问权限都是www-data用户组下www-data角色
2.再输入如下命令，打开nginx配置文件，查看nginx的执行用户是谁
1cat /etc/nginx/nginx.conf
可以看到nginx的执行用户是 www-data，如果与上面看到的文件权限不一致则会出现403错误。这时就需要修改文件的访问权限允许www-data用户访问。
3.修改文件权限
先修改文件夹或文件的所有者
1sudo chown -R www-data:www-data /path/to/your/folder
然后修改文件所有者的具体操作权限
💡 750表示文件所有者具有读、写、执行的权限，所属组具有读、执行的权限，其他用户没有任何权限。
1sudo chmod -R 750 ...
博客自动部署优化01-netlify自动部署优化
起因：昨天因为twikoo评论的问题，加到了twikoo群里询问群佬没有得到解决(文章改名以后twikoo的历史评论关联不上了，有人知道解决方法的话可以留言，感谢感谢~)，却在群里意外收获了一则消息——netlify的自动构建部署服务每个月免费时长是300分钟，虽然300分钟也足够了，但是githubAction的每月2000分钟免费时长更胜一筹，于是问高人要了一个overflow脚本，完成了netlify自动部署的优化。
过程：1.首先在项目根目录的.github/overflow/目录下新建一个.yml脚本配置文件，将大佬给的部署配置粘贴进去
1234567891011121314151617181920212223242526272829303132name: 部署到netlifyon: push: branches: - mainjobs: deploy: runs-on: ubuntu-latest steps: - name: 通用的代码拉取 uses: actions/checkout@v3 ...