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

rehiy2023-08-28 15:05

网站图片是影响用户体验和网站性能的重要因素之一。如果图片过大、过多或者格式不合适，会导致网页加载缓慢、占用流量和存储空间，甚至影响网站的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，可以根据应用的需求来选择不同的版本，详见 github.com/rehiy/webox...。

为了快速部署应用，我们使用了两个容器化的应用程序：rehiy/webox:nginx-php8.1 和 imgproxy。前者用于部署Flarum，后者用于部署Imgproxy。下面我们先生成一些配置文件，请按照路径写入服务器。

这里有必要提醒一下，文件中的换行符应是LF，否则可能会导致脚本无法正常工作。

1）Nginx 配置文件

文件路径 /srv/etc/nginx/host.d/flarum.conf，请注意修改为你的域名。

nginx 复制代码 
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

bash 复制代码 
#!/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

bash 复制代码 
#!/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

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服务。

bash 复制代码 
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应用的图片处理能力。

相关推荐
木鱼时刻7 小时前
容器与 Kubernetes 基本概念与架构
容器·架构·kubernetes
chuanauc18 小时前
Kubernets K8s 学习
java·学习·kubernetes
庸子1 天前
基于Jenkins和Kubernetes构建DevOps自动化运维管理平台
运维·kubernetes·jenkins
李白你好1 天前
高级运维！Kubernetes（K8S）常用命令的整理集合
运维·容器·kubernetes
Connie14511 天前
k8s多集群管理中的联邦和舰队如何理解？
云原生·容器·kubernetes
伤不起bb2 天前
Kubernetes 服务发布基础
云原生·容器·kubernetes
别骂我h2 天前
Kubernetes服务发布基础
云原生·容器·kubernetes
weixin_399380692 天前
k8s一键部署tongweb企业版7049m6（by why+lqw）
java·linux·运维·服务器·云原生·容器·kubernetes
斯普信专业组2 天前
K8s环境下基于Nginx WebDAV与TLS/SSL的文件上传下载部署指南
nginx·kubernetes·ssl
&如歌的行板&2 天前
如何在postman中动态请求k8s中的pod ip（基于nacos）
云原生·容器·kubernetes
热门推荐
01GPU 进阶笔记（二）：华为昇腾 910B GPU02Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案03Coze扣子平台完整体验和实践（附国内和国际版对比）04MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法05扣子空间的使用教程与大模型技术思考06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07KGG转MP3工具|非KGM文件|解密音频08Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面09DeepSeek各版本说明与优缺点分析10django中用 InforSuite RDS 替代memcache