文档章节

前端为什么要关注 Serverless?

腾讯云Serverless
 腾讯云Serverless
发布于 03/20 16:54
字数 1697
阅读 665
收藏 1

Serverless 的概念或应用场景我们以前讲过很多,这里不再冗述。概括性地讲 —— Serverless 的内涵就是对全部底层资源和运维工作的封装,让开发者更专注于业务逻辑。(本文作者 @Aceyclee

完备的基础性文章推荐阅读这两篇:

本文尝试从出圈的角度,以更接地气的方式聊聊 Serverless。

先讲个故事,疫情期间在家办公,大家肯定没少做饭,自己做饭才体会到家务不易,你需要:买菜买锅、处理食材、煎炒蒸煮、最后洗碗。

听起来是不是还挺像软件开发?你需要有云服务器、后台开发、前端开发、还有运维。

你想着,要是我能只翻两下铲子,然后就能吃饭那该多好。

巧了,有一些商家就提供了这种服务,帮你准备好了锅、洗干净的食材、专业的厨师指点,你只要进去翻两下铲子,就能煮一顿精美的饭食!而且不用洗碗。

对应到软件开发,开发者只需要关注业务逻辑(炒菜),而底层资源和运维工作(锅碗瓢盆、食材处理)都不用再操心。

终于到了正式复工的时间,你不用再自己做饭,新买的厨具就闲置了。你回想起昨天在商圈里的美好体验,家里的厨具要是也在能用的时候付费,不用不收费多好啊。

嘿嘿,Serverless 亦如此,按水电般计费,当部署在其上的函数运行时才收费。

所以回到题目中来,Serverless 本身是云计算相关技术,并非前端技术,为何前端要关注 Serverless 呢?

答案很简单 —— 解放生产力。

你的厨房里已经准备好了所有厨具和处理好的食材,你现在只需要关心火候认真炒菜,成为美食博主指日可待。也就是文首所说的 —— 开发者能更专注于业务逻辑,其他的底层资源和运维工作已经全部封装好了。


▎Talk is cheap, show you the code.

先给大家展示一个基于 Serverless 构建 docsify 文档的 demo

这个三分钟的 demo,不仅完成了 docsify 发布代码的上传,还包括了腾讯云对象存储 COS 资源的申请和配置。而这仅仅是我第一次使用 Serverless 来构建应用,可见它上手性之高。

原文链接:《三分钟入坑指北 Docsify + Serverless Framework 快速创建个人博客》

**再进一步,我们演示个 Fullstack Application。**该项目借助社区现有的 @serverless/tencent-express@serverless/tencent-website 组件来完成。

下面是一张简单的组件依赖图:

Component Dependency Structure

在开始所有步骤前,需执行 npm install -g serverless 命令,全局安装 serverless cli

1. 准备

新建项目目录 fullstack-application-vue,在该项目目录下新增 apidashboard 目录。然后新增 serverless.yml.env 配置文件,项目目录结构如下:

├── README.md 		// 项目说明文档
├── api					  // Restful api 后端服务
├── dashboard			// 前端页面
├── .env					// 腾讯云相关鉴权参数:TENCENT_APP_ID,TENCENT_SECRET_ID,TENCENT_SECRET_KEY
└── serverless.yml	// serverless 文件

2. 后端服务开发

进入目录 api,新增 app.js 文件,编写 express 服务代码,这里先新增一个路由 /,并返回当前服务器时间:

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())
app.get('/', (req, res) => {
  res.send(JSON.stringfy({ message: `Server time: ${new Date().toString()}` }))
})
module.exports = app

3. 前端页面开发

本案例使用的是 Vue.js + Parcel 的前端模板,当然你可以使用任何前端项目脚手架,比如 Vue.js 官方推荐的 Vue CLI 生成的项目。进入 dashboard 目录,编写入口文件 src/index.js:

// 这里初始是没有 env.js 模块的,第一次部署后会自动生成
require('../env')

const Vue = require('vue')

module.exports = new Vue({
  el: '#root',
  data: {
    message: 'Click me!',
    isVisible: true,
  },
  methods: {
    async queryServer() {
      const response = await fetch(window.env.apiUrl)
      const result = await response.json()
      this.message = result.message
    },
  },
})

3. 配置

前后端代码都准备好了,再简单配置下 serverless.yml 文件了:

name: fullstack-application-vue

frontend:
  component: '@serverless/tencent-website'
  # inputs 为 @serverless/tencent-website 组件的输入
  # 具体配置说明参考:https://github.com/serverless-components/tencent-website/blob/master/docs/configure.md
  inputs:
    code:
      src: dist
      root: frontend
      hook: npm run build
    env:
      # 下面的 API服务部署后,获取对应的 api 请求路径
      apiUrl: ${api.url}

api:
  component: '@serverless/tencent-express'
  # inputs 为 @serverless/tencent-express 组件的输入
  # 具体配置说明参考:https://github.com/serverless-components/tencent-express/blob/master/docs/configure.md
  inputs:
    code: ./api
    functionName: fullstack-vue-api
    apigatewayConf:
      protocol: https

4. 部署

