利用 Serverless 框架极速搭建前后端分离的 Web 应用

阅读时长 13 分钟读完

Serverless 简介

Serverless 是一种全新的云计算服务模式,它允许开发者编写和部署代码,而无需管理底层的服务器架构。在 Serverless 中,管理服务器的职责由云服务提供商来承担,开发者只需要专注于编写业务代码即可。这种模式的优点在于可靠性高、弹性好、架构简单,并且支持按需计费。

Serverless 框架

Serverless 框架是基于 Serverless 架构模式的一种快速开发框架,可用于搭建 Serverless 应用。它支持多种编程语言,并且提供了各种工具和插件,能够帮助开发者编写和部署 Serverless 应用。Serverless 框架是一个开放源代码项目,使用它可以大大提高应用程序的开发效率和可维护性。

前后端分离

前后端分离是一种将 Web 应用程序的前端和后端部分分离的架构模式。在这种模式下,前端和后端可以独立开发,部署和测试。前端通常使用某种框架(如 React 或 Vue)来构建用户界面,后端通常使用某种服务器端框架(如 Express 或 Flask)来处理数据和业务逻辑。前后端之间的通信通过 API 接口进行。

前后端分离的优点在于提高了应用程序的可扩展性,方便了并行开发和测试,降低了系统的耦合性,最终提高了开发效率和用户体验。

Web 应用程序示例

下面我们将演示如何使用 Serverless 框架极速搭建前后端分离的 Web 应用程序。我们使用的技术栈包括:

  • 前端:Vue.js
  • 后端:Node.js + Express.js
  • 数据库:MongoDB

在我们的示例中,我们将使用 Serverless 框架搭建一个可以对用户进行增删改查操作的 Web 应用程序。整个应用程序包括两个部分:

  • 前端应用程序:使用 Vue.js 构建,包括一个用户列表页面和一个用户编辑页面;
  • 后端服务器:使用 Express.js 构建,提供用户管理功能,将用户信息存储在 MongoDB 中。

搭建前端应用程序

创建项目

首先我们需要创建一个 Vue.js 的项目。

安装依赖

编写代码

Vue.js 应用程序的代码存放在 src 目录下。我们需要先删除其中的 componentsviews 目录,因为我们将使用 Serverless 框架的其他组件来提供这些内容。

src 目录下,创建一个名为 router.js 的文件:

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

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

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

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

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

这个文件定义了 Vue.js 应用程序的路由。

然后,我们创建一个名为 store.js 的文件:

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

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

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

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

这个文件定义了 Vue.js 应用程序的 Vuex Store。

最后,我们需要在 main.js 中添加以下内容:

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

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

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

引入 Serverless 组件

我们将使用 serverless-vue-sample 组件来提供 Vue.js 应用程序的 componentsviews。这个组件已经包含了所有的资源文件,包括 HTML,CSS 和 JavaScript。

我们可以使用以下命令安装 serverless-vue-sample 组件:

然后,在 src 目录下创建一个名为 components 的目录,将 serverless-vue-sample 组件的所有文件都复制到这个目录下。

我们还需要修改 App.vue

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

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

现在我们已经完成了 Vue.js 应用程序的开发。我们可以使用以下命令来运行应用程序:

应用程序将在 localhost:8080 上运行。

搭建后端服务器

创建项目

首先我们需要创建一个 Node.js 的项目。

安装依赖

创建数据库

我们将使用 MongoDB 作为后端服务器的数据库。我们可以通过以下命令来启动 MongoDB 服务:

然后我们运行以下命令来创建一个名为 users 的数据库和一个名为 users 的集合:

编写代码

server 目录下,创建一个名为 server.js 的文件,内容如下:

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

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

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

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

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

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

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

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

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

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

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

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

这个文件定义了 Node.js 应用程序的 Express.js 服务器,提供了对于用户管理的增删改查 API 接口。

引入 Serverless 组件

我们将使用 serverless-http 组件将 Express.js 服务器转换为 Serverless 应用程序。我们可以使用以下命令安装 serverless-http 组件:

然后,在 server.js 文件的末尾添加以下代码:

这个代码块将 Express.js 服务器转换为 Serverless 应用程序。

现在我们已经完成了 Node.js 应用程序的开发。我们可以使用以下命令来运行应用程序:

应用程序将在 localhost:3000 上运行。

部署应用程序

部署前端应用程序

要将 Vue.js 应用程序部署到 Serverless 中,我们需要使用 Serverless Framework。我们可以使用以下命令来安装 Serverless Framework:

然后,我们需要在 Vue.js 应用程序的根目录中创建一个名为 serverless.yml 的文件,其中包含以下内容:

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

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

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

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

其中,YOUR_ENDPOINTYOUR_REGION 分别替换为你的实际值。

然后,我们可以使用以下命令来构建和部署应用程序:

部署后端应用程序

要将 Node.js 应用程序部署到 Serverless 中,我们需要使用 Serverless Framework。我们可以使用以下命令来安装 Serverless Framework:

然后,我们需要在 Node.js 应用程序的根目录中创建一个名为 serverless.yml 的文件,其中包含以下内容:

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

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

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

其中,YOUR_REGION 分别替换为你的实际值。

然后,我们可以使用以下命令来部署应用程序:

此时,我们的 Serverless Web 应用程序已经部署完成。我们可以使用以下方式来测试它的正确性:

  • 在 Vue.js 界面添加、修改或删除用户信息;
  • 在 MongoDB 数据库中查看用户信息是否同步更新。

总结

利用 Serverless 框架极速搭建前后端分离的 Web 应用是一种全新的应用程序开发模式。它提高了开发效率和可维护性,降低了应用程序的成本和复杂度。本文介绍了 Serverless 框架的基本原理、前后端分离技术以及 Serverless Web 应用程序的构建方法,并给出了相关的示例代码。我们希望这篇文章能够为读者提供帮助,开启 Serverless 将改变未来的新时代。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64acea5f48841e98948fb4fd

纠错
反馈