ReaderMX.
腾讯云服务器

基于腾讯云Lighthouse自建论坛及图片预处理工具

腾若海约 7 分钟
网站图片是影响用户体验和网站性能的重要因素之一。如果图片过大、过多或者格式不合适，会导致网页加载缓慢、占用流量和存储空间，甚至影响网站的SEO排名。为了解决这些问题，我们可以使用图片预处理工具，对网站图片进行优化和处理，例如：

  • 转换图片格式为webp或avif，这两种格式可以在保持图片质量的同时，大幅减少图片大小。

  • 智能压缩图片，根据图片内容和场景，自动调整图片质量和尺寸，达到最佳的平衡。

  • 自由裁剪图片，根据不同的设备和屏幕尺寸，动态生成适合的图片版本，避免浪费带宽和空间。

  • 添加水印图片，为网站图片增加版权保护和品牌宣传的效果。

本文将引导读者通过在腾讯云Lighthouse服务器部署Flarum和Imgproxy，且实现论坛图片在不修改原图的基础上增加上述图片预处理能力。

购买并配置Lighthouse服务器

Lighthouse是腾讯云推出的一款轻量应用服务器产品，它提供了高性价比、高可用性、高安全性和高灵活性的云端计算服务。具体信息参阅官方文档：轻量应用服务器概述。
为了部署imgproxy服务，我们需要购买一台轻量应用服务器，并配置好相关的环境和依赖。购买步骤参见官方文档：使用轻量应用服务器一键创建应用，应用类型请选择k3s。

编写Flarum和Imgproxy配置文件

Flarum 是一款非常简洁的PHP开源论坛程序，它响应快速、简便易用，拥有打造高质量社区的一切功能。Flarum 还高度可扩展，可以对它进行深度定制。
Imgproxy 是一个基于Go语言开发的、轻量级的、无状态的图片代理服务，它可以快速地处理任何来源的图片，并提供丰富的参数和选项来定制化输出结果。Imgproxy 支持多种格式、压缩算法、裁剪模式、水印样式等功能，并且可以轻松地集成到任何网站或应用中。
Webox 是一款基于PHP和Nginx的轻量级Web应用容器，它可以快速地部署和运行任何PHP应用，例如WordPress、Flarum、Discuz、Typecho等。Webox 还支持多版本PHP和多版本Nginx，可以根据应用的需求来选择不同的版本，详见 https://github.com/rehiy/webox-docker。
为了快速部署应用，我们使用了两个容器化的应用程序：rehiy/webox:nginx-php8.1 和 imgproxy。前者用于部署Flarum，后者用于部署Imgproxy。下面我们先生成一些配置文件，请按照路径写入服务器。
这里有必要提醒一下，文件中的换行符应是LF，否则可能会导致脚本无法正常工作。

1）Nginx 配置文件

文件路径 /srv/etc/nginx/host.d/flarum.conf，请注意修改为你的域名。
server {
   listen 80;
   server_name bbs.opentdp.org;

   set $pool default;
   set $pooldir /var/www/$pool;
   set $sitedir $pooldir/org.opentdp.bbs;

   root $sitedir/public;
   index index.php index.htm index.html;
   try_files $uri $uri/ /index.php?$query_string;

   include http.d/server_fastcgi_php;

   location ~ ^/(assets/files/.+(png|jpg|jpeg|webp|avif|gif|ico|svg|heic|bmp|tiff))$ {
       set $image local:///org.opentdp.bbs/public/$1;
       proxy_pass http://127.0.0.1:8080/$image_option/plain/$image;
  }
}

map $args $image_option {
   ~^xs     g:sm/rs:auto:320;
   ~^sm     g:sm/rs:auto:640/wm:1:soea:::0.2;
   ~^md     g:sm/rs:auto:800/wm:1:soea:::0.2;
   ~^lg     g:sm/rs:auto:1024/wm:1:soea:::0.2;
   ~^xl     g:sm/rs:auto:1280/wm:1:soea:::0.2;
   ~^xxl   g:sm/rs:auto:1600/wm:1:soea:::0.2;
   ~^3xl   g:sm/rs:auto:2048/wm:1:soea:::0.2;
   ~^4xl   g:sm/rs:auto:2560/wm:1:soea:::0.2;
   ~^5xl   g:sm/rs:auto:3264/wm:1:soea:::0.2;
   ~^6xl   g:sm/rs:auto:4080/wm:1:soea:::0.2;
   default g:sm/rs:auto:1024/wm:1:soea:::0.2;
}

