关于

原前后端已经有云函数这样的机制提高后端配置的自由性了，但是原版前端终究还是有些不足，想要更多的自定义内容，必须对前端进行二次开发了。

此前搭建博客时应该已经将 Shiro fork 进我们自己的仓库了，就以自己的 fork 为基础进行二次开发。

其实是很简单的事情，但是完全没有基础，弄了两天才正式搭建好环境。

环境搭建

需要以下的基础软件环境

• fnm
• Node.js
• pnpm

安装 fnm

以管理员模式打开终端，执行以下命令

choco install fnm  

随后执行以下命令进行测试

fnm -h

到这里理论上就够用了，不过还可以配置环境变量

在下面的目录新建 profile.ps1文件

%USERPROFILE%\Documents\WindowsPowerShell\profile.ps1

%USERPROFILE%: 表示用户目录，直接在文件管理的地址栏输入 %USERPROFILE%，然后回车

WindowsPowerShell 为新建的目录, 如果安装 node 后命令仍然无法识别，将文件夹名称改为 PowerShell

将下面的代码写入到上面的配置文件里面

安装 Node.js

依据以下界面的指引安装 Node.js

Node.js — Download Node.js®

依据不同的环境自行选择，例如我的环境是如下指令进行安装。不过这是由于我原来就安装过 Node.js，所以环境 path 不用另外配置。

安装 pnpm

在管理员模式打开终端，打如下指令进行安装

打开工程

由于原工程下就有 .vscode 文件夹，我们使用 vscode 打开原工程文件夹就可以。

在 vscode 终端打如下指令，--frozen-lockfile 是关键，我在这里卡了非常长的时间，有这个参数后就会依据项目中原有的版本指定进行依赖安装。

随后要编写项目下的 .env 文件，编写成和部署时一样就好。

以下两种方法都可以打开服务器进行预览。

启动开发服务器

在 vscode 终端中输入以下指令

点击终端中输出的 http://localhost:3000 这样的链接即可打开浏览器预览

构建和启动生产环境

在 vscode 终端中输入以下指令

构建完成后输入以下指令

点击终端中输出的 http://localhost:3000 这样的链接即可打开浏览器预览

将 Docker compose 的源切为自己的项目

是群友的教程 为你修改后的 Shiro 构建 Docker 镜像 - Mikuの次行星

直接删除仓库根目录下的.github这个文件夹。

在仓库的.github/workflows目录下新建一个 yml 文件，名字随意，代码如下：

你只需要修改最下方Build and push步骤中的tag从ghcr.io/innei/shiro:latest修改为你自己认为合适的名称即可，注意其中不要有任何大写字符，为了好记尽量选择使用个人 Github 用户名小写代替innei作为镜像命名空间。

修改服务器中原拉取 docker 镜像的 docker-compose.yml 文件，将其中的 image 条目替换为自己的镜像，例如我将这个条目配置为

因为 stbanana 是我的 github 用户名。