Shulou(Shulou.com)05/31 Report--

This article shows you how to use Serverless to quickly build a personal photo album website, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

In our daily life, we often take some videos, photos, etc., these files will take up more storage space. The editor will introduce a method: using ThumbsUp tools, combined with Serverless Framework's component to quickly build a personal photo album website to decompress the storage space.

Tool introduction:

Serverless Framework:Serverless Framework is a very popular serverless application framework in the industry, and developers can deploy a fully available Serverless application architecture without paying attention to the underlying resources.

ThumbsUp is a picture-viewing software that makes it easy for users to retrieve and manage pictures. It not only has a user interface that can quickly switch previews of pictures, but also has a quite direct and convenient operation mode for simple image processing of pictures.

The construction and deployment of the entire website takes only three steps: install and initialize the → configuration yml file → deployment.

Installation and initialization

First, make sure that the system contains the following environments:

Node.js (Node.js version should be no less than 8.6, Node.js 10.0 or above is recommended)

Exiftool

Graphic Magick

If the above applications are not installed, you can refer to the installation instructions.

1. Install Serverless Framework

$npm install-g serverless

two。 Install ThumbsUp

$npm install-g thumbsup

3. Initialize the project

$md photos$ thumbsup-input.\ photos\-output website

After successful initialization, you can see the project directory structure:

.├── photos └── website └── index.html configuration yml file

Under the project directory, create a serverless.yml file

Cd. > serverless.yml

Write the following to the yml file above:

# serverless.ymlmyWebsite: component: "@ serverless/tencent-website" inputs: code: src:. / website index: index.html error: index.html region: ap-guangzhou bucketName: my-bucket-1111

After the configuration is complete, the file directory is as follows:

.├── photos ├── website | └── index.html └── serverless.yml deployment

Deploy through the sls command, and you can add the-- debug parameter to view the information in the deployment process

If your account is not logged in or registered with Tencent Cloud, you can log in and register directly through the QR code in the command line scanned by Wechat.

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

Visit the website url output from the command line to view the photo wall website deployed using Serverless Framework.

Note: if you want to update the photos or videos and other files in the website, you can rerun thumbsup-- input.\ photos\-- output website to update the local page after updating the photos in the photos folder, and then run sls to update the website.

The above content is how to use Serverless to quickly build a personal photo album website, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.