如何用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快速搭建個人相冊網站，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。