vben-admin-nestjs开发

89次阅读

没有评论

共计 1814 个字符，预计需要花费 5 分钟才能阅读完成。

代码仓库

前端

后端

演示

地址： https://vbendemo.ilaipi.com/

用户名： demo

密码： amNF3izKCwNF6MvU4z

环境准备

docker volume create mysql-vben
docker run -dit --name mysql-vben --restart always \
  -v mysql-vben:/var/lib/mysql \
  -p 30103:3306 \
  -e MYSQL_ROOT_PASSWORD=oCm3Io4fNcINRUmoHF \
  -e MYSQL_DATABASE=vben \
  -e MYSQL_USER=vben \
  -e MYSQL_PASSWORD=Kdm2queLJwIEPGSzDi \
  mysql:8.0.33


docker volume create redis-vben

docker run -dit --name redis-vben \
  --restart always -e REDIS_PASSWORD=9BdBqZb2r41c0nQq6o \
  -v redis-vben:/data -p 30104:6379 \
  redis:7.0.12-alpine3.18 \
  /bin/sh -c 'redis-server --appendonly yes --requirepass ${REDIS_PASSWORD} --bind 0.0.0.0'

代理设置

很多前端框架提供的代码中，代理都是 .env 系列文件中配置特殊的环境变量，会把后端的地址打包到代码里。但是一直以来我个人的习惯是，前端代码中不包含后端的请求地址，而是把后端的地址和前端上线后的域名保持一致，在 nginx 层做解析，把属于后端的请求，转发到后端的端口即可。

我提交了一个 PR ，实现从环境变量定义一个非特殊变量，仅在开发的时候通过 vite 的 server proxy 来实现后端请求的转发。官方不一定会合并，有需要的可以参考。

基本思路就是先用 vite 的方法，把 .env 中的变量加载一下，然后使用即可。

在 .env.local 中定义一个 VITE_APP_PROXY_URL 变量，比如 VITE_APP_PROXY_URL=http://localhost:3000 即可把所有 basic-api 开头的请求转发到我们的 3000端口的服务。

在 vben 这个源码中，把对应请求的 mock 代码去掉，即可实现请求到后端服务。

前端开发

基于开源的仓库做修改，原则上尽量不动原仓库的代码，页面、api都新增文件来实现。

登录页面，新增了 /views/account/login 目录，以及 /api/account 。修改了路由配置中的登录页面的路由。如果需要原来的登录页面就改路由配置( /router/routes/index#LoginRoute ) 。还需要把公共代码中使用 /store/modules/user 的替换为 /store/modules/account。

菜单管理

新增 redirect 字段，实现类似 mock 数据中的效果，即 /dashboard 默认跳转 /dashboard/analysis。

自动部署

演示站点部署在内网的 AIO 主机，通过 tailscale action 自动加入内网，然后实现在内网主机自动执行命令完成更新。

前端部署的时候，需要把 Dockerfile 中的 CMD 进行修改，把注释掉的替换命令给打开。然后在启动容器的命令中，加上 -e VG_BASE_URL=/vbenapi 。

## 将/usr/share/nginx/html/dist/assets/index.js 和/usr/share/nginx/html/dist/_app.config.js中的"$vg_base_url"替换为环境变量中的VG_BASE_URL,
## $vg_sub_domain 替换成VG_SUB_DOMAIN，$vg_default_user替换成VG_DEFAULT_USER，$vg_default_password替换成VG_DEFAULT_PASSWORD 而后启动nginx
CMD sed -i "s|__vg_base_url|$VG_BASE_URL|g" /usr/share/nginx/html/dist/assets/entry/index-*.js /usr/share/nginx/html/dist/_app.config.js && \
    nginx -g 'daemon off;'
# CMD nginx -g 'daemon off;'

正文完