SUIBU’s BLOG

Pm2 & nginx

2021-09-13T00:00:00+00:00

layout: post read_time: true show_date: true title: ‘服务端登陆校验’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [工程化] category: opinion author: 随步 description: ‘服务端登陆校验’ —

pm2进程守护，当机后自动重启，支持多进程，利用cpu多核的计算方式。日志记录，让问题可追溯 nginx：反向代理

pm2和nginx的配置 pm2和nginx日志拆分

登陆校验jwt

2021-09-12T00:00:00+00:00

登陆鉴权的方式

cookie和session

FE输入用户名密码发送登陆请求给BE， BE验证成功后，返回信息时set-cookie 接下来所有的接口访问，都会自动带上cookie（浏览器默认行为，http协议的规定）

session的出现： cookie只存储userid，并且在网络中传输的。不会暴露用户具体信息，cookie信息是存储在浏览器端的用户信息存储在session（服务端）的 session的缺点：占用服务端成本，有硬件成本多进程多服务器时，不好同步，一般使用第三方redis存储，成本高跨域传递cookie，需要特殊配置。（跨域传递默认不穿cookie，而session是严重依赖于cookie的）

JWT json web token

FE输入用户名密码发送登陆请求给BE， BE验证成功后返回token 之后每次前端请求都在header带上token JWT优点：不占用服务器内存，多进程多服务器不受影响不受跨域显示

SSO和OAuth2

sso单点登陆 oauth2第三方鉴权的常用方式（WX）

SSO的实现场景 1、如果业务系统都在同一个主域下，比如aa.baidu.com和bb.baidu.com。直接把cookie domain设置为主域名 2、不同域名，

OAUTH2

Mysql mongodb redis

2021-09-11T00:00:00+00:00

layout: post read_time: true show_date: true title: ‘组件库打包’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [工程化] category: opinion author: 随步 description: ‘组件库库打包’ — Mysql Sequelize mysql是关系型数据库

Mongodb Mongoose

Redis 多核CPU擅长处理多进程任务，所有web server也都是多进程。无论PM2，nginx还是其他。但进程之间有内存隔离，所以需要第三方缓存服务。类似于用户A第一次访问进程1，东西如果暂存在内存片段1中，第二次访问进入了进程2，由于内存隔离，进程2又需要在缓存一次。所以需要redis这样的第三方缓存服务去存储。

Nodejs框架

2021-09-10T00:00:00+00:00

layout: post read_time: true show_date: true title: ‘nodejs框架选型’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [服务端] category: opinion author: 随步 description: ‘nodejs框架选型’ —

Koa2和Express

Egg.js

Nest.js

面向aop编程，大量使用装饰器语法

Npm

2021-09-09T00:00:00+00:00

layout: post read_time: true show_date: true title: ‘组件库打包’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [工程化] category: opinion author: 随步 description: ‘组件库库打包’ —

npm依赖分类

dependency：运行项目时需要使用的npm package devDependency：开发工作流下依赖的npm package,例如：单测，语法转换，lint工具，构建工具 peerDependency:需要核心依赖库，做组件库的时候告诉外界，对方一定要先拥有peerDependency中指定的那些依赖。本地开发也需要peerDependency资源库的时候，可移至devDependency

npm file字段

files: [dist] 指示npm publish 需要上传的内容 package.json/README.md/CHANGELOG.md/LICENSE 都会包含在其中

npm script 的生命周期

script: {
	// 整个compress的生命周期，输入npm run compress，会先执行 precompress -> compress -> postcompress
	precompress: ''
	compress: '',
	postcompress: ''
}

prepare prepublishOnly 只在npm publish前运行

publish 做的事情：把file配置的文件以及其他信息配置文件传到npm上

组件库打包

2021-09-09T00:00:00+00:00

webpack开发打包一条龙通过各种loader处理静态资源通过各种插件对文件进行处理 code spliting将公共模块进行提取提供一个webpack-dev-server进行本地开发（支持HMR模块热替换）

