前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于腾讯云Lighthouse自建论坛及图片预处理工具

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

作者头像
腾讯云计算产品团队
发布2023-09-09 14:24:46
2640
发布2023-09-09 14:24:46
举报

网站图片是影响用户体验和网站性能的重要因素之一。如果图片过大、过多或者格式不合适,会导致网页加载缓慢、占用流量和存储空间,甚至影响网站的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.1imgproxy。前者用于部署Flarum,后者用于部署Imgproxy。下面我们先生成一些配置文件,请按照路径写入服务器。

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

1)Nginx 配置文件

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

代码语言:javascript
复制
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

代码语言:javascript
复制
#!/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

代码语言:javascript
复制
#!/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

代码语言:javascript
复制
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服务。

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2023-09-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯云服务器 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 购买并配置Lighthouse服务器
  • 编写Flarum和Imgproxy配置文件
    • 1)Nginx 配置文件
      • 2)Flarum 自动安装脚本
        • 3)Flarum 计划任务脚本
          • 4)添加水印和回退图片
            • 5)kubernetes 配置文件
            • 部署Flarum和Imgproxy服务
            • 测试Imgproxy图片优化能力
            • 结束语
            相关产品与服务
            图片处理
            图片处理(Image Processing,IP)是由腾讯云数据万象提供的丰富的图片处理服务,广泛应用于腾讯内部各产品。支持对腾讯云对象存储 COS 或第三方源的图片进行处理,提供基础处理能力(图片裁剪、转格式、缩放、打水印等)、图片瘦身能力(Guetzli 压缩、AVIF 转码压缩)、盲水印版权保护能力,同时支持先进的图像 AI 功能(图像增强、图像标签、图像评分、图像修复、商品抠图等),满足多种业务场景下的图片处理需求。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档