当前位置: 首页 > ops >正文

Node.js 倒计时图片服务部署与 Nginx 反向代理实战总结

Node.js 倒计时图片服务部署与 Nginx 反向代理实战总结

场景描述

我们希望实现一个倒计时图片接口,供邮件等外部平台引用,如:

https://your-domain.com/countdown/countdown.png?end=2025-09-30T00:00:00

通过访问该链接生成实时倒计时 PNG 图,用于促销活动倒计时展示。


技术栈与组件

  • Node.js + Express
  • canvas 模块绘制 PNG
  • Nginx 反向代理(启用 HTTPS)
  • Let’s Encrypt 免费 SSL 证书
  • curl 用于调试

Node.js 服务核心逻辑

监听路径:

app.get('/countdown/countdown.png', (req, res) => { ... })

监听端口:

app.listen(7897, '0.0.0.0', () => {console.log(`Countdown image server running`);
});

遇到的问题

1. curl 本地访问正常,但通过 nginx 转发返回 404

  • http://127.0.0.1:7897/countdown/countdown.png?... → 正常返回图片
  • https://182.92.100.57/countdown/countdown.png?...404 Not Found(nginx)

问题排查过程

检查点 1:Node 是否监听公网(0.0.0.0

app.listen(7897, '0.0.0.0')

否则 nginx 无法连接 127.0.0.1:7897(仅限本地)


检查点 2:Nginx location 匹配是否命中

原配置示例(错误):

location /countdown/ {proxy_pass http://127.0.0.1:7897/countdown/;
}

此配置导致路径变成:

http://127.0.0.1:7897/countdown/countdown.png → 实际访问 /countdown/countdown/countdown.png ❌

最终解决方案

正确 Nginx 配置示例

location ^~ /countdown/ {proxy_pass http://127.0.0.1:7897;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# 可选:禁止缓存,确保每次图片实时更新add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
}

关键点总结:

配置项是否正确说明
proxy_pass 末尾是否 没有加/countdown/确保拼接路径不重复
是否使用 ^~ 提前匹配避免被 / 的 Vue 路由兜底
Node 是否监听 0.0.0.0否则 nginx 无法访问
Node 路由是否正好是 /countdown/countdown.png保证路径一致
是否 reload 了 nginx修改配置后记得运行:nginx -t && nginx -s reload

成功效果

访问:

https://your-domain.com/countdown/countdown.png?end=2025-09-30T00:00:00

返回状态码:

200 OK
Content-Type: image/png

可嵌入邮箱、网页、推广活动页面等使用。


优化

功能说明
支持中文字体registerFont() 引入字体解决中文显示
可配置颜色 / 样式支持 query 参数自定义文字颜色、背景等
支持透明背景 / GIF 动画使用 canvas+GIFEncoder 生成动态图
域名绑定innorapidzs.cn 替代 IP,便于引用

测试命令

curl -v "https://your-domain.com/countdown/countdown.png?end=2025-09-30T00:00:00" --insecure

Node 服务快速启动脚本(如 pm2)

pm2 start countdown-server.js --name countdown-server
http://www.xdnf.cn/news/16038.html

相关文章:

  • OneTwoVLA——基于π0实现类π0.5:一个模型中完成原来双系统下的慢思考、快执行,且具备自适应推理能力和自我纠错能力
  • Java 大视界 -- Java 大数据机器学习模型在电商产品销量预测与库存优化管理中的应用(359)
  • OpenCV 零基础到项目实战 | DAY 2:图像预处理全解析
  • 基于JSP的高校寝室综合管理系统/宿舍管理系统
  • 【JavaSE】正则表达式学习笔记
  • 【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts) 视频教程 - 主页-最近七天微博发布量实现
  • PetaLinux 使用技巧与缓存配置
  • Docker 容器中的 HEAD 请求缺失 header?从 Content-MD5 缺失聊起
  • 亚马逊云科技 上海AI研究院 突然解散 | AI早报
  • MatchResult
  • docker-desktop启动失败
  • <PLC><汇川><算法>基于汇川PLC,实现给定数组的“子集求和”算法
  • 技能系统详解(4)——运动表现
  • Day 18:推断聚类后簇的类型
  • 17.VRRP技术
  • rabbitmq 03
  • HTTP 协议常见字段(请求头/响应头)
  • 按键精灵脚本:自动化利刃的双面性 - 从技术原理到深度实践与反思
  • 大型语言模型(Large Language Models,LLM)
  • 循环神经网络--NLP基础
  • LINUX 722 逻辑卷快照
  • 单细胞转录组学+空间转录组的整合及思路
  • MySQL 学习二 MVCC
  • Python -- logging --日志模块
  • VUE2 项目学习笔记 ? 语法 v-if/v-show
  • 使用docker(ubuntu)搭建web环境(php,apahce2)
  • 无人机吊舱与遥控器匹配技术解析
  • LeetCode 热题100:42.接雨水
  • 如何在 Windows 10 下部署多个 PHP 版本7.4,8.2
  • 从零搭建 OpenCV 项目(新手向)--第一天初识OpenCV与图像基础