前端开发魔改 mafl

mafl魔改——支持vercel部署

伴随2025-02-162025-02-16

魔改mafl

mafl 是一个简约好看的个人导航站，功能也相对比较完善，适用于少量常用网站的记录，如果记录的网站太多会有点臃肿。

官方仓库官方文档 issues（我提的🫡）

部署成功之后的样子

奈何服务器太贵，所以能白嫖就白嫖🤔（官方支持docker部署）

如果直接讲mafl 部署到Vercel会显示找不到配置文件

所以想了一个办法就是通过一个地址去获取配置文件，而不是读取本地配置文件

1.魔改问题

因为使用Vercel，所以没办法使用后端服务
部署完成之后偶尔会出现无法访问的情况，刷新一下即可解决

2.下载源码

fork官方仓库，然后克隆到本地
先install，build，然后run dev测试能否正常运行（这个过程比较慢，耐心等待）
如果正常启动，访问 http://localhost:3000/ 会打开页面

3.修改源码

找mafl\src\server\utils\config.ts 这个文件中的loadConfig方法，remoteConfigUrl就是你要指定的配置文件地址
安装axios yarn global add axios

修改代码

//最上面声明
import axios from 'axios' // 引入 axios 用于发送 HTTP 请求


export async function loadConfig(): Promise<CompleteConfig> {
    const defaultConfig = getDefaultConfig()

    try {
        let remoteConfigUrl = `https://main.ctext.top/config-pub.yml`

        console.log("远程配置文件地址: " + remoteConfigUrl)

        // 使用 axios 获取远程 YAML 文件
        const response = await axios.get(remoteConfigUrl)
        console.log("远程配置文件status: " + response.status)

        const raw = response.data
        const config = yaml.parse(raw) || {}

        // 验证配置文件
        configSchema.parse(config)

        // 处理 services
        const services: CompleteConfig['services'] = []
        const tags: TagMap = createTagMap(config.tags || [])

        if (Array.isArray(config.services)) {
            services.push({
                items: determineService(config.services, tags),
            })
        } else {
            const entries = Object.entries<DraftService[]>(config.services || [])

            for (const [title, items] of entries) {
                services.push({
                    title,
                    items: determineService(items, tags),
                })
            }
        }

        return defu({ ...config, services }, defaultConfig)
    } catch (e) {
        logger.error("远程配置文件获取异常: " + e)
        console.error("远程配置文件获取异常: ", e)

        if (e instanceof Error) {
            defaultConfig.error = e.message
        }

        if (e instanceof ZodError) {
            defaultConfig.error = JSON.stringify(
                e.format(),
                (key, val) => (key === '_errors' && !val.length) ? undefined : val,
                ' ',
            )
        }
    }

    return defaultConfig
}

方案一
最简单的方案就是把你的配置文件放到\mafl\src\public 目录下，然后把你发布所指定的域名+配置文件名称就是你的地址，比如我上面的 https://nav.ctext.top/config-pub.yml
方案二
还有就是你可以上传到云服务厂商的云存储中，优点就是修改文件不需要提交代码，但是因为云存储有缓存，所以修改完不会立马同步，可能要等一会儿才会显示最新的配置文件内容

4.关于上传到云存储中

因为mafl 项目自带了缓存功能，所以他不会每次都请求你的配置文件，而是通过一个定时任务来定时获取最新配置文件
所以如果你想让他立马同步你的修改，你首先就是清除掉云存储的缓存，还有就是修改如下代码

//找mafl\src\server\utils\config.ts这个文件中的getConfig方法
export async function getConfig(): Promise<CompleteConfig | null> {
  const storage = useStorage('main')
  await storage.getKeys()
  //注释掉下面这一行，新增一行
  // return storage.getItem<CompleteConfig>('config')
  return loadConfig();
}

魔改mafl

1.魔改问题

2.下载源码

3.修改源码

4.关于上传到云存储中

5.最后就是在Vercel部署你仓库里的mafl即可，比较简单😝

伴随