202212
1203
争取任务都干掉,不要荒废周末的大好时间,
从 github 传文件到私服插件 https://github.com/wlixcc/SFTP-Deploy-Action 老是传送失败,换了一个上传私服的插件即可
- 基于 githubAction 实现前端项目的自动化测试/发布和部署(已完成)
- 基于 githubAction 实现 Nodejs 项目的自动化测试/发布和部署(已完成)
- 基于 githubAction 实现 npm 包自动发布
1204
- git 创建远程分支时报错
- 配置 nginx 时 location 不生效
1205
哈哈哈,周六瞎折腾搞得 nginx 配置不生效的问题找到了,学到了一点:学会看日志,报错是有原因的,
之前是这么配置的
location /love {
root /www/web/record/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
报错 2022/12/05 14:14:27 [error] 17800#17800: *282 open() "/www/web/record/dist/love" failed (2: No such file or directory), client: 43.247.101.196, server: _, request: "GET /record HTTP/1.1", host: "111.230.199.157"
解决:
location /love {
root /www/web/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
deploy.yml 脚本内容如下
name: Deploy
on:
push:
branches:
- main
env:
TARGET_DIR: /www/web/love
jobs:
deploy:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
steps:
- name: Checkout # 步骤1
uses: actions/checkout@v1 # 使用的动作。格式:userName/repoName。作用:检出仓库,获取源码。 官方actions库:https://github.com/actions
- name: Use Node.js # 步骤2
uses: actions/setup-node@v1 # 作用:安装nodejs
with:
node-version: ${{ matrix.node-version }} # 版本
- run: npm install --frozen-lockfile
- name: Build
run: npm run docs:build
- name: Deploy Github Page
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: docs/.vitepress/dist
- name: Deploy Server
uses: cross-the-world/ssh-scp-ssh-pipelines@latest
env:
WELCOME: "ssh scp ssh pipelines CPP server"
LASTSSH: "after copying"
with:
host: "111.230.199.157"
user: "root"
pass: ${{ secrets.FTP_PASSWORD }}
connect_timeout: 20s
first_ssh: |-
rm -rf $TARGET_DIR
echo $WELCOME
mkdir -p $TARGET_DIR
scp: |-
'./docs/.vitepress/dist/*' => $TARGET_DIR/
last_ssh: |-
echo $LASTSSH
1206
今天看到了云原生/BFF/severless,卧槽,有时间实践实践,搞起来,向大佬学习
1207
人总是贪婪的,看到这么多不会的,都想一下子掌握,怎么可能呢,还是要遵循大自然规律的,循序渐进,1 月 5 日记得用掉云开发体验券
目前想学习的有点多,感觉凌乱了,千万不要慌,要沉下心来
- 个人域名还是配置下 https 协议,不然老是报各种未知问题(待完成)
- LRU,复习下 LRU 算法
- adb 获取当前设备 UUID
// 查看当前链接的手机设备
adb devices
cd /Users/xmly/Library/HarmonyOS/Sdk/toolchains
// 获取手机uuid
adb shell bm get --udid
- 配置 vercel 都是英文,真是不太适应,vercel setting,配置了好久都没配置好
1208
vercel 总算是配置完毕,部署成功,访问地址vercel-love,
有一个问题就是,不能对子路径进行配置,我现在的需求是: bythewayer.com/love 访问个人记录网站,vercel 如果也想配置成子路径,比如这种 https://love-niaogege.vercel.app/love 应该如何处理,现在解决办法是根据分支不同,主分支还是打包到/love 路径下,vercel 分支则是打包到跟路径下
另外一个问题是 *.vercel.app已被 DNS 污染,基于此搭建的评论 server 端 API 无法访问,目前可行的解决方案只有绑定自己的域名。
MongoDb 先放一放,把 Docker 和 K8s 基础知识学习学习,B 站有很多阔以学习的知识点
个人博客迁移下,原先的代码好久没有变更,打算另起炉灶 4.简历目标上增加 2 个小子项
- 了解前端部署
- 了解 CI/CD?
- 了解 Docker? 就看这几天的背书了?
###如何使用阿里云的 OSS 对象存储服务?
1209
自己测试用,新建了一个 cpp-demo 镜像,发布到了 dockerhub,如何在另一台机器用起来呢
// 列出所有镜像
docker images ls
// 删除images,通过image的id来指定删除谁
docker rmi <image id>
// 生成镜像
// 最后的那个点表示 Dockerfile 文件所在的路径,上例是当前路径,所以是一个点。
docker image build -t next-demo:0.0.1 .
// 从远程拉取镜像
docker image pull niaogege/next-demo:0.0.2
# 查出容器的 ID
docker container ls --all
# 删除指定的容器文件
docker container rm [containerID]
# 停止当前containerID
docker container kill [containerID]
## 生成容器
docker container run -p 8000:3000 -it cpp-demo
docker container run -p 3002:3002 -it niaogege/next-demo:0.0.2
# 查看镜像内的文件列表
docker exec -it [containerID] /bin/bash
# 查看当前镜像内的文件
docker run -it --entrypoint sh <镜像名称>
Nextjs,如何部署 Nextjs 项目
- nextjs 默认启动端口 3000,如何设置新的端口号,以及如何结合 pm2 守护进程
"scripts": {
"dev": "next dev -p 3002",
"build": "next build",
"start": "next start -p 3002",
"lint": "next lint",
// --name 应用名称
"server": "pm2-docker start npm --name next-cpp-demo -- run start"
},
server {
listen 80;
server_name www.bythewayer.com;
root /usr/share/nginx/html;
# 个人生活
location /love {
root /www/web/;
index index.html index.htm;
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式,后面的图片压缩不需要的可以自行删除
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 设置压缩所需要的缓冲区大小
gzip_buffers 4 16k;
try_files $uri $uri/ /index.html;
}
# 个人学习
location /learn {
root /www/web/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# docker 调试
# koa接口调试
location /koa {
proxy_pass http://localhost:8888;
}
# api接口调试
location /api {
proxy_pass http://localhost:3000;
}
# nextjs 项目
location /next {
proxy_pass http://localhost:3001;
}
}
新增 tcp 端口,记得重启防火墙
# 开放某个端口,带--permanent参数是永久开放
firewall-cmd --zone=public --add-port=3001/tcp --permanent
每次开启完之后记得重启防火墙
# 重启
systemctl reload firewalld
# 查看开启的端口
firewall-cmd --list-ports
# --------------
# 移除开放的端口
firewall-cmd --zone=public --remove-port=8080/tcp --permanent
1210
- Nodejs 中的 cluster 模式和 fork 模式区别
采用 seg 上网友的回复
Details
fork 分叉模式(child_process.fork(modulePath[, args][, options])),单实例多进程,常用于多语言混编,比如 php、python 等,不支持端口复用,需要自己做应用的端口分配和负载均衡的子进程业务代码。 缺点就是单服务器实例容易由于异常会导致服务器实例崩溃。 for Example: 默认情况下,pm2 将使用 node 这样 pm2 start server.js
cluster 集群模式,多实例多进程,但是只支持 node,端口可以复用,不需要额外的端口配置,0 代码实现负载均衡。 优点就是由于多实例机制,可以保证服务器的容错性,就算出现异常也不会使多个服务器实例同时崩溃。 for Example: pm2 start -i 4 server.js 将启动 4 个 server.js 实例并让集群模块处理负载平衡
共同点: 都是多进程,都需要消息机制或数据持久化来实现数据共享
- docker 部署前端 nodejs 项目
- 注重身体健康和眼睛健康(上了年龄没办法,比不上小年轻了)
1211
- docker-compose 学习
- docerk 高效部署
1212
- docker-compose 配置学习
- nginx 配置问题 现象:访问网站,刷新之后显示 nginx 页面,nginx.conf 增加配置问题解决
目前 nginx 配置
location /learn {
alias /www/web/learn;
index index.html index.htm;
#error_page /wx/index.html;
# 这句话啥意思
if (!-e $request_filename) {
rewrite ^/(.*) /learn/index.html last;
break;
}
try_files $uri $uri/ /index.html;
}
1213
将静态资源推送至 OSS(Object Storage Service)云存储服务,下个月搞一搞
对于不确定的命令行或者容易忘记的命令行,阔以采用 docker image --help docker container --h 等方式强化记忆!!
docker-compse.yml Compose 定位是 「定义和运行多个 Docker 容器的应用(Defining and running multi-container Docker applications)」,其前身是开源项目 Fig。
我们知道使用一个 Dockerfile 模板文件可以定义一个单独的应用容器,如果需要定义多个容器就需要服务编排。服务编排有很多种技术方案,今天给大家介绍 Docker 官方产品 Docker Compose。 Dockerfile 可以让用户管理一个单独的应用容器;而 Compose 则允许用户在一个模板(YAML 格式) 中定义一组相关联的应用容器( 被称为一个 project,即项目),例如一个 Web 服务容器再加上后端的数据库服务容器等。
Compose 中有两个重要的概念:
- 服务 (service):一个应用的容器,实际上可以包括若干运行多个镜像的容器实例。
- 项目 (project):由一组关联的应用容器组成的一个完整业务单元,在 docker-compose.yml 文件中定义。 Compose 的默认管理对象是项目,通过子命令对项目中的一组容器进行便捷地生命周期管理。
version: '3'
services:
web:
build: .
ports:
- "5000:5000"
redis:
image: "redis:alpine"
启动项目脚本
# --build: 每次启动容器前构建镜像
docker-compose up -d --build
- 越看重的东西越比较在意,反正现在就这样了,做做表面功夫,12 月 21 日年终述职
- --chown=nextjs:nodejs
- COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next 这句话中的 --chown=nextjs:nodejs 代表啥
在使用该指令的时候还可以加上 **--chown=<user>:<group>** 选项来改变文件的所属用户及所属组。
1214
- 宝贝考研考生定在了上海浦东新区建桥学院,需要提前安排好饮食和交通
- 今天需要把快应用剩下部分完成,明天开始做自分享
1215
- 疫情越来越严重,没有早点囤药,失策,一定要在考试之前确保不能阳
- 搞了一天的快应用,明天还要发版本,有点赶
1216
- 每次听到有多少爱阔以重来,想到一位长辈,如今长辈已经不在了,甚是怀念,所以在有生之年让自己不能留有遗憾
1217
- 周末在家躺平,把 oppo 快应用和自分享的需求做了下
- 准备年终述职和绩效自评
1218
- 宝贝 21:30 温度 39.0 23:30 温度 38.5
- 1.助力列表 2.付费提示 3.接口测试 4.埋点 5.oppo
1219
- 忙碌的周一,1.助力列表 2.付费提示 3.接口测试 4.埋点 5.oppo 全部搞完
- 年终述职报告
- 自分享付费样式和实验
1220/1221
- 小阳人一个
- 发高烧,全身肌肉酸痛
1222
- 准备好对象要考研的物品
- 记录下高斯模糊的一种实现方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url("https://qn.huat.xyz/mac/20211203155112.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 343px;
height: 170px;
margin: 0 auto 40px;
border-radius: 24px;
background-image: url("https://qn.huat.xyz/mac/20211203155112.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.3);
border-radius: 24px;
font-family: sans-serif;
font-size: 24px;
text-align: center;
line-height: 1;
color: white;
}
</style>
</head>
<body>
<!-- 方式一:backdrop-filter -->
<div class="container">
<div class="box">
<p>backdrop-filter: blur(10px)</p>
</div>
</div>
</body>
</html>
需要注意的点:
- 高斯模糊的是当前的图片,所以需要在容器父级元素设置背景图
- 高斯模糊真正的设置是在容器子级元素
- css 中的 backdrop-filter 属性 有些厂商不支持,需要加上厂商前缀
1223
- 对象考研前的准备工作
- 周六周日陪考,期间开始学习 vite 源码相关
1226
- 2 天陪考结束
- 还是太高估自己了,阳之后五天还是没有恢复体力
- 周一到周三继续居家办公
- nginx 配置 https 证书还是蛮方便的
#Nginx 安装https证书
#SSL 默认访问端口号为 443
listen 443 ssl;
#请填写绑定证书的域名
server_name 111.230.199.157;
#请填写证书文件的相对路径或绝对路径
ssl_certificate www.bythewayer.com_bundle.crt;
#请填写私钥文件的相对路径或绝对路径
ssl_certificate_key www.bythewayer.com.key;
ssl_session_timeout 5m;
#请按照以下协议配置
ssl_protocols TLSv1.2 TLSv1.3;
#请按照以下套件配置,配置加密套件,写法遵循 openssl 标准。
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
Nginx 服务器 SSL 证书安装部署,配置完效果love
1227
- 充分发挥自己的专业能力,制作 2 个小工具,一个是计算税后收入,一个是制作在线 web 简历
- mySql 安装和基本学习
- 记录博客中的gitalk 问题,主要是下面配置
comment:
gitalk:
enable: true
owner: niaogege #这个项目名的拥有者(GitHub账号或组织)
admin: ['niaogege'] #这个项目名的拥有者(GitHub账号或组织)
repo: blog-comment # 这里一定要注意的是仓库名,不是仓库git地址
ClientID: 14358f21bfa09660100b
ClientSecret: 96f34217eea90602cb5b142eb89508898354754c
labels: 'gitalk'
perPage: 10 #每页多少个评论
pagerDirection: last #排序方式是从旧到新(first),还是从新到旧(last)
createIssueManually: true #是否自动创建isssue,自动创建需要当前登录的用户为adminuser
distractionFreeMode: false #是否启用快捷键(cmd|ctrl + enter) 提交评论
socialList:
- name: telegram
url: https://bythewayer.com/love/
- name: github
url: https://github.com/niaogege
- name: mail
url: mailto:291003932@qq.com
highlight:
light: https://cdn.staticfile.org/highlight.js/11.5.0/styles/default.min.css
dark: https://cdn.staticfile.org/highlight.js/11.5.0/styles/tokyo-night-dark.min.css
copyright:
enable: true
license: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'
1228
- 如果 vscode 自动的终端不能提交代码,一定要用系统自带的终端 iterm 进行代码提交
- 申请云图床,后期用到的图片放到该平台上即可
- Linux 查看磁盘空间可以使用 df 和 du 命令。
- mysql 相关学习
- 基础篇-MySQL 数据库和表的基本操作
- 技术老是被灌上业务 OKR,业务没能实现,跟技术上有啥关系??
1229
- 在写 useRequest 的时候报了一个错Illegal invocation
const useFetch = (url, options) => {
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);
const [abort, setAbort] = React.useState(() => {});
React.useEffect(() => {
const fetchData = async () => {
try {
const abortController = new AbortController();
const signal = abortController.signal;
setAbort(abortController.abort);
const res = await fetch(url, { ...options, signal });
const json = await res.json();
setResponse(json);
} catch (error) {
setError(error);
}
};
fetchData();
return () => {
abort();
};
}, []);
return { response, error, abort };
};
后面查了很多资料才找到问题解决办法"Illegal invocation" errors in JavaScript
1230/1231
- 新年快乐!