1. 前言

一直有小伙伴想要用docker搭建导航页面，今天我就推荐一个受到Flame启发，在此基础上优化而来的新项目Flare
——一个轻量、快速、美观的个人导航页面，适用于 HomeLab 或其他注重私密的场景。

Flare的主要特点如下：

  • 支持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）

2.1 程序使用向导

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

45e948de4ee54d183d9226f9bf602a76.png

2.2 程序在线编辑页面

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

8ca44d828a415e3de2f36cc397ceb8be.png

工具页面地址：/editor

2.3 程序帮助页面

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

a45f8ddaa4f2b7fca190c54bfb3e49d2.png

工具页面地址：/help

2.4 图标

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

img

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

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

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

工具页面地址：/icons

2.5 程序性能

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

f0560c57d3bd03eeef10bacecb3cfbeb.png

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

这边直接丢出核心的 docker-compose.yaml 文件，熟悉 docker 环境的老鸟可以直接拷贝搭建。

Flare 部署：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
version: '3.6'

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

以下是详细搭建教程，小白也能一步一步搭建成功。

3. 搭建环境

  • 服务器

  • 系统：Debian 11 （非必需 DD，用原来的系统也 OK，之后教程都是用 Debian 或者 Ubuntu 搭建～）

  • 安装好 Docker、Docker-compose

  • 【非必需但建议】域名一枚，并做好解析到服务器上

  • 【非必需】提前安装好宝塔面板海外版本 aapanel，并安装好 Nginx

  • 【非必需本次选用】安装好 Nginx Proxy Manager

服务器要求：内存建议1G，硬盘可以大一些。

4. 搭建方式

4.1 安装 Docker 与 Nginx Proxy Manager

4.2 创建安装目录

创建一下安装的目录：

1
2
3
4
5
sudo -i

mkdir -p /root/data/docker_data/Flare

cd /root/data/docker_data/Flare

这边我们直接用 docker 的方式安装。

1
vim docker-compose.yml

英文输入法下，按 i

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
version: '3.6'

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

按一下 esc，然后 :wq 保存退出。

4.3 打开服务器防火墙（非必需）并访问网页

部分大厂在自己的后台会有一个防火墙（安全策略组），这个时候我们需要在防火墙（安全策略组）打开端口 3020

举例，如果你是腾讯云的，打开方法如下（部分服务商没有自带的面板防火墙，就不用这步操作了）：

image-20220630215240864
image-20220630220546335

图中示例填的是 5230，备注填的是 memos，这边我们填 3020，示例填 Flare ，确定即可（如果你在 docker-compose 文件里换了 9009，这边就需要填 9009，以此类推）

image-20220819145844555

查看端口是否被占用（以 3020 为例），输入：

1
lsof -i:3020  #查看 3020 端口是否被占用，如果被占用，重新自定义一个端口

如果啥也没出现，表示端口未被占用，我们可以继续下面的操作了～

如果出现：

1
-bash: lsof: command not found

运行：

1
apt install lsof  #安装 lsof

如果端口没有被占用（被占用了就修改一下端口，比如改成 8081，注意 docker 命令行里和防火墙都要改）

最后：

1
2
3
cd /root/data/docker_data/Flare    # 来到 dockercompose 文件所在的文件夹下

docker-compose up -d

理论上我们就可以输入 http://ip:3020 访问安装了。

e5d5cbefe3b1beb6dbe4eb2884e70e67.png