大家好，好久没有上来写东西了。（主要是懒...

如题，今天主要是讲一下本猿最近拍婚纱照... 啊不，搭云家庭相册（放婚纱照）的历程。 (Ha..ha..ha..

背景如下，大家可以直接跳过此部分

不知道大家有没有跟我一样的感觉，到手的婚纱照(或是其他觉得挺有纪念意义的照片)数字底片不知道该如何存放。虽然听过来人说以后基本不会再翻看了，但还是不忍心它就这样放在网盘的最深处，总想把它分享给家人们......
是的，我要想个办法让我的家人们都能够方便的看到这些照片，于是搭建私人家庭相册的想法就在我脑中产生，因为我并不相信那些提供免费家庭相册的小软件可以很好的保护我的隐私。

为了搭建这个家庭相册，我大概花了大半个月的业余时间。主要是以下几个方面：

• 结合需求和力求“最小开支”的情况下的技术选型

• 功能设计、编码、调试与部署

• 最后，千万不要忘了给站点加上备案号

开始正题之前，先看看最后的效果吧。

首页-密码验证.jpg

主页-照片墙.jpg

大图模式.jpg

视频播放.jpg

手机上的效果：

首页.jpg

主页.jpg

啊，不要吐槽我，网站设计真的不是我的强项啊，能用就好，能用就好...
我们还是快点进入正题吧。

技术选型

前端篇

要做技术选型，就先要知道自己的需求。就目前而言，我所了解到的实现方式无非就三种，微信小程序，网站 以及客户端应用。为什么我要选网页小应用的形式呢，主要有以下几个原因：

1. 我想要把它分享给我的家人们使用，而我的父母文化水平并不高，智能手机也只是平时聊聊微信，很难让他们去下载软件并注册绑定等等。
2. 客户端的开发成本大，需要考虑多平台，而且更新也不太方便。
3. 上架微信小程序是需要审核的，而且本身也是私人相册，没有必要上架到大家可见的。
4. 现在的网页有很多响应式前端框架，做好的话，在手机以及电脑上都能有比较好的用户体验，这是其他方式做不到的。

在决定要使用响应式框架来做前端页面后，我花了几天时间好好看了下目前流行的一些响应式框架， 最后选择了 Bootstarp 。主要觉得它是大厂出的，文档也比较全，坑应该会比较少一些，而且提供的功能也能满足我的需要。

后端篇

前端确定以后，我们就该考虑怎么设计后端来提供数据了。说起后端，就不得不提一下我在 N 年前从阿里云入手的一个虚拟主机了，价格仅 50 元每年， 这也是我一直续费至今的主要原因，毕竟每个月交的话费也差不多了，没办法，谁让咱穷呢。不过既然价格这么美丽了，咱也就别想要啥自行车了，配置自然也是...（如下）

本着“节约光荣”的中华民族传统美德，是肯定不允许我放弃它的对不对。我们也看到了，它唯一支持的后端语言就只有 PHP ，所以摆在我们面前就两种选择

1. PHP 混合 HTML 做成一个 PHP 网站，好处是身份验证简单，缺点是服务端压力较大，而且我很不喜欢这种混合开发风格。
2. PHP 仅做 API 接口，返回 Json 数据给客户端，让客户端自己处理 UI 布局和渲染，优点是服务端比较简单，不需要混合 HTML，缺点是需要引入像 Token 这样的身份验证信息。

作为一个倔强的程序猿，我当然要坚决反对自己不喜欢的方式，所以我毫不犹豫地选择第二种方案。
前面也提到了，这种方式需要我们引入 Token 这样的身份验证机制，不然岂不是谁都可以通过你的 API 拿到你的私有数据吗。

有不了解 Token 机制的小伙伴看这里，所谓的 Token 就是一个临时的密码令牌，用来跟服务器交换数据时，服务器鉴定请求者的身份。Token 是由服务器来生成的，客户端需要在登录时将用户的正确密码提交给服务器，服务器就会返回一个 Token 令牌，客户端拿到这个令牌后，在以后每个向服务器的请求中，都要带上这个令牌，服务器只有在令牌校验合格的情况下才会把正确的数据返回。一般来说 Token 都是带在请求的 Header 信息里面的，而且 Token 都是有效期的，有效期过了之后就需要客户端重新请求新的，否则都是鉴权失败。

生成 Token 的方法有很多种，一般我们使用一个对称加密技术来生成就可以了。所以我们自己实现一个自己专属的 Token 生成和验证的方案，但既然都说了这是一个很普遍的需求，那现成的轮子肯定是有不少的。
JWT 就是其中我认为最广泛的一个了（可能没有之一），百度随便一搜就能出来一大把讲这个的文章。

下面是我随便找来的一篇:
什么是 JWT -- JSON WEB TOKEN

大家只要切记!!私钥!!不要暴露给服务器以外就好了。
最后，还是非常建议大家给自己的服务端申请一个专用的域名的，毕竟万网申请一个冷门的域名（如 .top）也才十几块每年，甚至更低而已，但带来体验上的提升绝对值了。

存储容器篇

为什么会有这一篇章呢？照片当做网站资源放在网站空间中不就好了吗？
当然是的可以，但是打死我也不推荐这样，为什么呢。
第一，网站空间是比较宝贵的，你看我那虚拟主机，只有可怜的 200 MB，放个锤子照片都不够。
第二，放在网站空间，访问的话走的是你网站的流量，如果是大量照片，非常容易就把你网站流量跑光了。
第三，你所有的照片不可能都是提供原尺寸访问的，有时候我们需要的仅仅只是缩略图而已，比如在列表模式下。你要自己实现缩略图生成，估计又是不小的开销。

显然，使用第三方容器服务才是我们的长久之计。其实我对目前市面上主流的容器服务也不是很了解，知道的就只有 “七牛云” 和 “阿里云OSS” 。可能还有一些其他服务商，但是对于大家选择容器的这件事，我只有一个建议：免费的不一定是好的。
虽然我承认我的预算很紧张，但我也不想冒着私人照片被泄漏的风险把它安心的放到三流的服务商那里。
到这，我就该安利一波我最后选择的 阿里云OSS 了
首先是安全性有保证，访问的也是需要鉴权的，价格也不贵，而且还提供了免费的图片处理服务（每月0-10TB：免费），还提供了各种平台对应的 SDK ，方便开发使用。

想了解更多详情请移步官网：
阿里云对象存储 OSS

好了，到这里我们整个的技术方案就算是初步定制完成了。

• 用 Bootstarp 提供的 UI 组件和响应式框架处理用户交互页面，然后使用 AJAX 获取数据到本地进行处理和渲染（也就是纯网页小应用）
• 用 PHP 提供应用需要的 API （身份验证使用 JWT）
• 用阿里云中的“对象存储 OSS”来存储照片（PHP 可以通过对应的 SDK 获取到数据）

确定方案前，我们来计算一下最后的预算是否在本猿可承受的范围内：

1. 可运行 PHP 的阿里云虚拟主机穷人版，50 元/年
2. 通过阿里云万网申请的捡垃圾.top域名，19 元/年
3. 正儿八经的阿里云对象存储 OSS 服务，40 GB, 9 元/年 + 访问按量付费（闲时0.25元/GB，忙时0.50元/GB）

正常访问的情况下一共算下来，一年 100 元不到，而且由于照片是直接访问 OSS 服务，并没有网速限制。一想到这里， 本猿一狠心一跺脚，原本用来加鸡腿的钱只好贡献出来了。

功能设计、编码、调试与部署

为了实现我们伟大的目标，前面我们已经完成了技术选型，接下来就差动手开工了。

功能设计

其实我需求的功能非常简单，保证安全性的情况下，尽可能的让操作变得简单。所以我就没有加入账号体系，让其仅仅通过密码就可以访问，但访问密码修改后要让之前通过验证的密码完全失效，也就是所有人都有重新输入新密码才行。
除了这个那就是家庭相册的常规功能啦，浏览列表，查看大图，播放视频。

编码与调试

我是先编码的前端部分，因为按之前的设计，这块的内容最复杂，而且我对前端了解也最少，所以先把这部分做了，再根据前端的需要来调整后端的 API 设计要容易得多。
关于 IDE，我用的是 WebStorm，因为觉得在 IDE 方面，JetBrains 是当之无愧的佼佼者，其出品的 IDE 都是不错的精品（当然，这只是个人感想...

在我开始编码的第一天，我就犯难了，登录页就只有一个输入访问密码的框框未免也太难看了些吧，中度强迫症的我也实在忍不了，坚持要搞动效。
没错的，我做了所有程序猿都会做的事，度娘了一些炫酷的 H5 动画源码，并把它们整理了一下就塞进去我的页面中。

这里再次感谢一下那些在互联网中无私奉献你们炫酷动画代码的猿们。

对于从来没有用过 Bootstarp 的我，剩下的时间无非就是边查文档边磕磕绊绊的把用户交互页面做完了。
最后就是用 Webpack 将成品打包啦。忘了说，包管理用的是 NPM。

Webpack 是什么?
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
官网介绍

NPM 又是什么？
NPM 是随同 NodeJS 一起安装的包管理工具。
官网介绍

前端做完，我就开始后端工作了，作为 JetBrains 死忠粉的我，依然选择全家桶中的 PhpStorm 作为 IDE。
后端的工作非常简单，提供几个 API 接口，将数据通过 Json 的格式返回就可以了。上篇我们已经提到过，Token 的生成和验证我使用了 JWT，在 Token 中为了方便我直接将用户输入的密码存在了其中，这样如果我在服务端更改了访问密码，我就可以通过比较来把之前的 Token 识别为过期从而需要客户端重新申请。
剩下的数据部分就没有什么好说的了，就是使用对象存储 OSS 的 SDK 来访问我们的容器，拿到图片缩略图或原图查看地址，最后封装为 Json 格式返回。

值得一提的还有，PHP 的包管理工具，我们可以用 Composer，对象存储 OSS 的 SDK 也支持通过这种方式安装。

所以 Composer 是？
是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。
官网介绍

部署

关于前端 HTML 和 后端 PHP 的代码部署，没有什么好说的，直接使用 FTP 文件服务甩到服务器上就可以了。
咱还是说说对象存储 OSS 的部署吧，为了让 PHP 安全的访问 OSS 服务，我建议在阿里云的 RAM 访问控制中单独添加一个用户，并把权限配置为 “只读访问对象存储服务 OSS”，这样就能防止数据被意外删除或篡改。
在对象存储服务 OSS 的 SDK 中，它使用用户 AccessKey 来访问服务，而一个用户可以创建多个 AccessKey，也可以随时启动或者禁用它，也就是可以通过阿里云后台随时控制你的 OSS 的访问权限。

想了解详情？请移步:
阿里云 RAM 访问控制

后记

再我完成这个站点后差不多一个月，没多久就收到了阿里云发了来的邮件，我以为只是正常慰问呢，没想到里面竟然是让我尽快将网站备案号放在主页，否则将面临 5000 元 的罚款，5000 元！！，我才 100 不到搭的站点那不得亏到吐血，吓得我赶紧打开电脑一顿骚操作。（=.=

还有就是阿里云对象存储 OSS 服务的按量收费的实际体验到底怎么样，反正我是年前充值了 10 块，到现在还有 8 块多的余额。我觉得就正常访问的情况下，这个完全不用担心这方面。

啊，终于码完了。
以上就是我手撸“云”家庭相册的过程啦，你如果心动的话，也试试吧。