本文首發於 Serverless 中文網，如需轉載，請保留原作者和出處。
日常生活中我們經常會拍攝一些視頻、照片等，這些文件會占用比較多的存儲空間。本文將介紹一種方法：利用 ThumbsUp 工具，結合 Serverless Framework 的 component 快速搭建個人相冊網站，為存儲空間減壓。
工具介紹：
-
Serverless Framework：Serverless Framework 是業界非常受歡迎的無服務器應用框架，開發者無需關心底層資源即可部署完整可用的 Serverless 應用架構。
-
ThumbsUp 是一款讓使用者方便檢索及管理圖片的看圖軟件，不但具有可以快速的操作圖片切換預覽的使用介面，而且對於圖片的簡單影像處理也有相當直接、便捷的操作方式。
整個網站的搭建部署只需三步：安裝與初始化 → 配置 yml 文件 → 部署。
安裝與初始化
首先確保系統包含以下環境：
如未安裝上述應用程序，可以參考安裝說明。
1. 安裝 Serverless Framework
$ npm install -g serverless
2. 安裝 ThumbsUp
$ npm install -g thumbsup
3. 初始化項目
$ md photos
$ thumbsup --input .\photos\ --output website
初始化成功后，可以看到項目目錄結構：
.
├── photos
└── website
└── index.html
配置 yml 文件
項目目錄下，創建 serverless.yml 文件
cd.> serverless.yml
將以下內容寫入上述的 yml 文件里：
# serverless.yml
myWebsite:
component: "@serverless/tencent-website"
inputs:
code:
src: ./website
index: index.html
error: index.html
region: ap-guangzhou
bucketName: my-bucket-1111
配置完成后，文件目錄如下：
.
├── photos
├── website
| └── index.html
└── serverless.yml
部署
通過 sls 命令進行部署，並可以添加 --debug 參數查看部署過程中的信息
如您的賬號未登陸或注冊騰訊雲，您可以直接通過微信掃描命令行中的二維碼進行授權登陸和注冊。
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
訪問命令行輸出的 website url，即可查看即可查看使用 Serverless Framework 部署的照片牆網站。
注：如果希望更新網站中的照片或者視頻等文件，可以在 photos 文件夾更新照片后，在本地重新運行
thumbsup --input .\photos\ --output website更新本地頁面，再運行sls即可更新網站。
小結
本文使用了非常流行的無服務器框架 Serverless Framework 來搭建照片牆網站，更多產品信息可以點擊進入 官網 學習。
參考：
大家也可以訪問：Serverless 中文技術社區，在 最佳實踐 欄目里查看更多關於 Serverless 應用的開發！