『亚马逊云科技产品测评』活动征文|搭建Squoosh图片在线压缩工具

搭建Squoosh图片在线压缩工具

  • 前言
  • 一、Squoosh是什么?
  • 二、准备一台Lightsail实例
    • 1.进入控制台
    • 2.创建实例
    • 3.开放端口
    • 4.部署Squoosh
    • 5.预览
  • 三、搭建反向代理
    • 1. 安装宝塔
    • 2. 配置反向代理
    • 3. 预览代理效果

提示:授权声明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道


前言

兄弟们,跟你们分享一个重要的技能—网络图片优化。现在大家上传和传送图片,尤其是手机 App,图片大小一大就很卡顿很耗流量。作为全栈开发人员,我们必须掌握如何高效优化图片资源。之前我一直在用在线的 Squoosh.app 工具,但是访问国外网站不免会有延迟。后来我想,不如直接部署 Squoosh 到自己的云服务吧,就能快速高效地处理大量图片需求了!

于是我选定了 AWS Lightsail 这个简单高性价比的服务。前期准备工作包括购买实例,安装 Nginx、运行时等。然后从 Github Clone 原 Squoosh 代码,进行一些配置优化。部署成功后,就可以通过内网 IP 使用 Squoosh 服务了。测试效果很不错,压缩效率比外网高出一截,而且付费模型简单。

如果你也有类似图片处理需求,不妨考虑这个方案,跟我一起来实践一下吧!

在这里插入图片描述


提示:以下是本篇文章正文内容,下面案例可供参考

一、Squoosh是什么?

Squoosh是一个图像压缩Web应用程序,压缩效率非常给力,可以让我们深入研究各种图像压缩器提供的高级选项。图像压缩在本地处理,并且没有其他数据发送到服务器。平时我写博客的图片都会通过这个处理一下,可以做到无损或低损压缩,大大减小图片空间,并且可以节省带宽,加快页面渲染速度,建议大家写文章上传图片时进行无损压缩。

  • Github:https://github.com/GoogleChromeLabs/squoosh
  • Gitee:https://gitee.com/mirrors/Squoosh

这是一个开源的,大家可以通过官方的在线网站使用,也可以自己搭建一个私有的,官网网站是:

  • https://squoosh.app/

二、准备一台Lightsail实例

1.进入控制台

如果控制台直接有 Lightsail 那可以直接点击进入,如果没有,直接通过上面的搜索即可
在这里插入图片描述
我们会到达这么一个页面,第一次来,咱们的实例列表是空的,等会我们就需要去创建一台实例了
在这里插入图片描述

2.创建实例

点击 create instance 进入实例创建页面,里面有一些关于实例的选项,比方说操作系统,平台等,因为我们是自己部署,所以我们选择 OS Only,平台选择 Linux,操作系统选择擅长的 ubuntu20.04
在这里插入图片描述
滑到最下面点击创建,创建好后,返回列表就可以看到实例了

在这里插入图片描述

3.开放端口

为了更方便我们进行调试和预览,我们先要把安全组打开,因为默认这个流量是不支持其他端口的,我们在开发的过程中可以先暂时接受所有的流量,调试完成之后再把服务对应的端口一个个放开,方便我们进一步调试

进入实例详情 -> networking -> add rule

在这里插入图片描述
这样就是放入所有流量了

4.部署Squoosh

完成准备工作后,我们就要开始部署我们的程序了,这里我们通过 git 直接拉取即可

git clone https://github.com/GoogleChromeLabs/squoosh.git
  • 进入项目目录
cd squoosh
  • 切换到稳定版本
git checkout v1.12.0
  • 安装依赖
npm install

如果没有 npm 的 可以先运行 apt install npm,然后再执行

在这里插入图片描述
这里大家还有可能出现一个问题就是 node 和 npm的版本不行了,可以通过 nvm来切换 node,操作如下:

运行下面命令安装NVM工具。

curl -sL https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh -o install_nvm.sh
bash install_nvm.sh

重新加载bashrc文件,以便使更改在用户配置文件中生效。

source ~/.bashrc

运行下面命令查看节点的可用版本。

nvm ls-remote

找到您要下载安装的Node.js最新版本,然后运行下面命令。

nvm install 10.0

新的Node.js版本安装成功后,运行下面命令查看当前版本号。

node –version

5.预览

依赖安装完成之后可以直接使用开发模式进行预览:

npm start

在这里插入图片描述

开发环境使用的是8080端口,我们通过 公网IP访问一下

在这里插入图片描述

上面的访问方式已经实现可以正常使用了

三、搭建反向代理

如果直接通过服务端口访问的话不利于我们扩展和管理,比方说我们要做一些负载均衡,或者在接收到请求时需要进行一些过滤操作,直接将流量导入应用是非常不方便的,所以我们一般会增加一个反向代理,便于之后扩展,我们主要采用宝塔来一键安装 Nginx

1. 安装宝塔

我们这里直接使用万能安装脚本

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

安装好后弹出宝塔登录入口和账号密码

在这里插入图片描述
我这里之前安装过,通过 bt default 也可以查看默认的信息,这里密码隐藏了,可以通过 bt 然后输入 5 进行密码修改,然后通过入口登入即可

2. 配置反向代理

通过宝塔的站点管理
在这里插入图片描述
这里我们主要配置代理名称和url

  • 代理名称:image
  • 目标url:http://127.0.0.1:8080

在这里插入图片描述

3. 预览代理效果

可以看到,现在不用端口也可以正常代理到我们的程序上了
在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/157068.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【前端】vue中合并表格行

做平台功能时&#xff0c;遇到一个需求是需要将表格某列有相同值时进行合并展示&#xff0c;比如 1、通过在Element中得知需要在表格中增加span-method方法 <el-table:data"tableData":span-method"cellMerge"borderstyle"width: 100%; margin-to…

mysql8.0英文OCP考试第61-70题

