文章	评论	标签
69	8	29

AI摘要：Flare是一款轻量、快速、美观的个人导航页面，支持Docker一键部署，无数据库依赖，数据透明，支持在线编辑，资源消耗低，适用于HomeLab等私密场景。

Powered by AISummary.

1. 前言

Flare是一个轻量、快速、美观的个人导航页面，适用于 HomeLab 或其他注重私密的场景。

主要特点如下：

支持Docker一键部署，维护（更新、迁移、卸载）方便
无任何数据库依赖
应用数据完全开放透明，100% 属于用户自己
支持在线编辑，内置 Material Design Icons 6k+ 图标，目前累计下载过万
支持 x86 以及常见的 ARM (ARM32v6、ARM32v7、ARM64v8)设备
应用资源消耗非常低（CPU: < 1% MEM: < 30M Docker Image: < 10M）

1.1 相关地址

Flare 官方 GitHub：https://github.com/soulteary/docker-flare
Flare 原文作者的搭建日志（反向代理用的Traefik）：https://soulteary.com/2022/02/23/building-a-personal-bookmark-navigation-app-from-scratch-flare.html
项目灵感来自：https://github.com/pawelmalak/flame

2. 项目展示（来自GitHub）

我的Flare导航页

2.1 程序使用向导

为了方便我们的使用，大佬制作了一个简单的向导程序，在 flare 启动之后，我们可以随时访问 /guide，获取 flare 基础界面功能的介绍。

2.2 程序在线编辑页面

为了满足随时随地编辑的需求，程序新增了“在线编辑”的页面。

工具页面地址：/editor

2.3 程序帮助页面

为了减少不必要的地址记忆负担，程序新增了一个“帮助页面”，默认展示所有的程序内的工具页面。

工具页面地址：/help

2.4 图标

为了方便小伙伴使用 flare，程序内置了来自 materialdesignicons.com 中所有的 Material Design Icons，你可以让你的每一个书签都拥有风格统一、高质量的矢量图标。

启动 flare 之后，使用浏览器访问 /icons/ 可以打开图标列表页面。

在页面中选择你喜欢的图标，鼠标点击之后，默认会将程序可以直接使用的“图标名称”保存在剪贴板，然后粘贴到配置文件中，flare 就会自动更新书签的图标啦。

（图标名称无需使用 - 连字符，并且大小写不敏感）

工具页面地址：/icons

2.5 程序性能

“快”作为 Flare 对主要优势而言，自然是需要“满分”来加持。

如果你好奇这是如何实现的，可以阅读这篇文章：《Flare 制作记录：应用前后端性能优化》。

3. 搭建方式

可以在任何支持docker的系统中安装，推荐使用docker-compose方式安装。

3.1 创建compose文件

创建docker-compose.yml文件，内容如下，相关参数自行修改。

version: '3.6'

services:
  flare:
    image: soulteary/flare
    restart: always
    # 默认无需添加任何参数，如有特殊需求
    # 可阅读文档 https://github.com/soulteary/docker-flare/blob/main/docs/advanced-startup.md
    command: flare --nologin=0
    environment:
      # 如需开启用户登陆模式，需要先设置 `nologin` 启动参数为 `0`
      # 如开启 `nologin`，未设置 FLARE_USER，则默认用户为 `flare`
      - FLARE_USER=flare
      # 指定你自己的账号密码，如未设置 `FLARE_USER`，则会默认生成密码并展示在应用启动日志中
      - FLARE_PASS=flare
      # 是否开启“使用向导”，访问 `/guide`
      - FLARE_GUIDE=1
    ports:
      - 5005:5005
    volumes:
      - ./app:/app

3.2 启动容器

终端执行

docker compose up -d

4. 反向代理

我们要用域名而不是IP+端口的方式来访问我们的服务！

可以使用npm或者lucky傻瓜式配置反代，或者直接修改nginx配置文件：

nginx反向代理配置示例

server {
    listen 443 ssl http2;
    server_name 125.com; #修改域名

    ssl_certificate certs/125.com.pem;# 证书
    ssl_certificate_key certs/125.com.key;# 证书
    client_max_body_size 500M;  # 限制请求体的大小

    location / {
        proxy_pass http://ip:5005;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 支持 WebSocket
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

Flare---轻量、快速、美观的个人导航页面

伍六