本文首发于 Serverless 中文网,如需转载,请保留原作者和出处。

日常生活中我们经常会拍摄一些视频、照片等,这些文件会占用比较多的存储空间。本文将介绍一种方法:利用 ThumbsUp 工具,结合 Serverless Framework 的 component 快速搭建个人相册网站,为存储空间减压。

工具介绍:

  • Serverless Framework:Serverless Framework 是业界非常受欢迎的无服务器应用框架,开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。

  • ThumbsUp 是一款让使用者方便检索及管理图片的看图软件,不但具有可以快速的操作图片切换预览的使用介面,而且对于图片的简单影像处理也有相当直接、便捷的操作方式。

整个网站的搭建部署只需三步:安装与初始化 → 配置 yml 文件 → 部署。

安装与初始化

首先确保系统包含以下环境:

如未安装上述应用程序,可以参考安装说明

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 中文技术社区,在 最佳实践 栏目里查看更多关于 Serverless 应用的开发!

用 Serverless 快速搭建个人相册网站的更多相关文章

  1. Docker: 快速搭建LNMP网站平台

    快速搭建LNMP网站平台 步骤: 1.自定义网络(这里建立一个自定义网络,名字叫 lnmp, 让LNMP网站的服务,都加入这个自定义网络)docker network create lnmp2.创建M ...

  2. 【华为云实战开发】8.如何快速搭建C#网站并实现持续集成?【华为云技术分享】

    1 概述 1.1 文章目的 本文通过一个实例介绍如何使用软件开发服务DevCloud完成一个C#Web项目的开发. 1.2 项目详情 1. 项目名称:超级冷笑话网站 2. 项目简介:一个Web网站,包 ...

  3. Linux下快速搭建测试网站DVWA

    DVWA(Damn Vulnerable Web App)是一个基于PHP/MySql搭建的Web应用程序,旨在为安全专业人员测试自己的专业技能和工具提供合法的 环境,帮助Web开发者更好的理解Web ...

  4. 12、利用docker快速搭建Wordpress网站

    一.准备工作 结构图: 用户访问页面,Nginx将请求进行转发,如果请求的是php页面,则通过FastCGI转发给后端php进行处理:如果非php页面,则直接返回静态页面. 关键点: mysql.ph ...

  5. 使用python快速搭建本地网站

    如果你急需一个简单的Web Server,但你又不想去下载并安装那些复杂的HTTP服务程序,比如:Apache,ISS,Nodejs等.那么, Python 可能帮助你.使用Python可以完成一个简 ...

  6. USBWebServer 中文便携版 快速搭建 PHP/MySQL 网站服务器环境

    如果你是一位 WEB 开发者,或正在学习网页编程,你一定会发现,每到一台新电脑上想要在本地调试测试/运行网站代码都得搭建配置一遍 WAMP (Win.Apache.PHP.MySQL) 环境简直烦透了 ...

  7. 使用CGIHTTPServer搭建简单网站

    目录 一.前提准备 二.搭建web网站 如何快速搭建web网站?这个问题对于我这样的小白来说简直就是一脸懵逼毫无头绪.在学习python的过程接触到了 CGI 编程,至于CGI是什么?怎么运行的?这我 ...

  8. 利用Columnal网格系统快速搭建网站的基本布局结构

    1.下面是一些对响应式设计提供了不同程度支持的CSS框架: (1)Semantic(http://semantic.gs); (2)Skeleton(http://getskeleton.com); ...

  9. golang开源项目qor快速搭建网站qor-example运行实践

    最近想找几个基于Go语言开发的简单的开源项目学习下,分享给大家,github上有心人的收集的awesome-go项目集锦:github地址 发现一个Qor项目: Qor 是基于 Golang 开发的的 ...

随机推荐

  1. ITA 15.5 Optimal binary search trees

    p400 页最后一段 When j >= i , we need to select a root kr from among ki ... kj and then make an optima ...

  2. 【原生JS】层叠轮播图

    又是轮播?没错,换个样式玩轮播. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. uni-app学习记录06-Vuex简单使用

    import Vue from 'vue' // 这里引入vuex import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Stor ...

  4. java方法里的属性

    访问控制符:访问控制符限定方法的可见范围,或者说是方法被调用的范围.方法的访问控制符有四种,按可见范围从大到小依次是:public.protected,无访问控制符,private.其中无访问控制符不 ...

  5. H3C 寻找邻居

  6. H3C IPv6地址自动配置

  7. 学习vue就是那么简单,一个简单的案例

    vue是前端兴起的一个javascript库,相信大家都使用过jQuery,虽然vue和jQuery没有可比性,但从熟悉的角度去理解新的东西或许会容易接受一些,有时候由于思想和模式的转变会带来阵痛,但 ...

  8. 2019-8-31-C#-获取-PC-序列号

    title author date CreateTime categories C# 获取 PC 序列号 lindexi 2019-08-31 16:55:58 +0800 2018-7-30 10: ...

  9. jQuery 工具类函数-浏览器信息

    在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browser.mozilla为true,表 ...

  10. es6笔记 day3---对象简介语法以及对象新增

    以前的老写法↓ 新写法来了↓ 提示:千万不要手贱,在里面去用箭头函数!!! -------------------------------------------------------------- ...