大家好，好久沒有上來寫東西了沐悦。（主要是懶...
如題成洗，今天主要是講一下本猿最近拍婚紗照... 啊不，搭云家庭相冊（放婚紗照）的歷程藏否。 (Ha..ha..ha..
背景如下瓶殃，大家可以直接跳過此部分
不知道大家有沒有跟我一樣的感覺，到手的婚紗照(或是其他覺得挺有紀念意義的照片)數(shù)字底片不知道該如何存放秕岛。雖然聽過來人說以后基本不會再翻看了碌燕，但還是不忍心它就這樣放在網(wǎng)盤的最深處，總想把它分享給家人們......
是的继薛，我要想個辦法讓我的家人們都能夠方便的看到這些照片修壕，于是搭建私人家庭相冊的想法就在我腦中產生，因為我并不相信那些提供免費家庭相冊的小軟件可以很好的保護我的隱私遏考。
為了搭建這個家庭相冊慈鸠，我大概花了大半個月的業(yè)余時間。主要是以下幾個方面：
-
結合需求和力求“最小開支”的情況下的技術選型
-
功能設計灌具、編碼青团、調試與部署
-
最后，千萬不要忘了給站點加上備案號
開始正題之前咖楣，先看看最后的效果吧督笆。
手機上的效果：
啊，不要吐槽我诱贿，網(wǎng)站設計真的不是我的強項啊娃肿，能用就好，能用就好...
我們還是快點進入正題吧珠十。
技術選型
前端篇
要做技術選型料扰，就先要知道自己的需求。就目前而言焙蹭，我所了解到的實現(xiàn)方式無非就三種晒杈，微信小程序，網(wǎng)站 以及客戶端應用孔厉。為什么我要選網(wǎng)頁小應用的形式呢拯钻，主要有以下幾個原因：
- 我想要把它分享給我的家人們使用帖努，而我的父母文化水平并不高，智能手機也只是平時聊聊微信说庭，很難讓他們去下載軟件并注冊綁定等等然磷。
- 客戶端的開發(fā)成本大，需要考慮多平臺刊驴，而且更新也不太方便姿搜。
- 上架微信小程序是需要審核的，而且本身也是私人相冊捆憎，沒有必要上架到大家可見的舅柜。
- 現(xiàn)在的網(wǎng)頁有很多響應式前端框架，做好的話躲惰，在手機以及電腦上都能有比較好的用戶體驗致份，這是其他方式做不到的。
在決定要使用響應式框架來做前端頁面后础拨，我花了幾天時間好好看了下目前流行的一些響應式框架氮块， 最后選擇了 Bootstarp 。主要覺得它是大廠出的诡宗，文檔也比較全滔蝉，坑應該會比較少一些，而且提供的功能也能滿足我的需要塔沃。
后端篇
前端確定以后蝠引，我們就該考慮怎么設計后端來提供數(shù)據(jù)了。說起后端蛀柴，就不得不提一下我在 N 年前從阿里云入手的一個虛擬主機了螃概，價格僅 50 元每年， 這也是我一直續(xù)費至今的主要原因鸽疾，畢竟每個月交的話費也差不多了吊洼，沒辦法，誰讓咱窮呢制肮。不過既然價格這么美麗了冒窍，咱也就別想要啥自行車了，配置自然也是...（如下）
| 配置 | 配額 |
|---|---|
| 網(wǎng)頁空間 | 200 MB |
| 數(shù)據(jù)庫空間 | 20 MB |
| 單月流量 | 10 GB |
| 支持語言 | HTML , PHP4/5.2/5.3/5.4/5.5/5.6/7.0/7.1/7.2 , WAP |
| 操作系統(tǒng) | CentOS 5.4 64位 |
本著“節(jié)約光榮”的中華民族傳統(tǒng)美德弄企，是肯定不允許我放棄它的對不對超燃。我們也看到了区拳，它唯一支持的后端語言就只有 PHP 拘领，所以擺在我們面前就兩種選擇
- PHP 混合 HTML 做成一個 PHP 網(wǎng)站，好處是身份驗證簡單樱调，缺點是服務端壓力較大约素，而且我很不喜歡這種混合開發(fā)風格届良。
- PHP 僅做 API 接口，返回 Json 數(shù)據(jù)給客戶端圣猎，讓客戶端自己處理 UI 布局和渲染士葫，優(yōu)點是服務端比較簡單，不需要混合 HTML送悔，缺點是需要引入像 Token 這樣的身份驗證信息慢显。
作為一個倔強的程序猿，我當然要堅決反對自己不喜歡的方式欠啤，所以我毫不猶豫地選擇第二種方案荚藻。
前面也提到了，這種方式需要我們引入 Token 這樣的身份驗證機制洁段，不然豈不是誰都可以通過你的 API 拿到你的私有數(shù)據(jù)嗎应狱。
有不了解 Token 機制的小伙伴看這里，所謂的 Token 就是一個臨時的密碼令牌祠丝，用來跟服務器交換數(shù)據(jù)時疾呻，服務器鑒定請求者的身份。Token 是由服務器來生成的写半，客戶端需要在登錄時將用戶的正確密碼提交給服務器岸蜗，服務器就會返回一個 Token 令牌，客戶端拿到這個令牌后污朽，在以后每個向服務器的請求中散吵，都要帶上這個令牌，服務器只有在令牌校驗合格的情況下才會把正確的數(shù)據(jù)返回蟆肆。一般來說 Token 都是帶在請求的 Header 信息里面的矾睦，而且 Token 都是有效期的，有效期過了之后就需要客戶端重新請求新的炎功，否則都是鑒權失敗枚冗。
生成 Token 的方法有很多種，一般我們使用一個對稱加密技術來生成就可以了蛇损。所以我們自己實現(xiàn)一個自己專屬的 Token 生成和驗證的方案赁温，但既然都說了這是一個很普遍的需求，那現(xiàn)成的輪子肯定是有不少的淤齐。
JWT 就是其中我認為最廣泛的一個了（可能沒有之一）股囊，百度隨便一搜就能出來一大把講這個的文章。
下面是我隨便找來的一篇:
什么是 JWT -- JSON WEB TOKEN
大家只要切記!!私鑰!!不要暴露給服務器以外就好了更啄。
最后稚疹，還是非常建議大家給自己的服務端申請一個專用的域名的，畢竟萬網(wǎng)申請一個冷門的域名（如 .top）也才十幾塊每年祭务，甚至更低而已内狗，但帶來體驗上的提升絕對值了怪嫌。
存儲容器篇
為什么會有這一篇章呢？照片當做網(wǎng)站資源放在網(wǎng)站空間中不就好了嗎柳沙？
當然是的可以岩灭，但是打死我也不推薦這樣，為什么呢赂鲤。
第一噪径，網(wǎng)站空間是比較寶貴的，你看我那虛擬主機数初，只有可憐的 200 MB熄云，放個錘子照片都不夠。
第二妙真，放在網(wǎng)站空間缴允，訪問的話走的是你網(wǎng)站的流量，如果是大量照片珍德，非常容易就把你網(wǎng)站流量跑光了练般。
第三，你所有的照片不可能都是提供原尺寸訪問的锈候，有時候我們需要的僅僅只是縮略圖而已薄料，比如在列表模式下。你要自己實現(xiàn)縮略圖生成泵琳，估計又是不小的開銷摄职。
顯然，使用第三方容器服務才是我們的長久之計获列。其實我對目前市面上主流的容器服務也不是很了解谷市，知道的就只有 “七牛云” 和 “阿里云OSS” 』骱ⅲ可能還有一些其他服務商迫悠，但是對于大家選擇容器的這件事，我只有一個建議：免費的不一定是好的巩梢。
雖然我承認我的預算很緊張创泄，但我也不想冒著私人照片被泄漏的風險把它安心的放到三流的服務商那里。
到這括蝠，我就該安利一波我最后選擇的 阿里云OSS 了
首先是安全性有保證鞠抑，訪問的也是需要鑒權的，價格也不貴忌警，而且還提供了免費的圖片處理服務（每月0-10TB：免費）搁拙，還提供了各種平臺對應的 SDK ，方便開發(fā)使用。
想了解更多詳情請移步官網(wǎng)：
阿里云對象存儲 OSS
好了感混，到這里我們整個的技術方案就算是初步定制完成了。
- 用 Bootstarp 提供的 UI 組件和響應式框架處理用戶交互頁面礼烈，然后使用 AJAX 獲取數(shù)據(jù)到本地進行處理和渲染（也就是純網(wǎng)頁小應用）
- 用 PHP 提供應用需要的 API （身份驗證使用 JWT）
- 用阿里云中的“對象存儲 OSS”來存儲照片（PHP 可以通過對應的 SDK 獲取到數(shù)據(jù)）
確定方案前弧满，我們來計算一下最后的預算是否在本猿可承受的范圍內：
- 可運行 PHP 的阿里云虛擬主機窮人版，50 元/年
- 通過阿里云萬網(wǎng)申請的撿垃圾.top域名此熬，19 元/年
- 正兒八經的阿里云對象存儲 OSS 服務庭呜，40 GB, 9 元/年 + 訪問按量付費（閑時0.25元/GB，忙時0.50元/GB）
正常訪問的情況下一共算下來犀忱，一年 100 元不到募谎，而且由于照片是直接訪問 OSS 服務，并沒有網(wǎng)速限制阴汇。一想到這里数冬， 本猿一狠心一跺腳，原本用來加雞腿的錢只好貢獻出來了搀庶。
功能設計拐纱、編碼、調試與部署
為了實現(xiàn)我們偉大的目標哥倔，前面我們已經完成了技術選型秸架，接下來就差動手開工了。
功能設計
其實我需求的功能非常簡單咆蒿，保證安全性的情況下东抹，盡可能的讓操作變得簡單。所以我就沒有加入賬號體系沃测，讓其僅僅通過密碼就可以訪問缭黔，但訪問密碼修改后要讓之前通過驗證的密碼完全失效，也就是所有人都有重新輸入新密碼才行蒂破。
除了這個那就是家庭相冊的常規(guī)功能啦试浙，瀏覽列表，查看大圖寞蚌，播放視頻田巴。
編碼與調試
我是先編碼的前端部分，因為按之前的設計挟秤，這塊的內容最復雜壹哺，而且我對前端了解也最少，所以先把這部分做了艘刚，再根據(jù)前端的需要來調整后端的 API 設計要容易得多管宵。
關于 IDE，我用的是 WebStorm，因為覺得在 IDE 方面箩朴，JetBrains 是當之無愧的佼佼者岗喉，其出品的 IDE 都是不錯的精品（當然，這只是個人感想...
在我開始編碼的第一天炸庞，我就犯難了钱床，登錄頁就只有一個輸入訪問密碼的框框未免也太難看了些吧，中度強迫癥的我也實在忍不了埠居，堅持要搞動效查牌。
沒錯的，我做了所有程序猿都會做的事滥壕，度娘了一些炫酷的 H5 動畫源碼纸颜，并把它們整理了一下就塞進去我的頁面中。
這里再次感謝一下那些在互聯(lián)網(wǎng)中無私奉獻你們炫酷動畫代碼的猿們绎橘。
對于從來沒有用過 Bootstarp 的我胁孙，剩下的時間無非就是邊查文檔邊磕磕絆絆的把用戶交互頁面做完了。
最后就是用 Webpack 將成品打包啦称鳞。忘了說浊洞，包管理用的是 NPM。
Webpack 是什么?
本質上胡岔，webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(module bundler)法希。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)靶瘸，其中包含應用程序需要的每個模塊苫亦，然后將所有這些模塊打包成一個或多個 bundle。
官網(wǎng)介紹
NPM 又是什么怨咪？
NPM 是隨同 NodeJS 一起安裝的包管理工具屋剑。
官網(wǎng)介紹
前端做完，我就開始后端工作了诗眨，作為 JetBrains 死忠粉的我唉匾，依然選擇全家桶中的 PhpStorm 作為 IDE。
后端的工作非常簡單匠楚，提供幾個 API 接口巍膘，將數(shù)據(jù)通過 Json 的格式返回就可以了。上篇我們已經提到過芋簿，Token 的生成和驗證我使用了 JWT峡懈，在 Token 中為了方便我直接將用戶輸入的密碼存在了其中，這樣如果我在服務端更改了訪問密碼与斤，我就可以通過比較來把之前的 Token 識別為過期從而需要客戶端重新申請肪康。
剩下的數(shù)據(jù)部分就沒有什么好說的了荚恶，就是使用對象存儲 OSS 的 SDK 來訪問我們的容器，拿到圖片縮略圖或原圖查看地址磷支，最后封裝為 Json 格式返回谒撼。
值得一提的還有，PHP 的包管理工具雾狈，我們可以用 Composer廓潜，對象存儲 OSS 的 SDK 也支持通過這種方式安裝。
所以 Composer 是箍邮？
是 PHP 用來管理依賴（dependency）關系的工具。你可以在自己的項目中聲明所依賴的外部工具庫（libraries）叨叙，Composer 會幫你安裝這些依賴的庫文件锭弊。
官網(wǎng)介紹
部署
關于前端 HTML 和 后端 PHP 的代碼部署，沒有什么好說的擂错，直接使用 FTP 文件服務甩到服務器上就可以了味滞。
咱還是說說對象存儲 OSS 的部署吧，為了讓 PHP 安全的訪問 OSS 服務钮呀，我建議在阿里云的 RAM 訪問控制中單獨添加一個用戶剑鞍，并把權限配置為 “只讀訪問對象存儲服務 OSS”，這樣就能防止數(shù)據(jù)被意外刪除或篡改爽醋。
在對象存儲服務 OSS 的 SDK 中蚁署，它使用用戶 AccessKey 來訪問服務，而一個用戶可以創(chuàng)建多個 AccessKey蚂四，也可以隨時啟動或者禁用它光戈，也就是可以通過阿里云后臺隨時控制你的 OSS 的訪問權限。
想了解詳情遂赠？請移步:
阿里云 RAM 訪問控制
后記
再我完成這個站點后差不多一個月久妆，沒多久就收到了阿里云發(fā)了來的郵件，我以為只是正常慰問呢跷睦，沒想到里面竟然是讓我盡快將網(wǎng)站備案號放在主頁筷弦，否則將面臨 5000 元 的罰款，5000 元Ｒ种睢烂琴！，我才 100 不到搭的站點那不得虧到吐血蜕乡，嚇得我趕緊打開電腦一頓騷操作监右。（=.=
還有就是阿里云對象存儲 OSS 服務的按量收費的實際體驗到底怎么樣，反正我是年前充值了 10 塊异希，到現(xiàn)在還有 8 塊多的余額健盒。我覺得就正常訪問的情況下绒瘦，這個完全不用擔心這方面。
啊扣癣，終于碼完了惰帽。
以上就是我手擼“云”家庭相冊的過程啦，你如果心動的話父虑，也試試吧该酗。
