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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Recommended Services

› Amazon Web Services

› LeanCloud

› New Relic

› ClearDB

这是一个创建于 471 天前的主题，其中的信息可能已经有所发展或是发生改变。

网站图片是影响用户体验和网站性能的重要因素之一。如果图片过大、过多或者格式不合适，会导致网页加载缓慢、占用流量和存储空间，甚至影响网站的 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 应用的图片处理能力。

目前尚无回复

name imgproxy flarum 图片