2）Flarum 自动安装脚本

文件路径 /srv/etc/wkit.d/s7-flarum
#!/bin/sh
#

if [ ! -x /usr/bin/composer ]; then
   wget -qO composer-setup.php https://getcomposer.org/installer
  php composer-setup.php --install-dir=/usr/bin --filename=composer
   rm composer-setup.php
fi

if [ ! -f /var/www/default/org.opentdp.bbs/composer.json ]; then
  mdkir -p /var/www/default/org.opentdp.bbs
   ## install flarum ##
   cd /var/www/default/org.opentdp.bbs
  composer create-project flarum/flarum .
  composer require flarum-lang/chinese-simplified
fi

3）Flarum 计划任务脚本

文件路径 /srv/etc/periodic/5min/flarum-cron
#!/bin/sh
#

cd /var/www/default/org.opentdp.bbs
php flarum schedule:run
chown -R 2:2 .

4）添加水印和回退图片

回退图片路径 /srv/htdocs/fallback.png，找不到图片时使用这个图作为回退
水印图片路径 /srv/htdocs/watermark.svg，务必使用svg格式，否则会水印可能变形或模糊

5）kubernetes 配置文件

文件路径 /srv/myforum.yaml
kind: Deployment
apiVersion: apps/v1
metadata:
name: &name myforum
labels:
  app: *name
spec:
selector:
  matchLabels:
    app: *name
template:
  metadata:
    labels:
      app: *name
  spec:
    containers:
      - name: nginx-php8
        image: rehiy/webox:nginx-php8.1
        ports:
          - containerPort: 80
        volumeMounts:
          - name: *name
            subPath: etc
            mountPath: /var/config
          - name: *name
            subPath: htdocs
            mountPath: /var/www/default
      - name: imgproxy
        image: darthsim/imgproxy
        env:
          - name: IMGPROXY_READ_TIMEOUT
            value: "30"
          - name: IMGPROXY_WRITE_TIMEOUT
            value: "30"
          - name: IMGPROXY_MAX_SRC_RESOLUTION
            value: "1200"
          - name: IMGPROXY_WATERMARK_PATH
            value: /htdocs/watermark.svg
          - name: IMGPROXY_FALLBACK_IMAGE_PATH
            value: /htdocs/fallback.png
          - name: IMGPROXY_LOCAL_FILESYSTEM_ROOT
            value: /htdocs
          - name: IMGPROXY_IGNORE_SSL_VERIFICATION
            value: "true"
          - name: IMGPROXY_JPEG_PROGRESSIVE
            value: "true"
          - name: IMGPROXY_PNG_INTERLACED
            value: "true"
          - name: IMGPROXY_ENFORCE_AVIF
            value: "true"
          - name: IMGPROXY_ENFORCE_WEBP
            value: "true"
        ports:
          - containerPort: 8080
        volumeMounts:
          - name: *name
            subPath: htdocs
            mountPath: /htdocs
    volumes:
      - name: *name
        hostPath:
          path: /srv
          type: DirectoryOrCreate
---
kind: Service
apiVersion: v1
metadata:
name: &name myforum
labels:
  app: *name
spec:
selector:
  app: *name
ports:
  - name: http
    port: 80
    targetPort: 80
---
kind: Ingress
apiVersion: networking.k8s.io/v1
metadata:
name: &name myforum
annotations:
  traefik.ingress.kubernetes.io/router.entrypoints: web
spec:
rules:
  - host: bbs.opentdp.org
    http:
      paths:
        - path: /
          pathType: Prefix
          backend:
            service:
              name: *name
              port:
                name: http
