绿联NAS:搭建NCE Flow,英语在线点读,点句即读、连续播放

绿联NAS:搭建NCE Flow,英语在线点读,点句即读、连续播放

一、项目介绍

NCE-Flow 是一款专为英语学习者打造的轻量化 Web 学习进度管理工具。它帮助用户记录课文学习状态、管理学习笔记,并支持多设备数据同步。不同于将数据存在浏览器里的单机应用,NCE-Flow 具备服务端数据持久化能力,清理浏览器缓存或更换设备都不会丢失学习进度。项目还支持通过挂载卷热更新课程内容,并可通过设置访问令牌保障数据安全。项目采用 OpenResty (Nginx) + 静态前端 + 本地数据存储的极简架构。推荐使用 Docker Compose 进行本地构建与一键部署,非常适合有一定动手能力、追求数据私有化,且需要跨终端无缝继续学习的英语爱好者。

核心功能

  • 句子级点读:点击任意句子开始播放,自动高亮跟随
  • 多语言视图:EN / EN+CN / CN 三种显示模式
  • 播放控制:倍速调节、连读/点读切换、循环模式、断点续播
  • 全局快捷键:空格播放/暂停、方向键导航、音量控制
  • 学习管理:课程收藏、学习记录、进度追踪
  • 现代界面:Apple 风格、深浅色主题、响应式设计
  • 零依赖:纯静态文件,解压即用

二、搭建教程

1、使用电脑打开浏览器下载项目;

下载地址:https://gitcode.com/gh_mirrors/nc/echo-flow

image

2、打开绿联NAS-文件管理器-找到docker文件夹,创建文件夹nceflow;

image

3、把下载的项目上传到docker文件下的nceflow文件夹,并解压;

image

image

4、把解压的文件全部放到nceflow文件下(记得检查下有没有static文件夹,不然构建的时候会报错);

image

5、打开docker -项目-创建nceflow项目;

image

6、粘贴docker compose;

# =============================================================================
# NCE-Flow 部署配置(本地构建版)
# -----------------------------------------------------------------------------
# 项目地址:https://github.com/luzhenhua/NCE-Flow
# 说明:Docker Hub 上没有该项目的公开镜像,必须 clone 源码后本地构建。
# 访问地址:http://localhost:11223
#
# 常用命令:
#   docker compose build           # 单独构建镜像(方便看构建报错)
#   docker compose up -d           # 构建(如需要)并后台启动
#   docker compose up -d --build   # 强制重新构建后启动(改代码后用)
#   docker compose ps              # 查看状态,重点关注是否 healthy
#   docker compose logs -f         # 实时查看日志
#   docker compose down            # 停止并删除容器(./data 数据保留)
#
# 注意:Compose V2 已废弃 version 字段,这里不写,写了会提示 obsolete。
# =============================================================================

