Serverless 综合案例：用 Serverless 开发一个图床 Web 应用

Serverless 综合案例：用 Serverless 开发一个图床 Web 应用

随着云计算和前端技术的不断发展，Serverless 成为了一种越来越受欢迎的后端开发架构。在 Serverless 架构下，我们无需关心服务器和运维问题，只需要编写业务逻辑代码就可以了。本文将以一个图床 Web 应用为例，介绍如何使用 Serverless 架构开发后端服务。

  1. 什么是图床

首先，我们需要了解什么是图床。图床是指一种图片上传、存储、管理、分享等功能为一体的在线服务，它可以帮助我们快速地上传图片并获得图片的链接，方便在论坛、博客等场合使用图片。图床一般都需要提供以下功能：

  • 图片上传：支持用户上传图片文件，并存储到服务器上。
  • 图片管理：支持用户管理已上传的图片，包括查看、删除、复制等操作。
  • 图片分享：支持用户获取图片链接，方便在网站、社交网络等地方分享图片。
  1. Serverless 架构概览

Serverless 架构是指一种无服务架构，也叫 BaaS（Backend as a Service）。在此架构下，所有的应用逻辑都运行在云服务商所提供的函数计算平台上，开发者只需要编写函数代码，上传到云端，由云服务商自行管理和运行函数。Serverless 架构具有以下优点：

  • 无需维护服务器：无需为服务器的运维和管理而花费精力和费用。
  • 自动扩容：根据实际负载情况自动扩容，避免因为流量峰值导致服务不可用。
  • 按使用付费：按照函数的实际使用情况计费，避免因为闲置资源而浪费资金。
  1. 图床应用架构设计

图床应用需要提供上传、管理和分享等功能，它的总体架构如下图所示：

应用分为两层：前端界面和后端服务。前端界面由 HTML、CSS 和 JavaScript 组成，提供用户界面和交互。后端服务则通过 API Gateway 和函数计算实现，提供图片上传、管理和分享等功能。

  1. 构建 Serverless 后端服务

基于 Serverless 架构，我们需要使用云厂商的函数计算服务来构建后端服务。我们选用阿里云函数计算作为 Serverless 服务商，下面将介绍如何使用阿里云函数计算构建图床后端服务。

4.1. 函数计算简介

阿里云函数计算是基于事件驱动的 Serverless 计算平台，支持使用多种编程语言编写函数，包括 Java、Python、Node.js 等等。在这里，我们将使用 Node.js 编写图床后端服务。

我们可以使用阿里云函数计算控制台或函数计算命令行工具来创建、部署和管理函数。在下面的教程中，我们将以函数计算命令行工具为例来演示如何创建函数和上传代码。

4.2. 创建函数

首先，我们需要创建一个函数。在命令行终端中，运行以下命令：

- --- ---- -- ------------- -- ---- -- --------
- -- -------------
- --- ------

这将会创建一个函数，并上传到函数计算服务中。其中，-n 参数指定了函数名称，-t 参数指定了函数模板类型，-p 参数指定了运行环境。

创建成功后，我们可以在函数计算控制台中看到函数的详细信息。

现在我们已经创建了一个函数，但它什么功能也没有。下面我们将编写图床后端服务的代码。

4.3. 上传图片

接下来，我们需要编写一个能够上传图片的函数。我们可以使用阿里云函数计算中的 OSS（Object Storage Service）服务来存储图片文件。

代码如下：

---- --------

----- --- - -------------------
----- ------ - ------------------
----- -- - --------------
----- ---- - ----------------
----- ------ - -------------------

----- ------ - --- -----
  ------- -----------------------
  ------------ ------------------------------
  ---------------- ----------------------------------
  ------- ----------------------------
---