配置文件中的每个环境变量都有特定的作用，简单地介绍一下：
  • IMGPROXY_READ_TIMEOUT 设置从源读取图像的超时时间（以秒为单位）
  • IMGPROXY_WRITE_TIMEOUT 设置将图像写入客户端的超时时间（以秒为单位）
  • IMGPROXY_MAX_SRC_RESOLUTION 设置源图像的最大分辨率（以像素为单位），超过此分辨率的图像将被拒绝
  • IMGPROXY_WATERMARK_PATH 设置水印图像的本地路径，如果启用了水印功能，imgproxy将使用此图像作为水印
  • IMGPROXY_FALLBACK_IMAGE_PATH 设置备用图像的本地路径，如果源图像无法加载或处理，imgproxy将使用此图像作为替代
  • IMGPROXY_LOCAL_FILESYSTEM_ROOT 设置本地文件系统的根目录，如果源URL以local://开头，imgproxy将从此目录中查找文件
  • IMGPROXY_IGNORE_SSL_VERIFICATION 设置是否忽略SSL证书验证，如果为true，imgproxy将不检查源服务器的SSL证书是否有效
  • IMGPROXY_JPEG_PROGRESSIVE 设置是否生成渐进式JPEG图像，如果为true，imgproxy将生成可以逐步显示的JPEG图像
  • IMGPROXY_PNG_INTERLACED 设置是否生成交错PNG图像，如果为true，imgproxy将生成可以逐步显示的PNG图像
  • IMGPROXY_ENFORCE_AVIF 设置是否强制使用AVIF格式，如果为true，imgproxy将忽略请求中指定的格式，并始终生成AVIF图像（浏览器不支持则忽略）
  • IMGPROXY_ENFORCE_WEBP 设置是否强制使用WEBP格式，如果为true，imgproxy将忽略请求中指定的格式，并始终生成WEBP图像（浏览器不支持则忽略）

部署Flarum和Imgproxy服务

通过ssh登录服务器，执行以下命令，部署Flarum和Imgproxy服务。
kubectl apply -f /srv/myforum.yaml
等待配置完成，已经成功地部署并集成了flarum论坛和imgproxy服务，也可以在你的新论坛上享受快速、安全、灵活的图片处理功能了。

测试Imgproxy图片优化能力

在浏览器打开这个地址 https://bbs.opentdp.org/assets/files/2023-08-18/1692350245-285421-img30.jpg，观察图片是否正常显示。
  • 无论原图尺寸多大，默认将输出最大宽度为1024px的图片
  • 查看图片右下角，将会显示我们添加的水印，且占最长边始终占图片对应边长的20%大小。
  • 查看响应头信息，如果浏览器支持将包含Content-Disposition: inline; filename="1692350245-285421-img30.webp"等类型信息。
  • 添加缩放参数，例如在图片地址后面添加?sm，将会生成一个最大宽度为640px的缩略图。更多参数如下：
    • xs  --  320px
    • sm  --  640px
    • md  --  800px
    • lg  --  1024px
    • xl  --  1280px
    • xxl --  1600px
    • 3xl --  2048px
    • 4xl --  2560px
    • 5xl --  3264px
    • 6xl --  4080px

结束语

本文以Flarum论坛程序作为引子，测试了Imgproxy的基础能力，实际上广大读者可以依据教程扩展到其他任何需要图片处理的场景中去，起码基于本文可以很简单的实现扩展Wordpress、Disucz等php应用的图片处理能力。

KEEP THE THREAD GOING

更多来源文章

Octop正式开源，让AI从聊天助手变工作搭档

腾讯云自研AI助手，真的懂"一起干活" 🧩 可插拔架构，灵活适配 底层存储与服务组件自由切换，架构弹性满足不同业务场景。 🖥️ 远程操控，所见即所得 Agent直接操作桌面应用，从"能对话"进化到"能执行"。 👥 多用户与多Agent专家协同 多角色Agent并行工作，代码、数据、文档各有专攻，一次调度，全线响应。…

阅读全文

腾讯自选股AI投研助理来了

现在，在Lighthouse Agent里也能体验「投研助理」专家了。 作为腾讯自选股AI投研助理，「投研助理」覆盖沪深港美行情，支持智能选股、个股解析、金融数据查询等多项能力。 你可以像聊天一样发起投研需求： 🔍 一句话选股，快速筛选目标标的 📈 智能盯盘，关注关键行情变化 🧾 个股体检，辅助了解个股表现 ⏰ 自动…

阅读全文