部署时,只需要运行 serverless 命令就行,当然如果你需要查看部署中的 DEBUG 信息,还需要加上 --debug 参数,如下:

$ serverless
# or
$ serverless --debug

最后终端会 balabalabala~, 看到绿色的done就行了。

体验:在线 Demo

既然是全栈,怎么少得了数据库的读写呢?

读者可移步作者原文继续阅读:《基于 Serverless Component 的全栈解决方案》

从这两个小项目中已然得解 —— Serverless 的内涵就是对全部底层资源和运维工作的封装,让开发者更专注于业务逻辑。


▎写在后面

题主在问题描述中的思考很有价值,其实 Serverless 的确不是一个前端的概念,甚至都不是为了解决前端的问题而出现的,它其实就是云计算发展的必经过程。

就好比,底层语言的发展趋势肯定是高级语言。而高级语言肯定也会封装起底层的硬件,让程序员无需关心硬件的状态,专注编码。

十年前编程还是比较难的高级学科,如今小学已经开展编程课程。其实就是因为程序语言的发展,让编程变得更加友好。

同样地,Serverless 的出现和完善,也是让软件开发变得更加友好。不仅前端需要关注 Serverless,它可能属于每一种类型的应用开发者。

而这会淘汰后端吗?并不会!

后端会更聚焦于业务逻辑、数据处理、算法策略等更专精的事情。

汽车的出现让马车夫成为了司机,技术在变革,工程师也将成长。


传送门:

欢迎访问:Serverless 中文网,您可以在 最佳实践 里体验更多关于 Serverless 应用的开发!


推荐阅读:《Serverless 架构:从原理、设计到项目实战》

© 著作权归作者所有

腾讯云Serverless
粉丝 20
博文 47
码字总数 88005
作品 0
深圳
私信 提问
加载中

评论(0)

阿里云杜欢:云上Serverless开发能力将成为前端的“金手指” - 知乎

导读:云 + 端模式成为当前前端开发的新风向,由此而来的 Serverless 正帮助前端工程师提升开发能力和效率。InfoQ 记者在近日有幸在 2019ArchSummit 全球架构师峰会北京站采访到了阿里高级前...

我是程序员
01/06
0
0
收益 or 挑战?Serverless 究竟给前端带来了什么 - 知乎

导读:前端开发者是最早享受到 “Serverless” 好处的群体,因为浏览器就是一个开箱即用、甚至无需为计算付费的环境!Serverless 把前端开发体验带入了后端,利用 FaaS 与 BaaS 打造一套开箱...

我是程序员
2019/10/24
0
0
浅析基于 Serverless 的前后端一体化框架

概述 Serverless 是一种“无服务器架构”模式,它无需关心程序运行环境、资源及数量,只需要将精力聚焦到业务逻辑上的技术。基于 Serverless 开发 web 应用,架构师总是试图把传统的解决方案...

木香丘
2019/07/01
0
0
收益 or 挑战?Serverless 究竟给前端带来了什么

作者 黄子毅(紫益) 阿里前端技术专家 导读:前端开发者是最早享受到 “Serverless” 好处的群体,因为浏览器就是一个开箱即用、甚至无需为计算付费的环境!Serverless 把前端开发体验带入了...

阿里巴巴云原生
2019/10/23
23
0
腾讯专家工程师:2020年,前端发展关键词有哪些?

导语 | 迅速发展的前端开发,在每一年,都为开发者带来了新的关键词。2019年已步入尾声,2020年,前端发展的关键词又将有哪些呢?云加社区特别邀请了腾讯TWeb大会出品人,为大家预测2020年前...

2019/11/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

郑州哪哪里可以开工程款发票-郑州_新闻网

【电薇同步;1.3.8 - 2.7.4.1 - 5.2.9.7.】张生、诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridge,是Android手机通用...

yyqqvip
38分钟前
30
0
Nginx 反向代理访问

在Nginx 配置 server { listen 80; server_name www.xiaocx.org www.xiaocx.org www.xiaocx.org; root /Users/maison/work/xiaocx/dist; index i......

韩庚庚
42分钟前
33
0
python笔记:环境变量已设置CMD中一直报错"python"不是内部命令,也不是可运行的程序或批处理文件

这些天虽然也写了几个小工具,但是打包都是在anaconda prompt中完成的,因为CMD中一直报错"python"不是内部命令,也不是可运行的程序或批处理文件,各种查度,千篇一律的是环境变量配置的问题...

小玲_001
43分钟前
13
0
AI+BI服务模式

术语与缩写解释 缩写、术语 解 释 BI 商业智能(Business Intelligence,简称:BI),又称商业智慧或商务智能,指用现代数据仓库技术、线上分析处理技术、数据挖掘和数据展现技术进行数据分析...

zoegu228
44分钟前
20
0
leetcode1227(面试题 17.09. 第 k 个数)--C语言实现

求: 有些数的素因子只有 3,5,7,请设计一个算法找出第 k 个数。注意,不是必须有这些素因子,而是必须不包含其他的素因子。例如,前几个数按顺序应该是 1,3,5,7,9,15,21。 示例 1:...

拓拔北海
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部