今日热榜：热门数据聚合

2023/10/18 使用GitHub Actions更新了docker镜像，更新了容器运行命令

介绍

一个聚合了中文热门站点数据的项目， 不出户，知天下！

该项目分两部分：今日热榜API及前端页面

示例站点：https://hot.imsyy.top/

GitHub地址-API：imsyy/DailyHotApi: 今日热榜 API，一个聚合热门数据的 API 接口

GitHub地址-前端：imsyy/DailyHot: DailyHot 今日热榜前端页面

docker镜像-API：liwangsheng/dailyhot-api - Docker Image | Docker Hub

docker镜像-前端：liwangsheng/dailyhot-web - Docker Image | Docker Hub

预览

Docker部署

看到好玩的项目，第一件事就是打包成docker镜像😋

x64架构可跳过构建阶段直接使用我的镜像

构建镜像

API镜像

# 拉取代码
git clone https://github.com/imsyy/DailyHotApi.git

# 进入目录
cd DailyHotApi/

编辑Dockerfile，如下：

FROM alpine

WORKDIR /app

COPY . .

RUN apk update && apk add nodejs npm && npm install

CMD ["npm","start"]

# 构建镜像
docker build -t dailyhot-api .

前端镜像

# 拉取代码
git clone https://github.com/imsyy/DailyHot.git

# 进入目录
cd DailyHot/

# 编辑start.sh脚本
vim start.sh

要将API 地址及备案号作为环境变量传入打包好的静态资产并构建镜像需要写一个脚本，内容如下：

#!/bin/ash

# 替换 API 地址及备案号
find '/app' -name '*.js' -exec sed -i -e 's,http://localhost:6688,'"$API"',g' {} \;
find '/app' -name '*.js' -exec sed -i -e 's,豫ICP备2022018134号-1,'"$ICP"',g' {} \;

# # 启动 httpd 服务器
httpd -f -p 80 -h /app

# 添加执行权限
chmod +x start.sh

编辑Dockerfile：

FROM node:16-alpine

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

RUN npm run build

FROM busybox:1.35.0-uclibc

WORKDIR /app

COPY --from=0 /app/dist .

COPY --from=0 /app/start.sh .

ENV API="https://api-hot.imsyy.top"

ENV ICP="豫ICP备2022018134号-1"

CMD ["/app/start.sh"]

# 构建镜像
docker build -t dailyhot-web .

运行

API容器

docker run -d \
    --name dailyhot-api \
    --restart always \
    -p 6688:6688 \
    -e ALLOWED_DOMAIN="https://hot.imsyy.top" \  # 可选，指定允许的前端域名
    liwangsheng/dailyhot-api

访问 ip:6688即可看到api服务

前端容器

docker run -d \
    --name dailyhot-web \
    -p 6677:80 \
    -e API="https://hot-api.bbit.fun" \
    -e ICP="没有备案捏" \
    --restart always \
    liwangsheng/dailyhot-web

修改刚刚搭建的api地址以及备案号，访问ip:6677即可看到热榜

反向代理自行解决，可以看看我之前的文章🥰

最后

如果有问题或需要改进的地方请评论回复我😇

参考文档

[1]前后端分离，如何在前端项目中动态插入后端API基地址？（in docker） - 博客猿马甲哥 - 博客园 (cnblogs.com)

[2]感谢nodeseek用户bbchen提供的api地址