在某些时候，为了数据的安全和保密性，需要对来回的数据进行加密处理。如果是 laravel 框架，中间件绝对是个好东西。
一波操作
laravel 中间件包含一个完整的工作流，即请求前中间件（request）和请求后中间件（response）。在我们这次的场景中，刚好很好的用到了整个流程。
操作开始：
homestead 默认情况，在本机，是可以通过配置的域名访问虚拟机中的站点。可是，你的同事（其他）电脑是访问不了你的站点。既想你同事能访问，又不想用 ip。修改下配置，即可以实现。
这种需求，虽然不常见，但很有必要。因为你们自己没有公网服务器或不方便公网服务器用来测试。而刚好你的修改又需要特殊的测试，这个时候，这种需求就非常有用了。
操作一波
# win10
ipconfig
# mac
ifconfig
# 找到自己的 ip 192.168.1.101（后边会用到）
# 假如你之前已经启动了虚拟机，先关掉比较好
exit
vagrant halt
不走 nginx 的代理，请求连接 websocket，总需要带上端口号。比如
new WebSocket("wss://www.xxx.com:9958")，通过 nginx 的代理就可以实现这样的请求，比如new WebSocket("wss://www.xxx.com/wss")
一波操作
vim www.xxx.com.conf
upstream websocket {
# wss 配置代理到 127.0.0.1:9958
server 127.0.0.1:9958;
}
server
{
listen 80;
server_name xxx.com www.xxx.com;
return 301 https://www.xxx.com$request_uri;
}
server
{
listen 443 ssl http2;
server_name xxx.com www.xxx.com;
if ($host = 'xxx.com' ){
return 301 https://www.xxx.com$request_uri;
}
ssl_certificate /service/nginx/conf/ssl/www.xxx.com.pem;
ssl_certificate_key /service/nginx/conf/ssl/www.xxx.com.key;
location /wss {
# 代理到上边的自定义的地址
proxy_pass http://websocket;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
…
重启， nginx。
其实，在 proxy_pass 这里，可以直接设置为 127.0.0.1:9958
还有请求的时候，域名后一定要带上 wss 。
Client does not support authentication protocol requested by server; conside 问题解决
Client does not support authentication protocol requested by server; conside 新旧版本密码算法不同引起的错误，只需要设置下密码方式为 mysql_native_password 就可。还是 navicat 做的好，新旧密码都支持。
操作一波
mysql -u root -p
xxxx
use mysql;
show tables;
# 查看已经有的用户
select user, host from user;
# 重新设置下密码，并使之生效
# 之前是 'xxx'@'%' IDENTIFIED BY 'xxxxxx'
'xxx'@'%' IDENTIFIED WITH mysql_native_password BY 'xxxxxx'
flush privileges;
使用 redis 客户端是比较有必要的，这个时候就需要远程登录 redis 了。不过，redis 默认是无密码，只允许服务端登录。修改下配置，重启 redis 即可实现想要的目的。
一波操作
修改 redis.conf 文件。
- 设置密码。因为密码是在配置文件里的 ，所以尽可能的设置长一点，也不怕忘记哈。
修改 # requirepass foobared 为你自己想要的密码 requirepass Safb0xafNabaf!fEfaWfs@#$a4afsdfw8ay 。
- 设置
protected-mode为no -
去掉 bind 或 设置为
bind 0.0.0.0 -
重启 redis 。
# 使用 conf 启动 redis
./redis-server redis.conf
# 登录客户端
./redis-cli
auth 密码
# 查看所有配置
config get *
# 查看单独一个的
config get bind
其他
如果发现重启没啥鬼用，可以直接杀死进程，然后以 conf 启动。
ps -ef | grep redis
kill -9 xxxx
./redis-server redis.conf
还有 dump 文件需要注意，默认是 dump.rdb 文件。
当你的的 nginx 中设置 Content-Security-Policy，就有可能会遇到： script in the following Content Security Policy directive: "script-src * 'unsafe-inline'"
Content-Security-Policy 策略
最快的解决办法，注释掉 Content-Security-Policy，并重启 nginx
vim xxx.conf
../../sbin/nginx -s reload
参考这里
很多情况下，我们都想将 react 编译的项目部署到非跟目录。可默认就必须是根目录，怎么实现呢。
操作一波
找到 package.json 文件，仅仅在package.json 文件中加入一行 "homepage":".", 即可。 如下。
{
…
"private": true,
"homepage":".",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"axios": "^0.19.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
…
}
网上还有一种方法，将配置文件暴露出来。执行 npm run eject ，然后修改配置。但感觉这方法比较麻烦，也没弄通过。
如果仅仅是想部署到非跟目录，第一种方法最省事了。
更有意义
https://www.jb51.net/article/158194.htm
https://segmentfault.com/a/1190000018593030
https://blog.csdn.net/zhaolandelong/article/details/78468842
在 win 中，在终端中使用 git 都会显示分支名，这样很清晰，也很安全。知道当前处于哪个分支。而 linux 下，默认是不显示这些的。这个就得想办法去实现。办法有好几种，这里就来一个简单好用的。
操作来一波
# 如果权限不够 sudo 提升权限
sudo vim ~/.bashrc
# 在末尾追求以下内容
# Show git branch name
force_color_prompt=yes
color_prompt=yes
parse_git_branch() {
git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}
if [ "$color_prompt" = yes ]; then
PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[01;31m\]$(parse_git_branch)\[\033[00m\]\$ '
else
PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(parse_git_branch)\$ '
fi
unset color_prompt force_color_prompt
# source 使生效
source ~/.bashrc
到这里，已经看到效果了。
之所以总结是因为最近也是在看css方面，让我迷惑的是有很多文章 关于布局名词都没有听说过，工作中也很少用。但是我们要与时俱进，叫的多了，它就成为正式名词了。比如 '双飞翼 '圣杯’？？并且我还发现我几乎看了好多文章，他们在从大的角度总结时候，几乎很少有相同，分类角度不尽相同。其实这也没关系，本来就没有一个统一标准，但是还是希望有个相对能够理解 概括角度看css布局。
我们从css发展到现在大类可以归纳为以下几种，你了解的实现方法可能就是以下方式中的具体实现：
- 静态布局
- 自适应布局
- 流式布局(又别名 百分比布局 %)
- 响应式布局：媒体查询
- 弹性布局 (rem/em flex布局)
用 ant design pro, 就逃不开 umi，现在更是到 umi3 了。
Umi 2 发布已经是一年半之前的事了，在这段时间里，我们发现之前的架构正逐渐不能满足业务飞速发展的需要，于是我们重写了一遍 Umi。经过几个月的 “007 ” 研发，Umi 3 在今天正式和大家见面了，并调整 slogan 为“插件化的企业级前端应用框架”。
Umi 是什么？
有些朋友可能还不太了解 Umi。
Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。
它包含以下特性：
- 🎉 可扩展，完整的生命周期，插件化，支持插件和插件集
- 📦 开箱即用，内置路由、构建、部署、测试等，仅需一个依赖即可上手
- 🐠 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证
- 🚀 大量自研，微前端、组件打包、文档工具、请求库、hooks 库、数据流等
- 🌴 完备路由，支持配置式路由和约定式路由，同时保持功能的完备性
- 🚄 面向未来，一直在尝试新技术的探索，dll 提速、modern mode、webpack@5、自动化化 external、bundler less 等