--------------- - ------- -------- --------- -- -
  ----- ------ - ----------------------------
  ----- ---- - ---------------------
  ----- ----------- - ------------------------------

  ----- -- - --- --------
    -------- -
      --------------- ----------- -- ---------------------------
    --
    ------- -
      ------- --
      ------ --
      --------- ---------
    --
  ---

  -------------- ----------- ---- ------------------- ------------- -- -
    -------------- -
      ----------- ----
      ----- --------- - ----- --- ---- ---------------------
    ---
  ---

  ------------- ----------- ----- --------- --------- --------- -- -
    ----- ------ - ------------
    ----- -------- - ----------------- ----------
    ----- --- - -----------------------
    ----- -------- - -------- - ----
    ----- -------------- - ---------------------

    ------------------------------------------

    ----- ------ - ------------------------------
    ------
      -------------------------- -------
      -------------- -- -
        ----- --- - ---- - --- - ------ - --- - ---------------
        -------------- -
          ----------- ----
          -------- -
            ------------------------------ ----
            --------------- -------------------
          --
          ----- ---------------- --- ---
        ---
      --
      ------------ -- -
        --------------
      ---
  ---

  -------------- ----- -- -
    --------------
  ---

  -------------------
--

该函数的作用是接收一个图片文件，保存到 OSS 对象存储服务中，并返回图片的链接 URL。函数的处理逻辑如下：

  • 通过 busboy 插件解析 HTTP 请求，处理上传的文件。
  • 生成一个随机的文件名，并将文件保存到 OSS 中。
  • 返回图片的 URL。

需要注意的是，我们需要在阿里云函数计算的服务配置中，设置 OSS 的访问秘钥信息、Bucket 名称、访问域名等参数。我们也可以在配置中添加其他环境变量。这些参数可以使用 Serverless 模板来设置。

4.4. 获取图片链接

接下来，我们需要编写一个能够获取图片链接的函数。该函数需要支持根据图片 ID 获取图片链接、获取所有图片列表等操作。

代码如下：

---- --------

----- --- - -------------------

----- ------ - --- -----
  ------- -----------------------
  ------------ ------------------------------
  ---------------- ----------------------------------
  ------- ----------------------------
---

--------------- - ------- -------- --------- -- -
  ----- ------ - ----------------------------
  ----- ---- - ---------------------
  ----- ---- - -----------

  -- ----- --- -------- -
    ------
      -------
        ------- ----------
        ----------- ----
      --
      -------------- -- -
        ----- ---- - ------------------------ -- -
          ------ ---- - --- - ------ - --- - ---------
        ---
        -------------- -
          ----------- ----
          -------- -
            ------------------------------ ----
            --------------- -------------------
          --
          ----- ---------------------
        ---
      --
      ------------ -- -
        --------------
      ---
  - ---- -- ---------------------------- -
    ----- --- - -----------------------------
    ----- --- - ---- - --- - ------ - --- - ----
    -------------- -
      ----------- ----
      -------- -
        ------------------------------ ----
        --------------- -------------------
      --
      ----- ---------------- --- ---
    ---
  - ---- -
    -------------- -
      ----------- ----
    ---
  -
--

该函数的作用是根据图片 ID 获取图片链接，并支持获取所有图片列表等功能。函数的处理逻辑如下：

  • 如果请求的路径为 /list，则返回图片列表。
  • 如果请求的路径为以 /image/ 开头，则获取对应图片的链接。
  • 如果请求的路径不匹配，则返回 404。

需要注意的是，我们在函数处理中通过 Access-Control-Allow-Origin 头来解决跨域问题。

  1. 前端界面开发

前端界面主要使用 HTML、CSS、JavaScript 和第三方库（如 jQuery 和 Axios）来实现。前端需求如下：

  • 提供一个上传文件的界面，并支持拖拽上传和点击上传两种方式。
  • 显示已上传的图片列表。
  • 点击图片可以跳转到图片的链接地址。

代码如下：

