MINJIEZHOU's Blog

(AgileConfig)[https://github.com/kklldog/AgileConfig] 在使用 react 编写UI后，变成了一个彻彻底底的前后端分离的项目，上一次解决了把react spa 跟asp.net core 站点集成起来 asp.net core 集成 react spa。本来我每次提交代码的时候都需要手动运行npm run build,然后把dist的内容复制到asp.net core网站的wwwroot/ui目录下。这样显然太麻烦了，于是尝试使用 github actions 来自动化这些步骤。 我们要实现的目标是：提交代码后自动运行npm run build，自动把dist内容复制到wwwroot目录下，自动build dotnet程序，自动打包docker镜像，自动推送到dockerhub 。 本来以为把这个actions分成两个job，job1负责编译react app，等job1完成后运行job2编译dotnet程序就可以了，但尝试下来并没有那么简单。其中有个问题就是job1生成的dist内容没有办法被job2使用，即使在job1里使用命令复制dist的内容到相应目录，job2还是无法使用这些内容，貌似每个job之间文件是隔离的。 在经过咨询大佬后得知了Github Actions Artifact 这个功能。这样我们只需要把job1的产物先存储在Artifact内，job2去下载到指定目录就可以了。 Github Actions Github actions 是 github 官方的 CICD 服务。它跟github 无缝集成，使得用户无需第三方服务就可以体验完整的CICD 服务。 Github actions 可以完成很多功能，比如当你提交代码后自动build，test，然后打包docker镜像，发布到机器。这些功能只需要一个yml来描述就可以。 Github actions 主要结构如下： ``` name: [Read More]

在这容器化的世界里，我们已经很少直接通过文件发布来运行asp.net core程序了。现在大多数情况下，我们都会使用docker来运行程序。在使用docker之前，我们往往需要打包我们的应用程序。asp.net core程序的镜像打包，网上有很多教程，其中大多数是使用sdk这个镜像来直接打包。打出来的包有好几百MB，3.1 SDK打出来的包甚至超过了1GB。那么有什么办法来缩小我们打出来的镜像吗？最小能缩小到多少呢？这篇文章就来介绍下如何缩小asp.net core 打包出来镜像的大小。 新建asp.net core 程序 新建一个asp.net core应用程序，用来演示打包。首先我们演示下如果使用dotnet sdk5.0来打包 docker 镜像。 sdk:5.0 FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build WORKDIR /app COPY /. /app RUN dotnet restore -s https://nuget.cdn.azure.cn/v3/index.json WORKDIR /app/CoreDockerImageSizeTest RUN dotnet publish -o ./out -c Release EXPOSE 5000 ENTRYPOINT ["dotnet", "out/CoreDockerImageSizeTest.dll"] 在项目根目录下新建一个Dockerfile文件，文件内容如上。这个Dockerfile比较简单，使用dotnet sdk:5.0最为底层包来构建，这也是最傻瓜的打包方式。那么看看这个镜像打出来有多大吧。 docker build . -t coredockerimagesizetest_0.1... [Read More]

AgileConfig的UI使用react重写快完成了。上次搞定了基于jwt的登录模式（AntDesign Pro + .NET Core 实现基于JWT的登录认证），但是还有点问题。现在使用react重写后，agileconfig成了个确确实实的前后端分离项目。那么其实部署的话要分2个站点部署，把前端build完的静态内容部署在一个网站，把server端也部署在一个站点。然后修改前端的baseURL让spa的api请求都指向server的网站。 这样做也不是不行，但是这不符合AgileConfig的精神，那就是简单。asp.net core程序本身其实就是一个http服务器，所以完全可以把spa网站使用它来承载。这样只需要部署一个站点就可以同时跑spa跟后端server了。 其实最简单的办法就是把build完的文件全部丢wwwroot文件夹下面。然后访问： http://localhost:5000/index.html 但是这样我们的入口是index.html，这样看起来比较别扭，不够友好。而且这些文件直接丢在wwwroot的根目录下，会跟网站其他js、css等内容混合在一起，也很混乱。 那么下面我们就要解决这两个文件，我们要达到的目的有2个： spa的入口path友好，比如http://localhost:5000/ui spa静态文件存放的目录独立，比如存放在wwwroot/ui文件夹下，或者别的什么目录下。 [Read More]

很多同学说AgileConfig的UI实在是太丑了。我想想也是的，本来这个项目是我自己使用的，一开始甚至连UI都没有，全靠手动在数据库里修改数据。后来加上了UI也是使用了老掉牙的bootstrap3做为基础样式。前台框架也是使用了angularjs，同样是老掉牙的东西。过年期间终于下决心翻新AgileConfig的前端UI。最后选择的前端UI框架为AntDesign Pro + React。至于为啥选Ant-Design Pro是因为他好看，而且流行，选择React是因为VUE跟Angular我都略知一二，干脆趁此机会学一学React为何物，为何这么流行。 登录的认证方案为JWT，其实本人对JWT不太感冒（请看这里《我们真的需要jwt吗？》），无奈大家都喜欢，那我也只能随大流。 其实基于ant-design pro的界面我已经翻的差不多了，因为它支持mock数据，所以我一行后台代码都没修改，已经把界面快些完了。从现在开始要真正的跟后端代码进行联调了。那么我们先从登录开始吧。先看看后端asp.net core方面会如何进行修改。 修改ASP.NET Core后端代码 "JwtSetting": { "SecurityKey": "xxxxxxxxxxxx", // 密钥 "Issuer": "agileconfig.admin", // 颁发者 "Audience": "agileconfig.admin", // 接收者 "ExpireSeconds": 20 // 过期时间 s } 在appsettings.json文件添加jwt相关配置。 ``` public class JwtSetting { static JwtSetting() { Instance = new JwtSetting(); Instance.Audience = Global.Config[“JwtSetting:Audience”]; Instance.SecurityKey = Global.Config[“JwtSetting:SecurityKey”];... [Read More]

首先祝大家新年快乐，身体健康，万事如意。 一般来说一个系统最先出现瓶颈的点很可能是数据库。比如我们的生产系统并发量很高在跑一段时间后，数据库中某些表的数据量会越来越大。海量的数据会严重影响数据库的读写性能。 这个时候我们会开始优化系统，一般会经过这么几个过程： 找出SQL慢查询，针对该SQL进行优化，比如改进SQL的写法，查看执行计划对全表扫描的字段建立索引 引入缓存，把一部分读压力加载到内存中 读写分离 引入队列，把并发的请求使其串行化，来减轻系统瞬时压力 分表/分库 [Read More]