services:
  # ---------------------------------------------------------------------------
  # 服务名,compose 内部用它互相引用(本项目单服务,叫什么都能跑)
  # 与 container_name 是两回事:这是逻辑名,下面是容器实际名字
  # ---------------------------------------------------------------------------
  nce-flow:
    # -------------------------------------------------------------------------
    # 构建配置:用当前目录(仓库根目录)的 Dockerfile 本地构建镜像
    # - context: .      表示构建上下文是当前目录
    # - dockerfile 省略 默认就是 ./Dockerfile;若 Dockerfile 在子目录,改为:
    #       build:
    #         context: .
    #         dockerfile: docker/Dockerfile
    # -------------------------------------------------------------------------
    build: .

    # -------------------------------------------------------------------------
    # 给构建产物起个名字。
    # 不加这一行,构建出的镜像会显示为 <none>:<none>,后续 docker images
    # 里难以识别、也不方便单独删除。名字可自定义,仅本地使用不推送到仓库。
    # -------------------------------------------------------------------------
    image: nce-flow:local

    # -------------------------------------------------------------------------
    # 容器名,对应 docker run --name nce-flow
    # 加了它之后容器名固定,方便 docker exec / docker logs 直接用名字;
    # 代价是同一台机器上不能并行跑两份该 compose(会重名冲突)。
    # 如果将来要做蓝绿/多实例部署,删掉这一行让 compose 自动生成名字。
    # -------------------------------------------------------------------------
    container_name: nce-flow

    # -------------------------------------------------------------------------
    # 端口映射:宿主机 11223 -> 容器 80(nginx 默认端口)
    # 格式是 "宿主机端口:容器端口"。容器内 nginx 监听 80,这部分不要改;
    # 只改了冒号左边,对外访问变为 http://localhost:11223
    # 如果 11223 也被占用,只改左边即可,例如 "12345:80"
    # -------------------------------------------------------------------------
    ports:
      - "11223:80"

    # -------------------------------------------------------------------------
    # 重启策略:
    #   no               从不自动重启(默认)
    #   always           除非手动 stop,否则总是重启(含宿主机重启后)
    #   unless-stopped   同 always,但手动 stop 后不会自动拉起 ← 当前选择
    #   on-failure       非 0 退出码才重启
    # unless-stopped 是最常用的折中:宿主机重启、容器崩溃都会自动恢复,
    # 但你主动 docker compose stop 后它保持停止状态。
    # -------------------------------------------------------------------------
    restart: unless-stopped

    # -------------------------------------------------------------------------
    # 数据卷挂载:宿主机目录 -> 容器内目录
    # -------------------------------------------------------------------------
    volumes:
      # 【核心】服务端数据持久化与多设备同步
      # 挂载后用户数据自动落到宿主机 ./data 目录(相对于 compose 文件所在目录),
      # 即使删除容器、清浏览器缓存、重新构建镜像,数据都不会丢失。
      # 备份/迁移时只需把 ./data 整个目录拷走。
      # 注意:首次启动会自动创建该目录,权限由容器内进程决定;
      #       若出现写入失败,检查宿主机目录属主(必要时 chown 101:101)。
      - ./data:/app/data

      # 【可选】运行时热更新静态页面内容(改宿主机文件即时生效,无需重建镜像)
      # 需要改哪块就取消对应那行的注释;目录不存在时 compose 会自动创建空目录,
      # 若容器内原本有内容会被空目录覆盖,请先把内容拷到宿主机对应目录。
      # - ./NCE1:/usr/share/nginx/html/NCE1
      # - ./NCE2:/usr/share/nginx/html/NCE2
      # - ./NCE3:/usr/share/nginx/html/NCE3
      # - ./NCE4:/usr/share/nginx/html/NCE4

    # -------------------------------------------------------------------------
    # 环境变量(可选)
    # -------------------------------------------------------------------------
    # environment:
      # 设置访问令牌后,需在应用「设置」页填入同一令牌才能同步数据。
      # 这是简易鉴权,不是强安全方案;公网暴露时建议再加反向代理 + HTTPS。
      # - NCE_DATA_TOKEN=change-me

      # 时区(如需日志/时间显示为北京时间可打开)
      # - TZ=Asia/Shanghai

    # -------------------------------------------------------------------------
    # 健康检查:定期探测容器内服务是否真的可用
    # 注意:这里探测的是「容器内」地址,端口固定是 80,
    #       与宿主机映射的 11223 无关,改端口时不需要动这里。
    # -------------------------------------------------------------------------
    healthcheck:
      # 探测方式说明:
      #   - 若基础镜像是 nginx:alpine,busybox 自带 wget,用下面这行即可
      #   - 若是 nginx:latest 等 Debian 基础镜像,默认没有 wget/curl,
      #     用 wget 会一直 unhealthy,此时改用:
      #       test: ["CMD-SHELL", "bash -c '</dev/tcp/127.0.0.1/80' || exit 1"]
      #     或者更轻量:test: ["CMD", "nginx", "-t"]
      # 先确认基础镜像:grep '^FROM' Dockerfile
      test: ["CMD-SHELL", "wget -q --spider http://localhost/ || exit 1"]

      # 检查间隔:每 30 秒探测一次
      interval: 30s

      # 单次探测超时:超过 10 秒视为本次失败
      timeout: 10s

      # 连续失败 3 次才判定为 unhealthy(避免偶发抖动误报)
      retries: 3

      # 启动宽限期:容器启动后 40 秒内不判定失败,
      # 给 nginx 初始化和首次构建的静态资源准备留出时间
      start_period: 40s

    # -------------------------------------------------------------------------
    # 【可选】日志轮转
    # Docker 默认日志无限增长,长期运行可能把磁盘写满,建议打开下面配置:
    # -------------------------------------------------------------------------
    # logging:
    #   driver: json-file
    #   options:
    #     max-size: "10m"   # 单个日志文件最大 10MB
    #     max-file: "3"     # 最多保留 3 个文件,超出自动删除旧的

    # -------------------------------------------------------------------------
    # 【可选】资源限制(Compose V2 单机可用 deploy.resources 或 mem_limit)
    # 个人小站一般不需要,共享主机或 VPS 内存紧张时可加上:
    # -------------------------------------------------------------------------
    # deploy:
    #   resources:
    #     limits:
    #       cpus: "1.0"
    #       memory: 512M

# =============================================================================
# 关于 networks:
# 本项目只有一个服务,使用 compose 默认创建的 bridge 网络即可,
# 无需显式声明自定义网络。将来若增加反向代理(如 caddy / nginx-proxy)
# 等第二个服务需要互通时,再加:
#
# networks:
#   nce-network:
#     driver: bridge
#
# 并在服务下加 networks: [nce-network],两边都声明才能互相解析。
# =============================================================================

image

7、点击立即部署,等待跑码;

image

8、等待完成后,点击完成;

image

9、启动服务后,直接在浏览器访问 http://NAS_IP:11223 ;比如我的是http://192.168.1.200:11223;

image

image

三、参考文档

1、gitcode:https://gitcode.com/gh_mirrors/nc/echo-flow;

2、在线体验: https://nceflow.zhenhua.lu。

四、免责声明

重要声明:本项目的内容仅限个人学习、研究或欣赏之用,完全没有丝毫商业用途。

  • 本项目仅作为辅助正版新概念英语教材的学习工具
  • 音频与文本内容的版权归原著作权人所有
  • 严禁用于任何商业目的或未经授权的传播
  • 使用本项目即表示您同意上述条款

支持正版

本人在学习过程中使用的是正版新概念英语教材。为了帮助同样热爱新概念英语的广大英语学习者受益,特开发此辅助学习工具。

为保护著作权人的权益,请在使用本站前购买正版教材:

  • 购买合法授权的新概念英语正版教材
  • 使用官方授权的学习资源和平台
  • 支持原创作者和教育出版社
  • 本项目仅作为正版教材的补充学习工具
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享