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 create myapp
安装依赖
cd myapp npm install axios bootstrap jquery popper.js vue-router vuex
编写代码
Vue.js 应用程序的代码存放在 src
目录下。我们需要先删除其中的 components
和 views
目录,因为我们将使用 Serverless 框架的其他组件来提供这些内容。
在 src
目录下,创建一个名为 router.js
的文件:
-- -------------------- ---- ------- ------ --- ---- ------ ------ --------- ---- ------------- ------ -------- ---- ---------------------------------- ------ -------- ---- ---------------------------------- ------------------- ----- ------ - - - ----- ---- ---------- --------- -- - ----- ------------- ---------- --------- -- - ----- ------------------ ---------- --------- -- -- ----- ------ - --- ----------- ------- --- ------ ------- -------
这个文件定义了 Vue.js 应用程序的路由。
然后,我们创建一个名为 store.js
的文件:
-- -------------------- ---- ------- ------ --- ---- ------ ------ ---- ---- ------- ------ ---- ---- ----------------------------- -------------- ----- ----- - --- ------------ -------- - ----- -- --- ------ ------- ------
这个文件定义了 Vue.js 应用程序的 Vuex Store。
最后,我们需要在 main.js
中添加以下内容:
-- -------------------- ---- ------- ------ --- ---- ------ ------ --- ---- ------------ ------ ------ ---- ----------- ------ ----- ---- ---------- ------------------------ - ------ --- ----- ------- ------ ------- --- -- ------- ------------------
引入 Serverless 组件
我们将使用 serverless-vue-sample
组件来提供 Vue.js 应用程序的 components
和 views
。这个组件已经包含了所有的资源文件,包括 HTML,CSS 和 JavaScript。
我们可以使用以下命令安装 serverless-vue-sample
组件:
npm install serverless-vue-sample
然后,在 src
目录下创建一个名为 components
的目录,将 serverless-vue-sample
组件的所有文件都复制到这个目录下。
我们还需要修改 App.vue
:
-- -------------------- ---- ------- ---------- ----- ---- ------------- ------------ ---------- -- -------------------- ------------------- --- ---------- --- ----------------- --------- --- ----------------- ------------ ------ ------------------------------------ ----- ----- ----- ------------------ ---- --------- ------------ --------------- ---------- ------------------- ---- ---------- --- ------------------ ------- ------ --------------------------- ------ ----------- -------- ------ ------- - ----- ------ -- ---------
现在我们已经完成了 Vue.js 应用程序的开发。我们可以使用以下命令来运行应用程序:
npm run serve
应用程序将在 localhost:8080 上运行。
搭建后端服务器
创建项目
首先我们需要创建一个 Node.js 的项目。
mkdir server cd server npm init
安装依赖
npm install body-parser cors express mongodb mongoose serverless-http
创建数据库
我们将使用 MongoDB 作为后端服务器的数据库。我们可以通过以下命令来启动 MongoDB 服务:
sudo service mongod start
然后我们运行以下命令来创建一个名为 users
的数据库和一个名为 users
的集合:
mongo use users db.createCollection('users') quit()
编写代码
在 server
目录下,创建一个名为 server.js
的文件,内容如下:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- ---- - ---------------- ----- -------- - -------------------- ----- --- - ---------- --------------------------- ---------------- ---------------- - --------------- --------------------------------------------- - ---------------- ----- ------------------- ----- --- ----- ---------- - --- ----------------- ----- ------- --- ----- ---- - ---------------------- ------------ ----------------- ----- ---- -- - ------------------------ -- - ---------------- --- --- ------------------ ----- ---- -- - ----- ---- - --- --------------- ------------------- -- - ---------- -------- ----- ----- -------------- --- --- --- --------------------- ----- ---- -- - ---------------------------------------- -- - --------------- --- --- --------------------- ----- ---- -- - ------------------------------------- ----------------- -- - ---------- -------- ----- ------- -------------- --- --- --- ------------------------ ----- ---- -- - --------------------------------------------- -- - ---------- -------- ----- ------- -------------- --- --- --- -------------- - ----
这个文件定义了 Node.js 应用程序的 Express.js 服务器,提供了对于用户管理的增删改查 API 接口。
引入 Serverless 组件
我们将使用 serverless-http
组件将 Express.js 服务器转换为 Serverless 应用程序。我们可以使用以下命令安装 serverless-http
组件:
npm install serverless-http
然后,在 server.js
文件的末尾添加以下代码:
if (process.env.LAMBDA_ENV) { const serverless = require('serverless-http'); module.exports.handler = serverless(app); }
这个代码块将 Express.js 服务器转换为 Serverless 应用程序。
现在我们已经完成了 Node.js 应用程序的开发。我们可以使用以下命令来运行应用程序:
node server.js
应用程序将在 localhost:3000 上运行。
部署应用程序
部署前端应用程序
要将 Vue.js 应用程序部署到 Serverless 中,我们需要使用 Serverless Framework。我们可以使用以下命令来安装 Serverless Framework:
npm install -g serverless
然后,我们需要在 Vue.js 应用程序的根目录中创建一个名为 serverless.yml
的文件,其中包含以下内容:
-- -------------------- ---- ------- -------- --------------------- -------- - ----------------------- --------- ----- --- -------- ---------- ------------ ----------- ------------------------------------------------------------------- ----------- ----------------- - ----- ------------------ - ------- ----- ------- - ------------------- - -------------------- - ----------------- --------- -------------------- ------------------- -- ------- ------------- ---------- ---- -------- --------------- ------- - ----- --- --------
其中,YOUR_ENDPOINT
和 YOUR_REGION
分别替换为你的实际值。
然后,我们可以使用以下命令来构建和部署应用程序:
npm run build serverless deploy
部署后端应用程序
要将 Node.js 应用程序部署到 Serverless 中,我们需要使用 Serverless Framework。我们可以使用以下命令来安装 Serverless Framework:
npm install -g serverless
然后,我们需要在 Node.js 应用程序的根目录中创建一个名为 serverless.yml
的文件,其中包含以下内容:
-- -------------------- ---- ------- -------- ---------------------- --------- ----- --- -------- ---------- ------------ ------------ ------------------------- ------------------ - ------- ----- ------- - ------------------- - -------------------- - ----------------- --------- -------------------- ------------------- -- ------- ------------- ---------- ---- -------- -------------- ------- - ----- --- --------
其中,YOUR_REGION
分别替换为你的实际值。
然后,我们可以使用以下命令来部署应用程序:
serverless deploy
此时,我们的 Serverless Web 应用程序已经部署完成。我们可以使用以下方式来测试它的正确性:
- 在 Vue.js 界面添加、修改或删除用户信息;
- 在 MongoDB 数据库中查看用户信息是否同步更新。
总结
利用 Serverless 框架极速搭建前后端分离的 Web 应用是一种全新的应用程序开发模式。它提高了开发效率和可维护性,降低了应用程序的成本和复杂度。本文介绍了 Serverless 框架的基本原理、前后端分离技术以及 Serverless Web 应用程序的构建方法,并给出了相关的示例代码。我们希望这篇文章能够为读者提供帮助,开启 Serverless 将改变未来的新时代。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64acea5f48841e98948fb4fd