博客搭建记录（三）：说说与评论系统部署

博客有两个功能需要后端：说说（Ech0，自托管微博客）和评论（Artalk）。都是 Docker 容器，先在本机跑通，6 月 29 日迁上云服务器，之后一直只靠 nginx 反代对外。

这篇记录两个服务的部署、页面集成，以及迁移和跨域踩的坑。

Ech0 本地部署

参考别人家的说说页起步，目标效果是两列瀑布流加图片灯箱。本机一条命令起容器：

docker run -d --name ech0 -p 6277:6277 \
  -v $HOME/ech0/data:/app/data \
  -e JWT_SECRET=$(openssl rand -hex 32) \
  sn0wl1n/ech0:latest

JWT_SECRET 用随机值生成，存一份到数据目录，后面迁移要跟着走。

接口文档不用猜，容器自带 Swagger（/swagger/index.html，90 个路径）。前端要用的就一个：POST /api/echo/query，body 传 {page, pageSize}，返回说说列表。实测有两个坑点：

图片文件的 url 是相对路径，前端要自己拼服务地址前缀；
头像没有公开接口，/api/files/avatar/* 全 404，只能在前端配置里硬编码头像地址。参考的那个站点也是这么干的。

瀑布流改了三版

v1 单列卡片，先跑通数据。v2 用 CSS column-count: 2，两列是出来了，但它是先填满左列再填右列，阅读顺序断裂。v3 换 JS 布局：卡片绝对定位，每张新卡放到当前高度较小的那一列，窗口缩放和图片加载完重排。

抄参考站源码时顺带加了 transform: scale(0.9)，后来吃了苦头：缩放不影响 offsetHeight 的返回值，布局计算在未缩放的坐标系里做，视觉缩放在上层叠加，容器怎么都对不齐。最后直接删掉这个缩放。

卡片样式初版是紫粉渐变加毛玻璃，8 月的整体改版里换成了扁平卡片，视觉演进另有一篇：博客搭建记录（四）：视觉系统调优。

互动三件套

说说卡片下面一排点赞、评论、分享，三个独立的 JS 文件，各自干一件事：

点赞：PUT /api/echo/like/{id}。localStorage 记已赞列表防重复，点击乐观更新，请求失败回滚。后端做了幂等，同一来源一小时内重复点赞不累加。后来改成可取消的 toggle。服务端没有 unlike 接口，取消只在前端生效，计数保留累计值。
评论：用的是 Ech0 自带的评论系统，支持嵌套回复和待审状态。展开评论框先取 form_token，配一个蜜罐隐藏字段反垃圾。
分享：弹层里放二维码和复制链接。二维码最初想用 npm 的 qrcode 包，jsdelivr 加载成功但没暴露全局变量，CommonJS 模块不能直接 <script> 用。换成远程二维码 API，一个 <img> 解决，零 JS 依赖。

三个模块都挂在瀑布流上，评论展开收起会改变卡片高度，每次 DOM 变化都要触发一次重排，外加 200ms 延迟兜底。

Artalk 评论部署

Artalk 也是 Docker 起：

1
2
3

docker run -d --name artalk -p 23366:23366 \
  -v $HOME/artalk/data:/data --restart unless-stopped \
  artalk/artalk-go

建管理员用 docker exec artalk artalk admin --name ... --password ...。注意 CLI 要传 flag，不能 pipe 标准输入，它读 TTY，pipe 会报 ioctl 错误。

Stellar 原生支持 artalk，配置四行。踩坑集中在细节上：

site: 和后台站点名逐字一致，大小写敏感，不一致评论就加载不出来。
server: 末尾不带斜杠。
前端 JS/CSS 走 jsdelivr，比 unpkg 稳。
管理后台在 /sidebar/#/login，不是 /ui/admin/。
darkMode: auto 先用默认值，主题源码注释里写了其它模式都有问题。

迁上云服务器

6 月 29 日迁到阿里云轻量服务器。服务器只跑这两个容器加 nginx，不托管静态站。三个坑：

Docker 安装走镜像源。 get.docker.com 在大陆握手超时，要配阿里云的 yum 源，安装时带 --disableexcludes=all，否则被默认排除规则过滤掉。装完配镜像加速器，但加速器只对热门镜像有效，ech0 这种小众镜像不走加速。

镜像架构要对上。 本机是 Apple Silicon（ARM64），服务器是 x86_64。本地 docker save 出来的镜像放上去就是 exec format error。解法：服务器上通过多架构代理直接拉，Docker 自动选 amd64，拉完用 docker image inspect 确认架构。

数据打包迁移。 数据目录 tar 打包上传解压，两个收尾动作：删掉 macOS 打包带进来的 ._* 资源叉文件；chown -R root:root 修正属主。tar 保留了本机的 UID 501，在 Linux 上映射成一个不相干的用户。JWT_SECRET 一起迁，迁完登录状态还在。

迁完容器端口都绑 127.0.0.1，公网只能经 nginx 进来。

CORS 查了一下午

迁完第二天，前端评论加载失败，Failed to fetch。排查链：

fetch 换 no-cors 模式，返回 opaque，说明是 CORS 不是网络不通；
curl 带 Origin 请求，响应只有 Vary: Origin，没有 Access-Control-Allow-Origin；
进容器找配置文件，/app/data 下没有——docker inspect 看挂载，容器内路径是 /data，不是想当然的 /app/data；
改 trusted_domains，重启容器，ACAO 头出现。