日常生活中我們經常會拍攝一些視頻、照片等，這些文件會佔用比較多的存儲空間。本文將介紹一種方法：利用 ThumbsUp 工具，結合 Serverless Framework 的 component 快速搭建個人相冊網站，為存儲空間減壓。
工具介紹：
- Serverless Framework：Serverless Framework 是業界非常受歡迎的無服務器應用框架，開發者無需關心底層資源即可部署完整可用的 Serverless 應用架構。
- ThumbsUp 是一款讓使用者方便檢索及管理圖片的看圖軟件，不但具有可以快速的操作圖片切換預覽的使用介面，而且對於圖片的簡單影像處理也有相當直接、便捷的操作方式。
整個網站的搭建部署只需三步：安裝與初始化 → 配置 yml 文件 → 部署。
安裝與初始化
首先確保系統包含以下環境：
- Node.js (Node.js 版本需不低於 8.6，建議使用 Node.js 10.0 及以上版本)
- Exiftool
- 圖形 Magick
如未安裝上述應用程序，可以參考安裝說明。
1. 安裝 Serverless Framework
<code>$ npm install -g serverless/<code>
2. 安裝 ThumbsUp
<code>$ npm install -g thumbsup/<code>
3. 初始化項目
<code>$ mkdir photos$ thumbsup --input .\\photos\\ --output website/<code>
初始化成功後，可以看到項目目錄結構：
<code>.├── photos└── website └── index.html/<code>
配置 yml 文件
項目目錄下，創建 serverless.yml 文件
<code>touch serverless.yml/<code>
將以下內容寫入上述的 yml 文件裡：
<code># serverless.ymlmyWebsite: component: "@serverless/tencent-website" inputs: code: src: ./website index: index.html error: index.html region: ap-guangzhou bucketName: my-bucket-1111/<code>
配置完成後，文件目錄如下：
<code>.├── photos├── website| └── index.html└── serverless.yml/<code>
部署
通過 sls 命令進行部署，並可以添加 --debug 參數查看部署過程中的信息
如您的賬號未登陸或註冊騰訊雲，您可以直接通過微信掃描命令行中的二維碼進行授權登陸和註冊。
<code>sls --debug DEBUG ─ Resolving the template's static variables. DEBUG ─ Collecting components from the template. DEBUG ─ Downloading any NPM components found in the template. DEBUG ─ Analyzing the template's components dependencies. DEBUG ─ Creating the template's components graph. DEBUG ─ Syncing template state. DEBUG ─ Executing the template's components graph. DEBUG ─ Starting Website Component. DEBUG ─ Preparing website Tencent COS bucket my-bucket-thumbsup-1256386184. DEBUG ─ Deploying "my-bucket-thumbsup-1256386184" bucket in the "ap-guangzhou" region. DEBUG ─ "my-bucket-thumbsup-1256386184" bucket was successfully deployed to the "ap-guangzhou" region. DEBUG ─ Setting ACL for "my-bucket-thumbsup-1256386184" bucket in the "ap-guangzhou" region. DEBUG ─ Ensuring no CORS are set for "my-bucket-thumbsup-1256386184" bucket in the "ap-guangzhou" region. DEBUG ─ Ensuring no Tags are set for "my-bucket-thumbsup-1256386184" bucket in the "ap-guangzhou" region. DEBUG ─ Configuring bucket my-bucket-thumbsup-1256386184 for website hosting. DEBUG ─ Uploading website files from D:\\tencent-serverless\\thumbsup\\website to bucket my-bucket-thumbsup-1256386184. DEBUG ─ Starting upload to bucket my-bucket-thumbsup-1256386184 in region ap-guangzhou DEBUG ─ Uploading directory D:\\tencent-serverless\\thumbsup\\website to bucket my-bucket-thumbsup-1256386184 DEBUG ─ Website deployed successfully to URL: http://my-bucket-thumbsup-1256386184.cos-website.ap-guangzhou.myqcloud.com. myWebsite: url: http://my-bucket-thumbsup-1256386184.cos-website.ap-guangzhou.myqcloud.com env: 13s » myWebsite » done/<code>
訪問命令行輸出的 website url，即可查看即可查看使用 Serverless Framework 部署的照片牆網站。
最終效果
注：如果希望更新網站中的照片或者視頻等文件，可以在 photos 文件夾更新照片後，在本地重新運行 thumbsup --input .\\photos\\ --output website 更新本地頁面，再運行 sls即可更新網站。
小結
本文使用了非常流行的無服務器框架 Serverless Framework 來搭建照片牆網站，更多信息可以點擊「瞭解更多」進入官網學習。
分享到:
閱讀更多 Serverless 的文章