rollup构建打包工具面向ES module构建出结构扁平，性能出众的类库。 ES Module的规则->区别于commonjs，commonjs是动态的模块系统，在哪里都可以调用

ESModule在编译时就可以确定模块的依赖关系，所以诞生了ES Module的规则 1、import只能作为模块顶层的语句出现，不能出现在function里，或是if里

由于ES Module静态的引用方式，编译时就可以获取模块依赖关系，所以就有了Tree shaking，摇树，将死了的叶子掉下来，同时也就是将模块内没有使用的代码就不会进行打包，减少体积。例如：a.js有2个export function，b.js 使用了a.js的一个function，另一个function是不会被打包的

webpack和rollup的使用选择 webpack适用于app应用类库或js项目rollup更加适合

webpack优点强大的生态插件面向开发的特性支持HMR，按需加载、公共模块提取简化web开发的环节，资源的缓存

rollup的优点构建高性能的模块文件编译的代码可读性高，内容小，执行效率高配置简单

打包什么类型的文件

conclusion：首要格式ES，并且支持ts type文件，备选方案：UMD

1、Commonjs、es6module需要特殊的module bundler支持，例如webpack，rollup

2、AMD已经有点过时了，需要使用特殊的Loader-requirejs

3、浏览器中直接使用UMD，通用的一种js格式，兼容commonjs，AMD和浏览器缺陷资源包太大，不支持tree shaking，很多UI组件库都会使用UMD格式的就是文件，让用户直接在html中以script直接引用 UMD的实现：antd.js

