使用谷歌开源程序 Squoosh 搭建专属图片压缩网站

发布于 2020-01-09

使用谷歌开源程序 Squoosh 搭建专属图片压缩网站

Squoosh是谷歌开源的一个图片在线压缩程序,我们可以使用它来搭建我们自己的图片压缩网站。Squoosh 是用 nodejs 开发的,所以,在正式搭建前需要先安装 nodejs 环境。今天,就来为大家分享一下使用谷歌开源程序 Squoosh 搭建专属图片压缩网站的过程。

下载地址

Github 地址:https://github.com/GoogleChromeLabs/squoosh/

安装

1、安装 nodejs

nodejs 的安装过程此处就不详细介绍了,大家可以自行百度一下。

2、克隆仓库

指定安装目录,比如 opt:

cd /opt

克隆代码:

git clone https://github.com/GoogleChromeLabs/squoosh.git

完成后,会发现 opt 目录下多了 squoosh 目录。

3、安装 squoosh

切换到 squoosh 目录下

cd squoosh

执行下面两条命令

npm install
npm run build

4、启动服务:

npm start

运行结果:

可以看到,监听端口为 8080。

我们也可以通过后台进程运行模式来启动服务,命令:

nohup npm start &

5、开放端口

开放 8080 端口,具体可以参考下面的两篇文章:

CentOS7开放端口及开启防火墙

在 Ubuntu 中用 UFW 配置防火墙

6、访问

用浏览器访问 http://101.200.45.166:8080(将 ip 换成自己的),如下图所示:

配置域名

为了方便起见,我们可以配置一个域名,假设域名为:squoosh.pieruo.com。

1、配置域名

推荐宝塔面板配置,如果是其他方式,大家可以自行百度一下。

2、解决错误

通过域名访问,会提示 Invalid Host header 错误。这是由于新版的 webpack-dev-server 出于安全考虑,默认会检查 hostname 参数,如果 hostname 不是配置内的,将中断访问。可以在 webpack.dev.config.js 中添加如下配置即可:

//webpack.dev.config.js
devServer: {
    disableHostCheck: true,
}

其中,webpack.dev.config.js 文件在根目录下。

3、访问

用浏览器访问 http://squoosh.pieruo.com(将域名换成自己的),如下图所示:

结束语

Squoosh 是一个非常不错的网片压缩程序,如果感兴趣的话,我们可以用它来搭建我们自己的专属图片压缩网站。Squoosh 搭建的步骤很简单,不过,在执行的过程中,可能会提示一些错误信息,可以通过升级 nodejs 和 npm 解决。

喜欢 0
奋楫笃行,臻于至善!

相关文章

亚马逊云服务器免费使用一年最新申请教程

亚马逊云提供了每月 750 个小时的免费云服务器 EC2 使用服务,这对于小白站长来说真的是太香了,可以申请一台  1GB 内存、30GB 硬盘的 云服务器实例,免费使用一年。2019 年就曾写过一篇...
阅读全文

使用 PHP 类库 PHP QR Code 生成二维码

PHP QR Code 是一个 PHP 二维码生成类库,利用它我们可以很轻松地生成二维码,本站近期新增了一个扫二维码在手机端查看的功能,所以,想顺便分享一下使用 PHP 类库 PHP QR Code ...
阅读全文

给网站添加随时间变化的动态问候语/欢迎词

我们在访问某些网站的时候,经常会在网站顶部看到动态问候语,比如早晨八点多显示 “早上好,今天又是美好的一天!”,这样做可以很好地提升网站用户体检,所以,今天为大家简单分享一下实现代码,分 JavaSc...
阅读全文

PHP 随机图片接口 API 实现方案及源码分享

之前分享过一篇关于在网站中生成随机句子的文章 WordPress 博客集成 Hitokoto 一言经典语句功能,今天为大家再分享一下生成随机图片的过程,实现方案跟之前的一言生成方法类似,可以快速实现在...
阅读全文

修改 Chevereto 网站标题并让标题支持翻译

Chevereto 是一款优秀的图床程序,我们可以使用它来托管图片。默认情况下,Chevereto 的标题是不支持翻译的,如果我们想实现标题翻译,例如,在简体中文环境下,首页标题展示为 “夏日阳光 -...
阅读全文

如何修改 Chevereto 网站底部的版权说明信息

Chevereto 图床程序页面底部的默认版权信息是 Powered by Chevereto,如果我们想自定义底部的版权信息,比如加上备案号,可以通过修改程序的源代码来实现。本文分享一种比较简单通用...
阅读全文

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注