能聚合各站热点的DailyHot

什么是 DailyHot ?

今日热榜(DailyHot)是一个获取各大热门网站热门头条的聚合网站,能追踪全网热点、实现简单高效阅读。项目分为前、后端,其中后端提供了一个聚合热门数据的 API 接口。

🚩 后端 API 特性

  • 极快响应,便于开发
  • 支持 RSS 模式和 JSON 模式
  • 支持多种部署方式
  • 简明的路由目录,便于新增

官方提供了示例网站:https://hot.imsyy.top

构建镜像

官方只提供了后端 API 镜像,但没有前端的,可以通过 vercel 实现无服务器部署。老苏想通过 Docker 部署在群晖上,只能自己动手了

如果你不想自己构建,可以跳过,直接阅读下一章节

这是一个标准的前端项目,对老苏来说,难点在于后端的地址是不确定的,所以还是采用了惯用的占位符的方式,这种方式的缺点是,只有在创建容器的时候,环境变量才起作用,中途修改是不生效的。

首先要准备一个 Dockerfile 文件,采用了分层构建,这样镜像会比较小一点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
FROM node:18-alpine as build-deps

WORKDIR /app
COPY . ./
RUN npm i -g pnpm
RUN pnpm install
RUN pnpm build

FROM nginx:1.12-alpine
MAINTAINER laosu<wbsu2003@gmail.com>

# 环境变量
ENV VITE_GLOBAL_API "https://api-hot.efefee.cn"
ENV VITE_ICP "豫ICP备2022018134号-1"

# 拷贝静态文件
COPY --from=build-deps /app/dist /usr/share/nginx/html

COPY replace_apiurl.sh ./replace_apiurl.sh
RUN chmod +x replace_apiurl.sh

EXPOSE 80
CMD ["sh", "replace_apiurl.sh"]

还需要一个 replace_apiurl.sh 文件,用于👇

  • 将打包时的占位符,替换为环境变量的值
  • 启动 nginx
1
2
3
4
5
6
7
#!/bin/bash  

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,vitegloalapi,'"$VITE_GLOBAL_API"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,viteicp,'"$VITE_ICP"',g' {} \;

nginx -g "daemon off;"

在构建之前,还要修改项目中的 .env 文件,修改前是下面这样的,老苏把原来的默认值放入了 Dockerfile 中,这样当你不设置环境变量时,也能连接官网使用

修改后

构建镜像和容器运行的基本命令如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 拉取源代码
git clone https://github.com/imsyy/DailyHot.git

# 如果 github 慢或者访问不了
git clone https://mirror.ghproxy.com/https://github.com/imsyy/DailyHot.git

# 进入代码目录
cd DailyHot

# 将 Dockerfile、 replace_apiurl 文件放进当前目录中

# 修改 .env 文件,切记!切记!切记!否则永远连的都是官方 api 地址

# 构建镜像
docker build -t wbsu2003/dailyhot:v1 .

# 生成容器
docker run -d \
--name=dailyhot \
-p 6689:80 \
-e VITE_GLOBAL_API="http://192.168.0.197:6688" \
-e VITE_ICP="" \
wbsu2003/dailyhot:v1

安装

在群晖上以 Docker 方式安装。

后端 API

在注册表中搜索 dailyhot-api ,选择第一个 imsyy/dailyhot-api,版本选择 latest

本文写作时, latest 版本对应为 v2.0.0-rc.2

端口

本地端口不冲突就行,不确定的话可以用命令查一下

1
2
# 查看端口占用
netstat -tunlp | grep 端口号
本地端口 容器端口
6688 6688

前端

在注册表中搜索 wbsu2003/dailyhot,版本选择 latest

端口

本地端口不冲突就行,不确定的话可以用命令查一下

1
2
# 查看端口占用
netstat -tunlp | grep 端口号
本地端口 容器端口
6689 80

环境

可变
VITE_GLOBAL_API 后端 API 地址
VITE_ICP ICP 信息

因为 Dockerfile 设置了,所以有默认值

后端 API 地址设为 http://群晖IP:6688VITE_ICP 没有的话可以设为空

命令行安装

如果你熟悉命令行,可能用 docker cli 更快捷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 运行后端容器
docker run -d \
--restart unless-stopped \
--name dailyhot-api \
-p 6688:6688 \
imsyy/dailyhot-api

# 运行前端容器
docker run -d \
--name=dailyhot-web \
-p 6689:80 \
-e VITE_GLOBAL_API="http://192.168.0.197:6688" \
-e VITE_ICP="" \
wbsu2003/dailyhot

也可以用 docker-compose 安装,将下面的内容保存为 docker-compose.yml 文件

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

services:
dailyhot-api:
image: imsyy/dailyhot-api
container_name: dailyhot-api
restart: unless-stopped
ports:
- 6688:6688

dailyhot-web:
image: wbsu2003/dailyhot
container_name: dailyhot-web
restart: unless-stopped
ports:
- 6689:80
environment:
- VITE_GLOBAL_API=http://192.168.0.197:6688
- VITE_ICP=

然后执行下面的命令

1
2
3
4
5
6
7
8
9
10
# 新建文件夹 dailyhot
mkdir -p /volume1/docker/dailyhot

# 进入 dailyhot 目录
cd /volume1/docker/dailyhot

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

前端

在浏览器中输入 http://群晖IP:6689 就能看到主界面

手机上的效果

后端

在浏览器中输入 http://群晖IP:6688 就能看到后端界面

测试接口,在浏览器中输入 http://群晖IP:6688/all

获取榜单数据,例如:51cto,可以在浏览器中输入 http://群晖IP:6688/51cto

获取 RSS,可以在浏览器中输入 http://群晖IP:6688/51cto?rss=true

可以用于 RSS 阅读器中订阅

参考文档

imsyy/DailyHotApi: 🔥 今日热榜 API,一个聚合热门数据的 API 接口,支持 Vercel 部署 | 前端页面:https://github.com/imsyy/DailyHot
地址:https://github.com/imsyy/DailyHotApi

imsyy/DailyHot: DailyHot 今日热榜前端页面 | API:https://github.com/imsyy/DailyHotApi
地址:https://github.com/imsyy/DailyHot

今日热榜 - 汇聚全网热点,热门尽览无余
地址:https://hot.imsyy.top/#/

关于 DailyHotApi 的重构 | 無名小栈
地址:https://blog.imsyy.top/posts/2024/0408