(function webpackUniversalModuleDefinition(root, factory) {
    // 如果在全局找到exports，意味着它是commonjs
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("moment"), require("react"), require("react-dom"));
    // 如果是AMD形式来写，全局会注入define
	else if(typeof define === 'function' && define.amd)
    // 以define的形式返回
		define(["moment", "react", "react-dom"], factory);
	else if(typeof exports === 'object')
    // commonjs方式导出
		exports["antd"] = factory(require("moment"), require("react"), require("react-dom"));
	else
    // 浏览器，直接挂全局
		root["antd"] = factory(root["moment"], root["React"], root["ReactDOM"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_moment__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) {

语法速记： commonjs语法 module.exports,exports ESModule语法：export，export default

Vite

2021-09-07T00:00:00+00:00

layout: post read_time: true show_date: true title: ‘前端工具链’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [cli] category: opinion author: 随步 description: ‘vite’ —

vite 是一个快速的开发服务器和简单的构建工具

前端工具链 copy

2021-09-06T00:00:00+00:00

layout: post read_time: true show_date: true title: ‘前端工具链’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [cli] category: opinion author: 随步 description: ‘前端工具链’ —

静态类型语言

代码风格检查 linter

多人协作的弊端，风格各异，维护和扩展的困难 eslint 它解决的问题是：检查代码质量、代码风格

module.exports = {
    "extends": [
        'eslint:recommanded',
        '直接使用比较出名的组织出的规则'
    ],
    rules: {
        'semi': ['error', 'never']
    }
}

Prettier 它的作用是：作eslint的辅助工具，优势是更少的配置项，优雅的代码风格它的原理：禁用所有和Prettier冲突的Eslint的代码格式规则将所有Prettier的规则和修改导入Eslint中，在Eslint统一的显示这些错误

包管理

npm yarn

转译器

非js（例如coffeejs）不同版本的js转译成平台要求的等价兼容代码 babel

开发服务器

热更新HMR

打包工具 Bundler

将源代码转换成符合生产环境的代码 webpack-loader，plugin，大而全的功能 Rollup- 专注于打包输出各种格式 Parcel-零配置

任务管理工具

自动执行项目所需的重复任务 CSS预处理优化图片合并压缩js 文件处理监听文件变化

Gulp流式管道写法、webpack插件的方式

Github Action

2021-09-05T00:00:00+00:00

layout: post read_time: true show_date: true title: ‘github action’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [cli] category: opinion author: 随步 description: ‘github action’ —

name: //语义化的名字
on: // 触发条件
  push:
    branches: [ master ] // 分支
    paths: ['src/**'] // 这些文件修改才触发
        
  pull_request:
    branches: [ master ]

jobs:
    test:
        runs-on: ubuntu-latest // 在ubuntu 操作系统上跑
        steps: // 写几个-，就有几个步骤
            - uses: actions/checkout@v2 // 用第三方的actions，git pull 的意思
            - name: Use Nodejs
              uses: actions/setup-node@v1 // 安装nodejs
              with: node-version: 14
            - name: print node version
              run: |
                node -v && npm -v && echo 'hi github actions'
    test2:
        runs-on: ubuntu-latest
        steps:
            - run: touch a.txt
            - run: echo '输入文本到 a.txt' > a.txt
            - run: cat a.txt

 

Docker

2021-09-04T00:00:00+00:00

layout: post read_time: true show_date: true title: ‘docker’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [cli] category: opinion author: 随步 description: ‘github action’ —

docker的基础使用

docker install nginx // 下载镜像
docker run -p 81:80 -d --name suibu-nginx-test
// 启动 nginx镜像的容器： 本机81端口映射到容器的80端口；-d后台允许，不要在控制显示，不阻塞控制台的输入；--name 容器名称

docker ps
docker inspect container-ID //容器的信息
docker logs container-ID //容器内运行的日志
docker exec -it container-ID /bin/sh // 进入容器控制台（进入虚拟机）
 ➜  ~ docker exec -it 85 /bin/sh
# pwd
/
# cd /usr/share/nginx/html
# ls
50x.html  index.html
// 我们看见的lcoalhost:81映射到容器80端口看见的nginx的页面就是这个index.html


// docker 可以将容器作为中转站，让用户只使用容器内的镜像作为服务，运行的文件可以是本地的文件，而不是虚拟机里的文件
 ➜  ~ docker run -p 81:80 -d -v /Users/liuyan/FE/:/usr/share/nginx/html --na
me suibu-nginx-test-volumn nginx

dockerFile 的基础语法

创建DockerFile，可以自己去构建镜像后去运行容器

FROM node:14 // 基于某一个镜像开始创建
WORKDIR /app // 设置工作目录
COPY . /app // 将当前文件夹下所有的文件拷贝到工作目录

// 有dockerignore文件，可以在这个copy的过程中，忽略掉写入的文件

# 构建镜像时，安装必备的软件，可以有多个run
RUN xxx

#启动容器时候，只能有一个CMD
CMD xxx

# 考虑脚本是在RUN里写还是CMD写的时候，想一下：构建只有一次，启动容器有多次

# 环境变量
ENV K1=v

EXAMPLE

FROM node:14 // 基于某一个镜像开始创建
WORKDIR /app // 设置工作目录
COPY . /app // 将当前文件夹下所有的文件拷贝到工作目录

# 设置统一的时区
RUN ln -fs /usr/share/zoneinfo/Asia/ShangHai /etc/localtime && echo 'Asia/ShangHai' > /etc/timezone

RUN npm set registry 国内npm镜像
RUN npm i

#启动
CMD echo $SERVER_NAME && npm run dev && npx pm2 log
#占据控制台阻塞的，一直占据控制台

#环境变量
ENV SERVER_NAME=""
#在js代码中也可以使用 process.env.SERVER_NAME

dockerFile 构建镜像

依据dockerFile去构建出一个镜像

docker build -t <name> .
# 最后 . 指Dockerfile在当前文件夹下； <name> 镜像的名称
docker images

➜  docker-study docker build -t suibu-test-image .
➜  ✗ docker run -p 9090:3000 -d --name suibu-server suibu-test-image
docker ps
docker logs containerID
docker rm containerID
docker rmi imageID

docker compose

多个容器组合，软件设计和开发，有单一职责原则，每个容器只负责一个服务。如果开发环境需要多个服务，就需要启动多个docker容器，连通多个docker容器，就需要docker compose