--------- -----
------
  ------
    -----------------
    ----- --------------- --
  -------
  ------
    -----------
    --- --

    -------------
    ----- --------------------
      ------ ----------- ----------- --------------- ----- --
      ------- --------------------------------
      --------
    -------

    -------------
    --- ------------------------

    ------- ----------------------------------------------------------------------------
    ------- ---------------------------------------------------------------------------
  -------
  --------
    ----- ------- - -------------------

    -- ----
    ------------------------------ ------------------- -------- --- -
      ----- ---- - ------------------
      ----- --- - --- -----------------
      ---------------- ---------------------
      ---------- - -------- -- -
        -- ----------- --- ---- -
          ----- ---- - -----------------------------
          ----------------------
        - ---- -
          ----------------------
        -
      --
      ----- -------- - --- -----------
      ----------------------- ------
      -------------------
    ---

    ----------------------------- -------------- -------- --- -
      -------------------
      ------------------------------
    ---

    -------------------------------- -------- --- -
      -------------------
      ------------------------------------
    ---
    --------------------------------- -------- --- -
      -------------------
      ---------------------------------------
    ---
    ---------------------------- -------- --- -
      -------------------
      ---------------------------------------
      ----- ---- - --------------------------------------
      ----- --- - --- -----------------
      ---------------- ---------------------
      ---------- - -------- -- -
        -- ----------- --- ---- -
          ----- ---- - -----------------------------
          ----------------------
        - ---- -
          ----------------------
        -
      --
      ----- -------- - --- -----------
      ----------------------- ------
      -------------------
    ---

    -- ------
    --------------------------------------- -- -
      ----- ---- - ---------
      ------------------ -- -
        -----------------
      ---
    ---

    -------- ---------------- -
      ----- -- - ----------------------------------
      ----- - - --------------------- ------------------
      ----- --- - ---------------------- -----------------
    -
  ---------

  -------
    ------------ -
      ------- --- ------ -----
      -------------- ----
      -------- -----
      -------------- -----
    -

    ---------------- -
      ------------- -----
    -

    ----------- -
      ----------- -----
      ------- --
      -------- --
    -

    ----------- -- -
      -------- -------------
      -------- -----
    -
  --------
-------
  1. 部署应用

在编写完前端界面和后端服务代码后，我们需要将应用部署到云端。在命令行中运行以下命令：

- --- -------
- --- ------

fun package 命令将会打包应用，并生成 template.yml 文件。在我们部署应用时，Serverless 框架将自动部署应用的所有资源。

fun deploy 命令将会自动将应用部署到云端。我们可以在控制台中查看应用的部署状态和资源情况。

完成以上步骤后，我们就可以在浏览器中访问应用，上传图片并查看图片列表了。

  1. 总结

Serverless 架构具有许多优点：免去部署和运维的烦恼，支持弹性扩容和按使用计费，开发效率高等。在本文中，我们使用了 Node.js 和阿里云 Function Compute 服务来构建一个图床 Web 应用，并介绍了如何使用 Serverless 架构来快速开发后端服务。希望该案例能够给读者提供一些参考和指导。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ae5c7448841e9894a61992

阅读全文

