【玩转Lighthouse】快速搭建自己的3D照片画廊
原创【玩转Lighthouse】快速搭建自己的3D照片画廊
原创
前言
轻量服务器（ Lighthouse）是腾讯云新一代开箱即用、面向轻量应用场景的云服务器产品，目的是为了助力中小企业和开发者便捷高效的在云端构建网站、Web应用、小程序/小游戏、APP、电商应用、云盘/图床和各类开发测试环境。相比普通云服务器更加简单易用且更贴近应用，以套餐的形式整体售卖基础云资源，同时提供了高带宽流量包，将热门开源软件融合打包实现一键构建应用，提供极简上云体验。今天，我们就基于腾讯云的轻量服务器搭建一个属于自己的3D照片画廊。
正文
一、简单介绍轻量服务器
通过下面的链接进入腾讯云轻量服务器的产品介绍页面：https://cloud.tencent.com/product/lighthouse?from=10680，但是说到轻量服务器，一般人都会问：轻量服务器和传统的云服务器有什么不同呢？
总的来说，对比腾讯云自己的云服务器（CVM），轻量应用服务器（Lighthouse）更聚焦于中小企业、开发者、云计算入门者、学生等用户群体。使用方式上更加简单易用，精简了云服务器 CVM 的高阶概念及功能，提供高带宽流量包并以高性价比的套餐形式整体售卖基础云资源，将热门开源软件融合打包实现一键构建应用，更适合于支撑中小型网站、Web 应用、博客、论坛、小程序/小游戏、电商、云盘/图床、云端开发测试和学习环境等轻量级、低负载且访问量适中的应用场景。
下面通过一张表格详细了解一下二者的不同：
产品优势 | 轻量应用服务器 TencentCloud Lighthouse | 云服务器 CVM | |
|---|---|---|---|
更聚焦的用户群体 | 中小企业、开发者 | 面向所有上云用户 | |
更轻量的业务场景 | 轻量级应用场景，典型场景如下：企业官网、博客、论坛、资讯、商品展示等各类网站通用 Web 应用微信小程序、小游戏移动端 App、H5、公众号跨境电商店铺管理、独立站搭建云盘、图床服务云端开发测试环境、学习环境 | 架构复杂的应用场景，典型场景如下：高并发网站大型游戏复杂分布式集群应用视频编解码大数据分析机器学习、深度学习 | |
更优惠的计费模式 | 售卖方式 | 高性价比套餐式售卖，整体更优惠（计算/网络/存储资源优化组合） | 灵活选配计算/存储/网络资源，独立叠加计费 |
网络计费 | 高带宽流量包模式 | 固定带宽/流量用量 | |
更简单的使用体验 | 管理控制台 | 一站式整合，独立且简化的控制台 | 面向全业务，涉及 CVM、VPC、EIP 及安全组等细节较多 |
应用构建 | 开箱即用的优质官方应用镜像，预置应用系统所需的软件栈最优组合30s 一键构建应用，自动完成应用软件、依赖的运行环境安装和初始化配置 | 用户需自行搭建应用 | |
网络 | 自动创建网络资源，无需用户手动管理 | 用户自行创建、配置、管理网络 | |
二、购买服务器
在轻量服务器的产品介绍页面，点击“立即选购”，如下图所示：
之后会进入系统配置界面，随机选择一个地域，最好是服务器主要使用的地域，我选择了“上海”，之后勾选可用区随机分配，这里关于可用区的选择多说一句。通常情况下，直接选择随机分配可用区是完全没有问题的。同一地域的不同可用区之间的轻量应用服务器可以通过内网互相访问。但是，同地域内的不同可用区之间可以实现故障隔离，因此如果咱们自己的应用对于容灾能力有极高的要求，我们可以将不同轻量应用服务器实例部署在同一地域的不同可用区内，但需要注意的是不同实例跨可用区通信的时延较同一可用区内通信会有一定增加。
接下来，我们选择“官方镜像”-“应用镜像”，其中有很多已经准备好的模版，比如宝塔、SRS、房间服务、Discuz！Q、WordPress等，选择“WordPress 5.7.1 社区版”，如下图所示：
这里先简单介绍一下WordPress，它是全球最流行的开源的博客和内容管理网站的建站平台，具备使用简单、功能强大、灵活可扩展的特点，提供丰富的主题插件，您可以使用它搭建博客、企业官网、电商、论坛等各类网站。
然后，选择“通用型套餐”——“50元/月”——“1个月”，勾选同意协议，点击“立即购买”，如下图所示：
在新页面选择“提交订单”，使用支付宝或者微信支付即可。
三、服务器管理
3.1 概要面板
购买完成后，我们在账号的控制台就可以看到对应的机器，通过概要面板，我们可以看到服务器的CPU利用率、内存使用量、公网带宽使用情况和系统磁盘IO情况，具体如下图所示：
除此之外，还可以看到对应服务器的资源使用情况，比如流量包的剩余量、系统盘的剩余量、网络信息（公网IP和私网IP）、系统镜像的信息（镜像名称和类型、操作系统）、预装的应用软件（本机安装了WordPress、Nginx、PHP、MariaDB、宝塔），具体如下图所示：
3.2 应用管理面板
应用管理面板中包了系统软件和应用软件的基本信息，比如系统软件是 WordPress 5.7.1 社区版的系统镜像，应用软件包括 WordPress、Nginx、PHP、MariaDB、宝塔以及它们的安装路径、配置文件地址和访问地址（IP和端口）。
3.3 云硬盘面板
云硬盘面板的内容比较简单，我们一般也只关心硬盘类型和容量两个参数。
3.4 防火墙面板
防火墙面板可以简单理解成端口开放管理模块，可以对进入和流出服务器的流量进行控制。
3.5 监控面板
服务器的监控面板应该最常用的面板之一，很多时候我们都需要关注服务器的运行情况。监控面板可以通过实时的形式或者时间段的形式查看CPU、内存、内外网流量、磁盘IO的运行情况。
3.6 执行命令面板
在执行命令面板执行命令时需要依赖自动化助手TAT，自动化助手TAT是高效安全的云服务器运维部署工具。免登录，免开放端口，即可直接管理实例，快速执行操作系统脚本命令。
四、代码编写
主文件 index.html，关键代码：
<body>
<canvas id="canvas">你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。</canvas>
<script type="text/javascript">
var imgFolder = "images/"
var imgArr = [imgFolder+'1.jpg',imgFolder+'2.jpg',imgFolder+'3.jpg',imgFolder+'/4.jpg',
imgFolder+'5.jpg',imgFolder+'6.jpg',imgFolder+'7.jpg',imgFolder+'8.jpg',
imgFolder+'9.jpg',imgFolder+'10.jpg',imgFolder+'11.jpg',imgFolder+'12.jpg'];
</script>
<script type="text/javascript" src="js/gedoot.js"></script>
<script type="text/javascript" src="js/photo.js"></script>
</body>上面的图片文件都可以替换成自己的，都保存在目录 images 中。
响应鼠标滑动效果代码：
ge1doot.Pointer = function (setup) {
ge1doot.pointer = this;
var self = this;
var body = document.body;
var html = document.documentElement;
this.setup = setup;
this.screen = ge1doot.screen;
this.elem = this.screen.elem;
this.X = 0;
this.Y = 0;
this.Xi = 0;
this.Yi = 0;
this.bXi = 0;
this.bYi = 0;
this.Xr = 0;
this.Yr = 0;
this.startX = 0;
this.startY = 0;
this.scale = 0;
this.wheelDelta = 0;
this.isDraging = false;
this.hasMoved = false;
this.isDown = false;
this.evt = false;
var sX = 0;
var sY = 0;
// prevent default behavior
if (setup.tap) this.elem.onclick = function () { return false; }
if (!setup.documentMove) {
document.ontouchmove = function(e) { e.preventDefault(); }
}
document.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
if (typeof this.elem.style.msTouchAction != 'undefined') this.elem.style.msTouchAction = "none";
this.pointerDown = function (e) {
if (!this.isDown) {
if (this.elem.setCapture) this.elem.setCapture();
this.isDraging = false;
this.hasMoved = false;
this.isDown = true;
this.evt = e;
this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
this.X = sX = this.Xr - this.screen.left;
this.Y = sY = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
this.setup.down && this.setup.down(e);
}
}
this.pointerMove = function(e) {
this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
this.X = this.Xr - this.screen.left;
this.Y = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
if (this.isDown) {
this.Xi = this.bXi + (this.X - sX);
this.Yi = this.bYi - (this.Y - sY);
}
if (Math.abs(this.X - sX) > 11 || Math.abs(this.Y - sY) > 11) {
this.hasMoved = true;
if (this.isDown) {
if (!this.isDraging) {
this.startX = sX;
this.startY = sY;
this.setup.startDrag && this.setup.startDrag(e);
this.isDraging = true;
} else {
this.setup.drag && this.setup.drag(e);
}
} else {
sX = this.X;
sY = this.Y;
}
}
this.setup.move && this.setup.move(e);
}
this.pointerUp = function(e) {
this.bXi = this.Xi;
this.bYi = this.Yi;
if (!this.hasMoved) {
this.X = sX;
this.Y = sY;
this.setup.tap && this.setup.tap(this.evt);
} else {
this.setup.up && this.setup.up(this.evt);
}
this.isDraging = false;
this.isDown = false;
this.hasMoved = false;
this.setup.up && this.setup.up(this.evt);
if (this.elem.releaseCapture) this.elem.releaseCapture();
this.evt = false;
}
this.pointerCancel = function(e) {
if (this.elem.releaseCapture) this.elem.releaseCapture();
this.isDraging = false;
this.hasMoved = false;
this.isDown = false;
this.bXi = this.Xi;
this.bYi = this.Yi;
sX = 0;
sY = 0;
}
if ('ontouchstart' in window) {
this.elem.ontouchstart = function (e) { self.pointerDown(e); return false; }
this.elem.ontouchmove = function (e) { self.pointerMove(e); return false; }
this.elem.ontouchend = function (e) { self.pointerUp(e); return false; }
this.elem.ontouchcancel = function (e) { self.pointerCancel(e); return false;}
}
document.addEventListener("mousedown", function (e) {
if (
e.target === self.elem ||
(e.target.parentNode && e.target.parentNode === self.elem) ||
(e.target.parentNode.parentNode && e.target.parentNode.parentNode === self.elem)
) {
if (typeof e.stopPropagation != "undefined") {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
e.preventDefault();
self.pointerDown(e);
}
}, false);
document.addEventListener("mousemove", function (e) { self.pointerMove(e); }, false);
document.addEventListener("mouseup", function (e) {
self.pointerUp(e);
}, false);
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
if (e.scale > 1) self.scale = 0.1; else if (e.scale < 1) self.scale = -0.1; else self.scale = 0;
self.setup.scale && self.setup.scale(e);
return false;
}, false);
if (window.navigator.msPointerEnabled) {
var nContact = 0;
var myGesture = new MSGesture();
myGesture.target = this.elem;
this.elem.addEventListener("MSPointerDown", function(e) {
if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
myGesture.addPointer(e.pointerId);
nContact++;
}
}, false);
this.elem.addEventListener("MSPointerOut", function(e) {
if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
nContact--;
}
}, false);
this.elem.addEventListener("MSGestureHold", function(e) {
e.preventDefault();
}, false);
this.elem.addEventListener("MSGestureChange", function(e) {
if (nContact > 1) {
if (e.preventDefault) e.preventDefault();
self.scale = e.velocityExpansion;
self.setup.scale && self.setup.scale(e);
}
return false;
}, false);
}
if (window.addEventListener) this.elem.addEventListener('DOMMouseScroll', function(e) {
if (e.preventDefault) e.preventDefault();
self.wheelDelta = e.detail * 10;
self.setup.wheel && self.setup.wheel(e);
return false;
}, false);
this.elem.onmousewheel = function () {
self.wheelDelta = -event.wheelDelta * .25;
self.setup.wheel && self.setup.wheel(event);
return false;
}
}代码比较多就不一一介绍了，感兴趣的小伙伴可以留言和我要源码。
五、效果展示
代码打包后，上传到轻量服务器，放到目录 /usr/local/lighthouse/softwares/wordpress 中，然后我们访问 http://IP/index.html 地址就可以看到下图的效果：
六、配置域名和证书
看到画廊的3D效果后，可能有小伙伴会问：能不能实现使用域名和https的访问效果呢？答案是可以的。我们需要申请一个自己满意的域名和一个ssl证书，并进行二者的绑定。
具体步骤可以参考下图：
后面的流程也非常简单，就不深入介绍了。好了，关于在腾讯云轻量服务器上搭建自己的3D照片画廊就介绍完了。是不是非常有意思，感兴趣的话，就自己动手搞一波儿吧！
作者简介：😄大家好，我是 Data-Mining（liuzhen007），是一位典型的音视频技术爱好者，前后就职于传统广电巨头和音视频互联网公司，具有丰富的音视频直播和点播相关经验，对 WebRTC、FFmpeg 和 Electron 有非常深入的了解。同时也是 CSDN 博客专家、华为云享专家（共创编辑）、InfoQ 签约作者
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。