用 Serverless 快速搭建個人相簿網站
日常生活中我們經常會拍攝一些視訊、照片等，這些檔案會佔用比較多的儲存空間。本文將介紹一種方法：利用 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
$ npm install -g serverless2. 安裝 ThumbsUp
$ npm install -g thumbsup3. 初始化專案
$ 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 Framework - 產品官網
- Serverless Framework - GitHub
大家也可以訪問：Serverless 中文技術社群，在 最佳實踐 欄目裡檢視更多關於 Serverless 應用的開發！
本文首發於 Serverless 中文網，如需轉載，請保留原作者和出處。