Q61.You wish to protect your MySQL database against SQL injection attacks. Which method would fail to do this? A)using stored procedures for any database access B)using PREPARED STATEMENTS C)installing and configuring the Connection Control plugin ( …

苍穹外卖遇到的问题—员工分页查询

项目场景&#xff1a; 系统中的员工很多的时候&#xff0c;如果在一个页面中全部展示出来会显得比较乱&#xff0c;不便于查看&#xff0c;所以一般的系统中都会以分页的方式来展示列表数据。而在我们的分页查询页面中, 除了分页条件以外&#xff0c;还有一个查询条件 “员工姓…

kubeadm join 192.168.10.16:6443 --token xxx报错Failed to request cluster-info

1、node节点执行 kubeadm join 192.168.10.16:6443 --token hak4zi.hrib9uv4p62t1uok --discovery-token-ca-cert-hash sha256:4337638eef783ee6a66045ad699722079e071c2dfbaa21e37d3174f04d58ea97 --v2 报错 [discovery] Failed to request cluster-info, will try again: G…

美团面试:微服务如何拆分?原则是什么?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如美团、字节、如阿里、滴滴、极兔、有赞、希音、百度、网易的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 微服务如何拆分&#xff1f; 微服务拆分的规范和原则…

力扣labuladong一刷day14天翻转单链表共2题

力扣labuladong一刷day14天翻转单链表共2题 文章目录 力扣labuladong一刷day14天翻转单链表共2题一、06. 反转链表二、92. 反转链表 II 一、06. 反转链表 题目链接&#xff1a;https://leetcode.cn/problems/reverse-linked-list/ 思路&#xff1a; 迭代法&#xff1a;新new一…

LeetCode 热题100——栈与队列专题(三)

一、有效的括号 20.有效的括号&#xff08;题目链接&#xff09; 思路&#xff1a; 1&#xff09;括号的顺序匹配&#xff1a;用栈实现&#xff0c;遇到左括号入&#xff0c;遇到右括号出&#xff08;保证所出的左括号与右括号对应&#xff09;&#xff0c;否则顺序不匹配。 2…

【Web】Ctfshow XSS刷题记录

目录 反射型XSS ①web316 ②web317-319 ③web320-322 ④web323-326 存储型XSS ①web327 ②web328 ③web329 ④web330 ⑤web331 ⑥web332-333 反射型XSS ①web316 直接输入<script>alert(1)</script>,能弹窗。xss题目一般会有个bot&#xff0c;可以触…

QT 搭建opencv 环境

1. 准备工具CMake 一、CMake介绍 CMake是一个被广泛使用的、开源免费并且完全跨平台的构建工具&#xff0c;可以用简单的语句来描述所有平台的安装(编译过程)。它能够输出各种各样的makefile或者project文件&#xff0c;能测试编译器所支持的C特性&#xff0c;类似UNIX下的aut…

nodejs微信小程序 +python+PHP- 校园志愿者管理系统的设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

SPSS快速聚类

前言&#xff1a; 本专栏参考教材为《SPSS22.0从入门到精通》&#xff0c;由于软件版本原因&#xff0c;部分内容有所改变&#xff0c;为适应软件版本的变化&#xff0c;特此创作此专栏便于大家学习。本专栏使用软件为&#xff1a;SPSS25.0 本专栏所有的数据文件请点击此链接下…

华为ac+fit漫游配置案例

Ap漫游配置: 其它配置上面一样,ap管理dhcp和业务dhcp全在汇聚交换机 R1: interface GigabitEthernet0/0/0 ip address 11.1.1.1 255.255.255.0 ip route-static 12.2.2.0 255.255.255.0 11.1.1.2 ip route-static 192.168.0.0 255.255.0.0 11.1.1.2 lsw1: vlan batch 100 200…

【通俗易懂】git原理、安装及连接gitlab,github

目录 一、GIT原理【这部分也挺简单&#xff0c;可以看看&#xff0c;如果没时间可以直接跳到第二部分】 SVN与Git的的区别 二、安装Git 2.1 获取Git安装程序 2.2 Git安装过程 三、Git连接Gitlab 3.1 gitlab准备工作 3.2 本地计算机准备工作及配置git 四、Git连接Github…

flutter创建不同样式的按钮,背景色,边框,圆角,圆形,大小都可以设置

在ui设计中&#xff0c;可能按钮会有不同的样式需要你来写出来&#xff0c;所以按钮的不同样式&#xff0c;应该是最基础的功能&#xff0c;在这里我们赶紧学起来吧&#xff0c;web端可能展示有问题&#xff0c;需要优化&#xff0c;但是基本样式还是出来了 我是将所有的按钮放…

【复盘】接口自动化测试框架建设的经验与教训!

为什么选择这个话题&#xff1f; 一是发现很多“点工”在转型迷茫期都会问一些自动化测试相关的问题&#xff0c;可以说自动化测试是“点工”升级的必经之路&#xff1b;二是Google一下接口自动化测试&#xff0c;你会发现很多自动化测试框架相关的文章&#xff0c;但是大部分…

小红书全自动加群引流脚本「 软件工具+引流技术教程」

软件介绍&#xff1a; 小红书群聊最新玩法&#xff0c;可自动检测群人数加群&#xff0c;不会加到垃圾群。定时发送广告&#xff0c;红书群聊的引流玩法回来了 功能一、自动搜索关键词加群&#xff0c;比如创业、项目、鞋子、包包、考公、考研… 功能二、自动检测群人数&…

宏集新闻 | 虹科传感器事业部正式更名为宏集科技

致一直支持“虹科传感器”的朋友们&#xff1a; 为进一步整合资源&#xff0c;给您带来更全面、更优质的服务&#xff0c;我们非常荣幸地宣布&#xff0c;虹科传感器事业部已正式更名为宏集科技。这一重要的改变代表了虹科持续发展进程中的新里程碑&#xff0c;也体现了我们在传…

vue中原生H5拖拽排序_拖拽图片也是同样的道理

原文地址【vue中原生H5拖拽排序_拖拽图片也是同样的道理】 H5有基于拖拽的事件机制&#xff0c;如果你还不熟悉&#xff0c;请看我之前的文章【拖拽上传】中有介绍。 原生拖拽API实现 由于比较简单直接上代码了&#xff1a; <!DOCTYPE html> <html lang"en&qu…

gwas数据获取如何获取完整的GWAS summary数据(1)------GWAS catalog数据库

IEU OpenGWAS project (mrcieu.ac.uk) UK Biobank - UK Biobank GWAS Catalog 在孟德尔随机化&#xff08;Mendelian randomization&#xff0c;MR&#xff09;研究中&#xff0c;对于暴露数据我们只需要那些显著的SNP信息&#xff0c;这样的信息在各种GWAS数据库中都是很容…

vue2的响应式数据变化

一、Vue2是如何实现数据响应式的 Vue实现响应式变化的方式是通过数据劫持和发布-订阅模式。 数据劫持&#xff1a;Vue通过使用Object.defineProperty()方法对数据对象的属性进行劫持&#xff0c;使其能够在属性值发生变化时触发相应的操作。 发布-订阅模式&#xff1a;Vue使用…