用 Serverless 快速搭建我的相冊網站

本文首發於 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 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 Framework - 產品官網
• Serverless Framework - GitHub

你們也能夠訪問：Serverless 中文技術社區，在 最佳實踐 欄目裏查看更多關於 Serverless 應用的開發！