如何用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 部署的照片墙网站。

如何用Serverless快速搭建个人相册网站