![](/static/img/dafbbb4e80f5df55c8bf177d6331a32b.FineDrawioDockerbushu.webp)

之前[给开源项目 drawio 用 FineUI 套了个壳](https://gitee.com/shixixiyue/fine-drawio-public)，一直有BUG， 长时间挂后台保存后会丢（画完发现白了😢），最近又改了一版（也不知道能不能修复），放在了dockerhub上，安装很方便拉取就可以用了，数据库指定了容器没有自定义，这里放拉取代码。

![_MB5inDhpi6rJH2I8aiCoOzmvs_1icPzSNfiu0pgQxc.png](/static/img/d5899a7a2897ba7aa9d4012a68281a41._MB5inDhpi6rJH2I8aiCoOzmvs_1icPzSNfiu0pgQxc.webp)


# 1 docker环境
## 1.1 安装docker
```
sudo yum install -y yum-utils
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
```
```
sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```
```
 sudo systemctl start docker
```
## 1.2 安装 docker-compose
```
sudo curl -L "https://github.com/docker/compose/releases/download/{VERSION}/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
```
```
sudo chmod +x /usr/local/bin/docker-compose
```
# 2 拉取执行

创建文件夹

```
mkdir -p /home/finedrawio
cd /home/finedrawio
```
创建文件
```
vim docker-compose.yml 
```
```
services:
  finedrawio:
    image: 935732994/finedrawio
    #8000是对外端口
    ports:
      - "8000:80"
    depends_on:
      - finedrawiodb
  #这个名字写死了，不要改
  finedrawiodb:
    image: 935732994/finedrawio:db
    #端口也可以布外露，可以删掉，我是测试用的
    ports:
      - "3307:3306"
    #这里也没有外露mysql 的数据卷
```
运行
```
docker compose up -d
```
访问 ip:8000,因为要导入数据库，这里做了90秒的延迟（我服务器卡）,所以要多等会

初始用户 test 123456,管理员账户（可以进入后台） admin _admin 

![myGCP8BoxIGCAyz3kXwxw5W0scEZeemFVGX_HMZ4s8A.png](/static/img/e273e4664edef1f21059f8b51a698f24.myGCP8BoxIGCAyz3kXwxw5W0scEZeemFVGX_HMZ4s8A.webp)

![f0X9mZ1l34VPFvuIxqFEM1fZ47QkeUwPTO4veD6AJko.png](/static/img/9b4ee7278697d574fddfab25e24b6d80.f0X9mZ1l34VPFvuIxqFEM1fZ47QkeUwPTO4veD6AJko.webp)

![2kfyLScgT79PGDP1rMiUVOAQyKSldbEKonBEQnpcBV4.png](/static/img/a8b684379683ef5d33bd5f492d7abaf9.2kfyLScgT79PGDP1rMiUVOAQyKSldbEKonBEQnpcBV4.webp)


# 3 构建

构建挺坎坷，这里记录下，

没正经学过docker，第一版拉了一个centos7镜像，现安装.net6 和 mysql环境，然后还原数据库，虽然挺稳定，但是太大了 2G+，拉取太慢，最后就分开了，分别拉取了 .net6 和 mysql5.7的镜像，构建程序和数据库，然后用compose.yml 和一块，命令如下


``` appDockerfile
#拉取
FROM mcr.microsoft.com/dotnet/aspnet:6.0 as build

RUN apt-get update \
    && apt-get install -y netcat \
    && rm -rf /var/lib/apt/lists/*
    
WORKDIR /app

# 暴露端口80
EXPOSE 80 

#复制程序
COPY ./publish /app
RUN chmod +x FineDrawio.Web

COPY start.sh /start.sh
RUN chmod +x /start.sh
#在启动后执行
CMD ["/start.sh"]

```
``` start.sh
#!/bin/bash

# 启动MySQL
#/usr/sbin/mysqld --user=mysql &
echo "Finedrawiodb Waiting..."
sleep 90 #睡一觉看看mysql起来了没有
while ! nc -z finedrawiodb 3306; do
    echo "Waiting for database port to be open..."
    sleep 5
done

echo "Initializing dotnetapp..."
# 等待MySQL启动
#sleep 60

echo "Initializing dotnet..."
# 启动.NET应用程序
./FineDrawio.Web

```
``` mysqlDockerfile
# 使用官方MySQL镜像作为基础镜像
FROM mysql:5.7.44 as build

# 设置环境变量，MySQL容器会使用这些环境变量来初始化数据库设置
ENV MYSQL_DATABASE=finedrawio
ENV MYSQL_USER=finedrawio
ENV MYSQL_PASSWORD=finedrawio
ENV MYSQL_ROOT_PASSWORD=finedrawio

# 设置默认的字符集和比较规则
ENV MYSQL_CHARSET=utf8mb4
ENV MYSQL_COLLATION=utf8mb4_unicode_ci

# 将初始化SQL脚本复制到容器内的特定位置，容器启动时会自动执行这些脚本
COPY finedrawio.sql /docker-entrypoint-initdb.d/

# 指示Docker容器在运行时监听3306端口
EXPOSE 3306
```

app 和 db 分别上传到了一个项目`935732994/finedrawio`的不同`tag`


最后在`compose`时加入`depends_on`表示这个容器启动时要依赖`finedrawiodb`；

FineDrawio Docker部署

![splay.png](/static/img/f2b57040804585f3defd325793e72da0.splay.webp)
五一开车带着家人去旅游🚗，打开手机听歌🎵

然后一言难尽，反正服务器闲着，自己部署一个，这里做个记录，避免后人的坑；

* **系统**：阿里云Centos7
* **环境**：[Doker](https://docs.docker.com/get-docker/) & [Docker compose](https://docs.docker.com/compose/install/)
* **项目**：[SPlayer](https://github.com/imsyy/SPlayer)
* **其他**：域名 && [nginx-proxy-manager-zh](https://github.com/xiaoxinpro/nginx-proxy-manager-zh) 



# 1. 准备工作📋
## 1.1 域名 🌐
我之前申请了域名，在腾讯申请的，服务器是阿里云，在阿里云备案，拿到备案号，这步没什么坑，按照表单填写就行了，阿里也挺负责提交后有人打电话告诉你怎么填写，然后就通过了；

如果没有域名也有免费的域名（没试过）B站有教程；

然后去腾讯云域名管理添加二级域名： 控制台-我的域名-解析-记录管理-添加记录

![图片.png](/static/img/342d66bbfcccbaf24ab89d16fa37ce25.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

## 1.2 Doker & Docker compose 📦

1. 安装docker
```
sudo yum install -y yum-utils
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
```
```
sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
```
```
 sudo systemctl start docker
```
2. 安装 docker-compose
```
sudo curl -L "https://github.com/docker/compose/releases/download/{VERSION}/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
```
```
sudo chmod +x /usr/local/bin/docker-compose
```

3. 默认网段 
    
    可能会出现IP冲突的情况 占用 172 网段，需要配置默认的IP 
    ```
    vi /etc/docker/daemon.json
    ```
    ```
    {
    "bip":"169.254.0.1/24"
    }
    //也可能是这个生效
    {
    "bip":"169.254.0.1/24",
    "default-address-pools" : [
            {  "base" : "192.168.0.0/16",
               "size" : 24      }
     ]
    }
    ```
然后重启 docker `systemctl restart docker`

## 1.3 Nginx代理 🛡️
这里的选择也挺多，我选择了 [nginx-proxy-manager-zh](https://github.com/xiaoxinpro/nginx-proxy-manager-zh) 

这里有个教程 [彻底搞懂反向代理神器Nginx Proxy Manager的配置和使用](https://www.bilibili.com/video/BV1Ws4y1A7Lk/?spm_id_from=333.999.0.0) 尽量看一遍


```
mkdir -p /home/Nginx
vim docker-compose.yml 
```
```
version: '3'
services:
  app:
    image: 'chishin/nginx-proxy-manager-zh:release'
    restart: always
    ports:
      - '80:80'
      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
```
`这里注意 人家给的都是 docker-compose up -d 但我的服务器上是 docker compose 不知道为什么`
```
docker compose up -d
```

nginx-proxy占用了80端口和443 端口，因为需要他SSL证书和代理；

安装完后按照教程配置SSL证书，非常方便就不截图了


# 2. 音乐项目选择 💭

我要选择一个支持doker部署(因为centos7比较老，本地编译会出问题)，带收藏夹，手机端也可以用的

我分别部署测试了以下的项目,全部基于 [NeteaseCloudMusicApi](https://github.com/radishes-music/radishes/)（违规已经不让维护了，千万不要去doker上搜🔍）


项&nbsp;目&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|啰嗦
-|-
[YesPlayMusic](https://github.com/qier222/YesPlayMusic) |手机浏览没有适配，doker上 oaklight/yesplaymusic 这个比较新，支持 Last.fm，但是我就没成功过![202110142354283.png](/static/img/fdba6eadbe5625ba8499c29ce884e739.202110142354283.webp)
[R3PLAYX](https://github.com/Sherlockouo/music)|手机端倒是可以看，登录WY后显示收藏，但是没有办法维护收藏，是YesPlayMusic的二开，颜值最高![202312251127644.png](/static/img/23cd3e88b2f03268480f7bdf897a556e.202312251127644.webp)
[Radishes](https://github.com/radishes-music/radishes/)|手机浏览没有适配![home.jpg](/static/img/d03174d48b9699cf07e77573f6231b22.home.webp)
[SPlayer](https://github.com/imsyy/SPlayer)|手机端适配，有收藏夹，可以操作收藏夹![SPlayer - 主页面.jpg](/static/img/f9be4df39a5b9cbb833c96112e6563e1.SPlayer%20-%20%C3%A4%C2%B8%C2%BB%C3%A9%C2%A1%C2%B5%C3%A9%C2%9D%C2%A2.webp)





然后发现这些项目docker内部的API都有问题，过期了，NeteaseCloudMusicApi 更新的比较快

最后选择了 SPlayer 手机适配完美，而且能操作收藏夹，有时候也会暂停，

# 3. 部署 ⚙️
## 3.1 SPlayer
还是 docker-compose.yml ，注意 7899是原始端口，2221 是暴漏端口

```
version: '3'
services:
  splayer:
    image: imsyy/splayer
    container_name: splayer
    ports:
      - 2221:7899
    restart: always
```
## 3.2 netease_cloud_music_api
```
docker pull binaryify/netease_cloud_music_api
docker run -d -p 3001:3000 --name netease-music-api binaryify/netease_cloud_music_api
```

这里自己拉了一个netease_cloud_music_api，注意将服务器的3001端口开开，因为SPlayer接口基本都过期了，所有代理到 3001，



## 3.3 配置代理

域名代理
![图片.png](/static/img/73b7eda67ccf305bfc5575968ea56d6a.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

因为 SPlayer 的内置API过期，这里需要转一下

![图片.png](/static/img/a83cdbb3f674ff65cbc7e055e0104455.%C3%A5%C2%9B%C2%BE%C3%A7%C2%89%C2%87.webp)

这里说下代理配置
```
    #将当前代理/api/下的连接(就是 [:2221/api/...])转到 :3001
    #如果 返回 404 就是 :3001/... 没通，就转到 @fallback（这里@fallback是一个配置块）
    location /api/ {
        proxy_pass http://XXX:3001/;
        proxy_intercept_errors on;
        error_page 404 = @fallback;
    }
    #@fallback配置块 转到这里说明没成功，就用原始的连接 即[:2221/api/...]，:2221被域名代理了
    location @fallback {
        proxy_pass https://XXX.top$request_uri;
    }
```

项目|代理地址
-|-
YesPlayMusic|/api/
R3PLAYX|/netease/
SPlayer|/api/

---

到这就结束了，手机扫码登录后，1分钟的歌就变成3分钟了，终于可以享受🥰持久带来的快乐了(实名羡慕)！


---
参考

[彻底搞懂反向代理神器Nginx Proxy Manager的配置和使用](https://www.bilibili.com/video/BV1Ws4y1A7Lk/?spm_id_from=333.999.0.0)

[老苏的blog](https://laosu.cf/2024/01/10/%E8%B7%A8%E5%B9%B3%E5%8F%B0%E7%9A%84%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BD%91%E6%98%93%E4%BA%91%E6%92%AD%E6%94%BE%E5%99%A8Radishes/?highlight=%E9%9F%B3%E4%B9%90)

Doker部署一个SPlayer听歌

![](/static/img/f2f6d37cb67424810faf269c876df080.FineUIGridçªåºè¡.webp)

🌟分享个样式的代码，Grid列表突出某行🔍，

![选择行.gif](/static/img/bb2bb75587907e939044edb7c0813874.%C3%A9%C2%80%C2%89%C3%A6%C2%8B%C2%A9%C3%A8%C2%A1%C2%8C.gif)



## js ⌨️
``` js
//...事件
let id = 'xxx';//行ID
F.ui.Grid1.selectRow(id, { scrollTo: true });//选择行，并滚动到
F.ui.Grid1.getRowEl(id).addClass(`blink`);//新增样式 
$(`.f-grid-bodyct`).css(`overflowX`, 'hidden');//隐藏横向滚动条
//延迟删除样式 恢复 
setTimeout(() => {
    F.ui.Grid1.getRowEl(id).removeClass(`blink`);
    $(`.f-grid-bodyct`)[0].style.removeProperty('overflow-x');
}, 800);
```

## css 🎨
``` css
@@keyframes glow {
    0% {
        transform: scale(1);
        background-position: 1% 0;
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
        background-position: 110% 0;
    }
}

.blink {
    animation: glow .8s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    background-image: linear-gradient(to right, transparent, white, transparent);
    background-size: 200px 100%;
    background-repeat: no-repeat;
}
```

---
![](https://blog.shizhuoran.top/static/img/44cfa2614c26c6d6f72e866d72168df7.336ed2bd17b80a3cfeab2f7e0219227.webp)

FineUIGrid突出行

![文章2.png](/static/img/6408dc362890eb384cb9edafcfb985e0.%C3%A6%C2%96%C2%87%C3%A7%C2%AB%C2%A02.webp)

没事写点文章📝总结下代码，插入一些Emoji表情显得没那么无聊😏，

但是随手插入还是不方便🙅‍♂️，微软自带的检索很难匹配到🔍，gpt倒是能给我推荐一些，但是每次都要打开网页问，

我一直装着[Pot翻译](https://gitee.com/mirrors/Pot?_from=gitee_search#/mirrors/Pot/blob/master/README_EN.md)，

类似的有好多，这样的，选中文字，快捷键就可以出来



![34440c6051ad6f3bdec2d1fb52a487965d00e530.webp](/static/img/2a81e8bc9cbbb269d3cd6a08d01c2532.34440c6051ad6f3bdec2d1fb52a487965d00e530.webp)

而且还支持 openai自定义，所以就写了一个Emoji表情助手📚

这样配置

![4429d3efd19da39d6def901e1bb43fccb0ffd946_2_666x500.webp](/static/img/e2b81dd0da4a8309872025769af4e1be.4429d3efd19da39d6def901e1bb43fccb0ffd946_2_666x500.webp)
图片
图片800×600 41.9 KB

密钥自己写

图片

![5ee6bc9a4dd3ec9f9355b7e665a53e899ed9c5cd.webp](/static/img/11c50c111a5f94e48cde0fe34ecbb2a7.5ee6bc9a4dd3ec9f9355b7e665a53e899ed9c5cd.webp)
效果如下
图片

![c7386e73f153d77b8765216741f48d034734e0f1.png](/static/img/7c2f6a09372527e6d6cb4f8e96ab462d.c7386e73f153d77b8765216741f48d034734e0f1.webp)

写可以加上 “只输出一个最匹配的Emoji表情即可，不要输出其他内容” 的字样，这样就可以直接复制📋了

Pot翻译增加Emoji表情”翻译” 

![我的画板 by fabritor.png](/static/img/71cda4c275ee1308bd02b3721a04a374.%C3%A6%C2%88%C2%91%C3%A7%C2%9A%C2%84%C3%A7%C2%94%C2%BB%C3%A6%C2%9D%C2%BF%20by%20fabritor.webp)
# 1. 引出问题🤔

在写一个父子页面交互的事件时遇到了一个问题，环境是`FineUICore`，子页面用`window`的`IFrame`，在window执行保存后，需要执行父页面的赋值方法；

比如 `F.ui.tbxProvince.setValue('结果');`,这里直接写的js，其实在后台是 `UIHelper.TextBox("tbxProvince").Text(province);` 这两个效果是一样的

但是在子页面直接执行 `F.ui.tbxProvince` 是找不到😕的，子页面没这个控件，所以要在父页面调用，可以这样写



``` javascript
F.getActiveWindow().window.F.ui.tbxProvince.setValue('结果');
```

`F.getActiveWindow().window`就是激活这个窗口的window对象，

在后台我将 `F.ui.tbxProvince.setValue('结果');` 封装为一个方法，比如 `SetText`

``` c#
public async Task SetText(string value)
{
    var script = $"F.ui['tbxProvince'].setText('{value}');";
    PageContext.RegisterStartupScript(script);
}
```

如果加上 `F.getActiveWindow().window`  就要重写📝 ，或给 `SetText`增加参数，比如👇
``` c#
public async Task WindowSetText(string value)
{
    var script = $"F.getActiveWindow().window.F.ui['tbxProvince'].setText('{value}');";
    PageContext.RegisterStartupScript(script);
}
```

在调用时，
``` c#
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Window1_Close()
{
    await WindowSetText('结果');
    return UIHelper.Result();
}
```

这里我认为 `SetText` 和 `WindowSetText` 是干的一件事：`setText`，只不过作用域（作用域这个词可能不准确）不一样，同一件事写两个地方，维护是不方便的；同样如果给 `SetText`增加一个参数来定义作用域也不好，这个样`SetText`对外也是破坏性的

# 2. 另一种思路💡

既然作用域不一样，那我就声明一个`作用域`，让`SetText`判断当前在哪个`作用域`下，从而执行不一样的行为；

比如我想写成这样👇

``` c#
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Window1_Close()
{
    //告诉内部的代码生成js时应该加上 F.getActiveWindow().window.
    await ActiveWindow(async () =>
    {
        SetText(province);
    });
    return UIHelper.Result();
}
```

`SetText` 中如何得到 `ActiveWindow` 从而判断呢，这个我倒是经常用✅ 直接让GPT优化了下
``` c#
public bool IsMethodActiveWindowCalledInCallStack()
{
    StackTrace stackTrace = new StackTrace();
    StackFrame[] stackFrames = stackTrace.GetFrames();
    
    //这里要遍历向上找，因为异步
    return stackFrames?.Any(frame => frame.GetMethod()?.Name.Contains("ActiveWindow") ?? false) ?? false;
}
```
`SetText`写成这样
``` c#
 public async Task SetText(string value)
 {
     var top = IsMethodActiveWindowCalledInCallStack() ? "F.getActiveWindow().window." : "";
     var script = $"{top}F.ui['tbxProvince'].setText('{value}');";
     PageContext.RegisterStartupScript(script);
 }
```

# 3. 思考💭
这里是一个例子，实际上不是为了写个简单的✨`SetText`，而是为了写方法提供的一个思路🧠，

简单的`GetFrames`也会消耗性能，在FineUI中父子页面交互 通过 `ActiveWindow.GetWriteBackValueReference` 和 `PageContext.RegisterStartupScript` 配合使用，

像输出的js增加一个头 `F.getActiveWindow().window.` 的这种例子 应该写到` PageContext.RegisterStartupScript`中 或更底层🔨，