猜你喜欢

  • GraphQL：用 Connection 优化节点查询

    前言 GraphQL 是一种由 Facebook 开发的数据查询和操作语言，它提供了一种更高效、更灵活的方式来获取和操作数据。GraphQL 的一个重要特性就是可以精确地指定需要查询的数据，避免了传统...

    1 个月前
  • Server-sent Events 的浏览器支持情况及解决方法

    什么是 Server-sent Events？ Server-sent Events（简称 SSE）是一种基于 HTTP 的服务器推送技术，它可以让服务器向客户端发送事件流，客户端通过监听这个事件流来...

    1 个月前
  • ECMAScript 2020（ES11）中的新特性：BigInt 转换

    在 ECMAScript 2020（ES11）中，新增了一种数据类型：BigInt。它是一种可以表示任意大整数的数据类型，可以用来解决 JavaScript 中整数运算的精度问题。

    1 个月前
  • CSS Reset 在 IE6、IE7 等老浏览器中的应用

    什么是 CSS Reset CSS Reset 是一种通过重置浏览器默认样式的方式，消除不同浏览器之间的差异，从而实现更加一致的样式效果的技术手段。在前端开发中，使用 CSS Reset 可以让我们更...

    1 个月前
  • ES6 中的类继承和原型链之间的关系解析

    在 ES6 中，引入了 class 关键字，使得 JavaScript 也具备了面向对象编程的能力。在类继承和原型链之间，有着密切的关系。本文将详细解析 ES6 中的类继承和原型链之间的关系，并提供一...

    1 个月前
  • 如何使用 Redux 处理 React 应用中的表单数据

    前言 在开发 React 应用时，表单数据的处理是非常常见的需求。然而，由于 React 的单向数据流和组件化特性，传统的表单处理方式可能会变得非常繁琐。而 Redux 作为一种状态管理工具，可以帮助...

    1 个月前
  • Redis 处理高并发的策略

    前言 随着互联网的发展，高并发已经成为了一个不可避免的问题。而 Redis 作为一款高性能的 NoSQL 数据库，也成为了处理高并发的重要工具之一。本文将会介绍 Redis 处理高并发的策略，并且会提...

    1 个月前
  • 响应式设计中的图片适配问题解决方案

    在响应式设计中，图片适配是一个比较棘手的问题。如果不加以处理，可能会导致图片在不同设备上显示不佳，影响用户体验。本文将介绍响应式设计中的图片适配问题，并提供解决方案。

    1 个月前
  • 解析 TypeScript 中 encapsulation（封装）的实现方式

    解析 TypeScript 中 encapsulation（封装）的实现方式 在 TypeScript 中，封装（encapsulation）是一种重要的面向对象编程的特性。

    1 个月前
  • PM2 崩溃处理：如何避免由于 PM2 进程奔溃导致应用崩溃？

    在前端开发中，我们经常使用 PM2 进行进程管理和部署。但是，当 PM2 进程崩溃时，应用也会跟着崩溃。如何避免这种情况的发生？本文将介绍 PM2 崩溃处理的方法和技巧，帮助您更好地管理和部署应用。

    1 个月前
  • 在 Node.js 中运行 HTTPS 服务器的方法

    Node.js 是一个非常流行的 JavaScript 运行时环境，它可以让我们通过 JavaScript 编写服务器端应用程序。在开发 Web 应用程序时，安全性是非常重要的。

    1 个月前
  • 详解 ECMAScript 2018 中的三个新操作符及其用法

    ECMAScript 2018 (简称 ES2018) 是 JavaScript 语言的最新标准，其中包含了许多新特性和语法糖。本文将详细介绍其中的三个新操作符及其用法，分别是：扩展运算符、剩余运算符...

    1 个月前
  • 解决 Enzyme 测试 React Native 组件时动画无法渲染的问题

    在开发 React Native 应用时，我们经常需要使用 Enzyme 来测试组件。然而，当我们测试涉及到动画的组件时，我们可能会遇到一些问题：动画无法渲染，导致测试失败。

    1 个月前
  • 使用 React Router 打造复杂而强大的 SPA 应用

    随着 Web 技术的不断发展，单页应用（Single Page Application，SPA）已经成为了现代 Web 应用的主流。SPA 通过异步加载数据和动态更新页面，提供了更快速、更流畅的用户体...

    1 个月前
  • AngularJS 中如何使用 ng-repeat 中的 filter 来过滤数据

    在 AngularJS 中，ng-repeat 指令是用于循环遍历数组或对象并生成 HTML 元素的常用指令。而 ng-repeat 指令中的 filter 属性则是用于过滤数据的功能。

    1 个月前
  • 如何在 Chai 中验证 Promise.all

    如何在 Chai 中验证 Promise.all 在前端开发中，Promise.all 是一个非常常用的功能，它可以让我们在多个异步操作完成后再执行一些操作，这个功能在实际开发中非常实用。

    1 个月前
  • Mongoose 实现数据批量更新的方式详解

    前言 在前端开发中，经常会涉及到对数据库中的数据进行批量更新的操作。而 Mongoose 是一款 Node.js 平台下的 MongoDB 对象模型工具，它提供了一种方便的方式来操作 MongoDB ...

    1 个月前
  • 在使用 lit-element 的时候，如何解决麻烦的 Shadow DOM 的变量传递问题

    前言 在使用 Web Components 的时候，我们通常会使用 Shadow DOM 来实现封装和样式隔离。然而，Shadow DOM 的封闭性也带来了一些挑战，其中之一就是变量传递问题。

    1 个月前
  • Tailwind CSS 如何实现动态换肤？

    随着互联网的发展，越来越多的网站和应用开始支持动态换肤功能。动态换肤不仅可以提升用户体验，还可以让用户在不同的环境下选择适合自己的主题，增加用户黏性和满意度。本文将介绍如何使用 Tailwind CS...

    1 个月前
  • 如何在 Less 中使用字符串操作函数？

    在前端开发中，样式表是不可或缺的一部分。而 Less 是一种动态样式语言，它是 CSS 的一种扩展。在 Less 中，我们可以使用字符串操作函数来处理字符串，这些函数可以帮助我们更加方便地操作字符串，...

    1 个月前

相关推荐