SpringBoot-React-和-AWS-教程-全-

SpringBoot、React 和 AWS 教程（全）

原文：Spring Boot with React and AWS

协议：CC BY-NC-SA 4.0

一、亚马逊网络服务（AWS）简介

当你听到亚马逊这个词时，你可能会首先想到 ?? 亚马逊。这是最大最成功的网上商店之一。虽然亚马逊在开发在线零售服务上建立了自己的品牌，但它也扩展到了替代行业，其中包括网络服务行业，他们有同名的亚马逊网络服务(AWS)，这是一种云计算形式，帮助用户开发软件、数据库和其他需要重型计算资源的程序。

本章概述了亚马逊 Web 服务(AWS)，包括几个 AWS 关键服务，如亚马逊弹性计算云(Amazon EC2)、AWS 弹性 Beanstalk、亚马逊关系数据库服务(Amazon RDS)和亚马逊 Route 53。它包括为开发者创建一个免费的 AWS 帐户，创建一个弹性 Beanstalk 服务器，创建一个 HelloWorld JSP 应用，用 Maven 构建一个 WAR 文件，并将其上传到弹性 Beanstalk。

亚马逊网络服务简介

亚马逊网络服务(AWS)到底是什么？在一个非常高的层面上，AWS 是由 Amazon 提供的 web 托管服务，您可以在其中部署您的 web 应用并联合部署您的数据库。部署完成后，您的应用就可以在线使用了。任何人只需在他们的网络浏览器中输入您的 URL(统一资源定位器)就可以访问您的应用。网络将每个人联系在一起。您可以在云中在线部署您的应用，这样任何人都可以访问它。它不仅在本地运行；它现在正在网上运行。

AWS 是一个全业务云平台。它不仅仅是一个应用托管平台。你可以用 AWS 做很多事情。

• 通过 web 按需交付 IT 资源

  • 您可以按需启动服务器，并且可以选择您的操作系统。

  • 您甚至可以在云中部署数据库，并且您可以随心所欲地获得更多数据库选项。

• 现收现付定价模式

  • 这本书使用免费的开发者帐户。可以获得 12 个月的免费开发者账号。

而且，使用亚马逊网络服务云的好处是，你可以在几分钟内实现全球化，因为亚马逊拥有遍布全球的数据中心，如图 1-1 所示。

图 1-1

亚马逊数据中心

您将能够将您的应用部署到单个数据中心；否则，您将把它部署到多个数据中心。此外，对您能够部署到哪个数据中心没有限制。

但是，如果您主要在美国，您可以将应用部署到南美、中国或亚太地区的数据中心。这完全取决于你。用户可以根据应用的使用情况选择区域，因此延迟较低。这方面没有任何限制。

一旦你登录到亚马逊控制台，那么本质上，你选择你只是想使用的服务。您只需要部署您的应用，就可以拥有一个令人愉快的 web 管理控制台，在这里您只需要配置您的环境、配置您的服务器，然后合理地按下按钮进行部署。图 1-2 显示了 AWS 管理控制台上的 AWS 服务。

图 1-2

自动警报系统

这是关于亚马逊网络服务的介绍。让我们深入了解一些 AWS 关键服务。

AWS 关键服务

AWS 提供不同类别的广泛服务。本节探讨了几种 AWS 关键服务(见图 1-3 )。首先，我们来看看亚马逊弹性计算云(Amazon EC2)，它可能包括远程 VM(虚拟机)。接下来，您简要地看一下 AWS Elastic Beanstalk，它允许开发人员部署 web 应用。然后，您转到 Amazon 关系数据库服务(Amazon RDS)，这是云中的一个数据库。最后，您看一下 Amazon Route 53，它将自定义域名路由到您的应用。

图 1-3

AWS 关键服务

弹性云计算(EC2)

弹性云计算(EC2)是 AWS 发布时首批 web 服务接口之一，允许用户在云中创建和配置计算机器。EC2 允许用户在亚马逊云上创建 VM(虚拟机)来运行可以通过互联网访问的应用。

该软件可以根据您的规格在云服务器上进行配置。您可以选择最适合您的需求或应用的操作系统(即 Microsoft Windows 或 Linux ),并预装该操作系统。EC2 提供实际的主机服务器和操作系统。图 1-4 显示了它是如何设置的。

图 1-4

EC2 是如何设置的

如果您想要任何附加软件，您必须作为开发人员在操作系统上手动安装。所以，如果你想要 JDK (Java 开发工具包)，你可以安装 Java。还可以安装 Tomcat、数据库等等。这几乎就像获得一台只有操作系统的全新笔记本电脑，您需要在上面安装您的工具。

弹性豆茎

Elastic Beanstalk 是一个预打包的平台，允许您快速部署和处理 web 应用，而无需担心基础设施。您为给定的 web 栈选择一个预先配置好的虚拟机，比如 Java 和 Tomcat。而且，不需要在虚拟机上安装任何额外的软件。您只需上传应用的可部署文件，然后就可以开始工作了。Elastic Beanstalk 自动提供应用服务器、语言运行时、操作服务器和主机服务器，如图 1-5 所示。

图 1-5

弹性豆茎

它还支持。NET，Node.js，PHP，Docker 等等。您可以选择 web 堆栈，它为您提供所有软件的预安装、预配置，您只需部署您的代码。

它非常适合部署在 web 堆栈上，您只需选择您需要的服务，它就为您设置好了。这被称为平台即服务，或 PaaS。你所要做的就是部署你的代码。

现在，当您在 AWS 上开发 Java 应用时，您可以使用常规的 javaee API。你也可以使用第三方框架，比如 Spring Boot、Hibernate 和标准 Java 中的任何东西。无论您可以在 Tomcat 本地运行什么，您都可以在 Amazon 上运行相同的代码。因此，不需要修改代码，也不需要特殊的 Amazon JAR 文件或任何东西。

关系数据库服务

AWS 关系数据库服务(RDS)是云中的关系数据库。这允许您在云中快速部署关系数据库。它支持多种数据库可供选择，包括 MySQL、Oracle、Microsoft SQL Server 等等。

您可以使用常规管理工具来管理这些工具。如果你用的是 MySQL，可以用 MySQL Workbench。如果您正在使用 Oracle 数据库，您可以使用 Oracle SQL Developer，这样的例子不胜枚举。

AWS 也支持 NoSQL 数据库，比如 MongoDB。因此，在关系数据库服务的支持下，您需要的所有主要数据库特性都可以在 AWS 中找到。

53 号公路

Amazon Route 53 是一个域名系统(DNS)，它允许您将自定义域名路由到 AWS 上的实际应用。因此，您配置 Route 53 从浏览器向您的 AWS 应用发送请求。AWS DNS 设置您的自定义域名。

用例:AWS 应用架构

对于您的应用，从 AWS Elastic Beanstalk 开始，因为您可以通过利用那些开箱即用的预配置 web 堆栈来快速开始部署您的应用。

如果您需要一些低级别的控制，请使用 EC2。例如，您可能希望使用 Elastic Beanstalk 不支持的 Java 版本，或者您可能希望使用 WebLogic 之类的 Java 应用服务器，或者进行其他特定于操作系统的定制。

图 1-6 显示该架构使用 Elastic Beanstalk 来部署 web 应用。Java 应用运行在 Tomcat 上。RDS 是云端使用 MySQL 的数据库。Route 53 将您的自定义域名路由到 AWS 上的应用。

图 1-6

AWS 应用架构

为开发者创建一个免费的 AWS 帐户

要访问 Amazon Web Services，您需要创建一个 AWS 帐户。首先，让我们谈谈 AWS 免费层，开发者可以获得 12 个月的免费试用期和足够的资源来免费部署您的应用和数据库。还有一个更小版本的 AWS 服务器可以免费使用。

如果你需要一些更高级的功能，那么你必须付费并获得访问权。这本书使用免费层。如果您想了解有关免费层的更多信息，请访问 https://aws.amazon.com/free/ 。

在你的网络浏览器中，前往 https://aws.amazon.com 打开亚马逊网络服务主页(见图 1-7；由于亚马逊的任何更新，此屏幕截图在您的屏幕上可能会有所不同)。

图 1-7

AWS 主页

要创建 AWS 帐户，您需要提供您的联系信息，包括您的地址和有效的借记卡或信用卡。即使你使用的是免费账户，亚马逊也需要你的信用卡或借记卡信息。因此，在创建 AWS 帐户时，请将它放在手边。

在主页的右上角，点击创建 AWS 帐户按钮。您将被重定向到注册 AWS 页面，如图 1-8 所示。

图 1-8

注册 AWS

输入您的电子邮件地址、密码(选择一个强密码以防止被黑)，以及您希望此帐户使用的 AWS 帐户名称。您必须确保您输入的帐户信息是正确的，尤其是您的电子邮件地址。如果您输入的电子邮件地址不正确，您将无法访问您的帐户。

点击继续按钮，输入您的联系方式，如图 1-9 所示。

图 1-9

联系信息

首先，选择个人账户类型。(企业账户与组织相关联，个人账户与个人相关联。)输入您的全名、电话号码、国家、地址、城市、州和邮政编码。

最后，选中底部的小复选框，表明您已经阅读并同意 AWS 客户协议的条款，然后单击继续按钮。

您会收到一封来自 AWS 的电子邮件，确认您的 AWS 帐户已经创建。您可以使用注册时使用的电子邮件地址和密码登录新帐户。但是，在您完成帐户激活之前，您不能使用 AWS 服务。

账单信息是您必须输入您的信用卡或借记卡号码等信息的地方，如图 1-10 所示。它用于验证目的。

图 1-10

票据信息

除非您的使用超过 AWS 免费层限制，否则亚马逊不会向您的卡收费。在本书中，我们向您展示的所有内容都在自由层限制范围内。

AWS 要求电话号码验证，如图 1-11 所示。从列表中选择您的国家或地区代码，输入可以立即联系到您的电话号码，并输入安全检查中显示的字符。

图 1-11

电话号码验证

键入安全检查字符后，单击立即呼叫我按钮。屏幕上会显示一个验证码，同时你会接到亚马逊的电话，要求验证你注册的电话号码。您必须输入收到的 PIN 并选择继续。一旦您的身份验证成功，您可以在窗口上看到您的手机已验证，您将被重定向到下一个屏幕以选择您的支持计划，如图 1-12 所示。

图 1-12

支持计划

选择符合您需求的支持计划。选择免费支持的基本计划。单击“免费”按钮，您将被重定向到 AWS 注册确认页面。

现在您可以*登录 AWS 管理控制台。*前往 https://console.aws.amazon.com 开始使用 AWS。

选择根用户，输入你的 AWS 账户邮箱，点击下一步按钮，如图 1-13 所示。

图 1-13

登录到控制台

接下来，输入你的 AWS 账号密码，点击登录，如图 1-14 所示。

图 1-14

登录密码

AWS 管理控制台如图 1-15 所示。

图 1-15

AWS 管理控制台

在这里，您可以找到所有可用和提供的不同服务，但它们是按类别分组的，如图 1-16 所示。

图 1-16

按类别划分的 AWS 服务

下一节将使用 Elastic Beanstalk 服务开始构建 web 应用。Tomcat 运行在 AWS 云中。

探索并创建一个 AWS 弹性 Beanstalk 服务器

在 AWS 服务页面，向下滚动到计算部分，选择弹性豆茎，如图 1-17 所示。它允许您运行和管理您的 web 应用。

图 1-17

电脑节下弹性豆茎

AWS 弹性豆茎页面如图 1-18 所示。

图 1-18

AWS 弹性豆茎

Elastic Beanstalk 是在 AWS 上部署和运行 web 应用的最简单方式。Elastic Beanstalk 自动处理容量供应、负载平衡、自动伸缩和 web 应用健康监控的部署细节。

在这里，您选择一个平台，上传一个应用，或者使用一个示例，然后运行它。本章使用了一个示例，Tomcat 是部署应用代码的平台。

单击创建应用按钮。这将带您进入图 1-19 所示的创建 web 应用页面。

图 1-19

创建 web 应用

将应用命名为我的第一个弹性豆茎应用，如图 1-20 所示。

图 1-20

应用信息下的应用名称

接下来，从下拉列表中选择平台。选择 Tomcat，如图 1-21 所示。

图 1-21

应用信息下的平台

选择默认的 Tomcat 分支和版本，如图 1-22 所示。

图 1-22

在应用信息下选择平台的平台详细信息

在【应用代码】下**，选择样本应用，如图 1-23 ，然后点击创建**应用按钮。

图 1-23

应用代码

此时，AWS 为你调配了一台服务器，如图 1-24 所示。它安装了 Java，运行在 Linux 上，并且已经预装了 Tomcat。

图 1-24

环境细节

当工作在后台进行时，您会在屏幕上看到诊断信息。

最终，你的应用部署成功，健康状态 OK，如图 1-25 所示。指向您的应用的链接出现在窗口的左上角。因此，如果您单击该链接，您会看到您的应用启动并运行。

图 1-25

健康状况良好

这将启动示例应用并配置 Linux、Tomcat 和 Java。下图 1-26 中显示的日志通知环境成功启动。

图 1-26

日志

图 1-27 显示祝贺画面。

图 1-27

祝贺屏幕

您的应用现在运行在 AWS 云上，其 URL 在互联网上是实时的。Tomcat 运行在 AWS 云中您的专用环境上。

现在，您只是简单地使用示例应用，但是稍后，您上传您的应用并在 AWS 云中运行它们。您可以在 URL 中添加自定义域名。

创建一个 HelloWorld JSP 应用，用 Maven 构建 WAR，并将 WAR 上传到 Elastic Beanstalk

作为概念验证，让我们在 Elastic Beanstalk 上部署 HelloWorld JSP 应用。它只是 Java 端的一个简单应用，允许您专注于弹性 Beanstalk 部署过程。稍后将介绍高级 Spring Boot 和数据库 CRUD 操作。

为了理解如何部署的机制，让我们看一下一步一步的开发过程。

1. 在 Spring 工具套件(STS)中创建 HelloWorld JSP 应用。

2. 使用 Maven 打包 WAR 文件。

3. 创建弹性豆茎的新应用。

4. 将 WAR 文件上传到 Elastic Beanstalk。

创建 HelloWorld JSP 应用

使用 STS 或您选择的任何 IDE 创建一个 Maven web 应用项目。

首先打开 Spring 工具套件，选择文件菜单➤新➤ Maven 项目，如图 1-28 所示。

图 1-28

选择 Maven 项目

图 1-29 显示了新的 Maven 项目向导。选择默认位置，然后单击下一步。

图 1-29

新建 Maven 项目向导

然后选择maven-archetype-webapp，点击下一步，如图 1-30 所示。

图 1-30

选择一个原型

接下来，提供组 ID、工件 ID 和包信息，然后点击 Finish 按钮，如图 1-31 所示。

图 1-31

指定原型参数

创建一个项目目录，如图 1-32 所示。

图 1-32

HelloWorldJSP 项目目录

如果您在 IDE 中查看问题的视图，显示的错误是“在 Java 构建路径上找不到超类 javax.servlet.http.HttpServlet”。此错误表明 HTTP servlet 在项目类路径中不可用。

一旦将目标运行时添加到项目中，HTTP servlet 就可以在项目类路径中使用了。在配置运行时服务器(如 Tomcat 服务器)后，错误会得到解决。

要配置 Tomcat 服务器，右键单击项目并选择 Properties。选择目标运行时，然后选择 Apache Tomcat v8.5，如图 1-33 所示。然后，单击“应用并关闭”按钮。

图 1-33

目标运行时间

要在本地 Tomcat 服务器上运行应用，右键单击项目，选择 Run As 和 Run On Server。在窗口中选择 Tomcat 服务器，点击完成按钮(见图 1-34 )。

图 1-34

在服务器上运行

在你最喜欢的网络浏览器中输入http://localhost:8080/HelloWorldJSP/就可以看到“Hello World！”消息，如图 1-35 所示。

图 1-35

你好世界！在浏览器中

使用 Maven 打包 WAR 文件

现在，让我们在 STS 中使用 Maven 打包一个 WAR 文件。右键项目，选择运行为 ➤ Maven 安装，如图 1-36 所示。

图 1-36

作为 Maven 安装运行

一旦构建成功，您可以在控制台中用一条成功消息来验证它，如图 1-37 所示。这会生成一个 WAR 文件。

图 1-37

建立成功

刷新项目文件夹结构，展开target文件夹，找到一个名为HelloWorldJSP.war的 WAR 文件，如图 1-38 所示。

图 1-38

在目标文件夹中生成 WAR 文件

上传警告到弹性豆茎

现在，让我们在 Elastic Beanstalk 中创建一个新的应用，然后将 WAR 文件上传到其中。

在 AWS 控制台上，转到 Elastic Beanstalk 页面。图 1-39 显示了名为我的第一个弹性豆茎应用的应用。

图 1-39

弹性豆茎应用

现在让我们通过点击创建新应用按钮来创建一个全新的应用。输入应用名称为 helloworld ，如图 1-40 所示。然后，单击“创建”按钮。

图 1-40

申请信息

没有已经设置好的环境，如图 1-41 所示。

图 1-41

应用环境

通过点击“立即创建”选择环境层，创建一个环境，如图 1-41 所示。

图 1-42

按类别分组的 AWS

对于环境层，让我们使用 web 服务器环境来运行 web 应用。弹性豆茎为我们创造了服务器。接下来，单击选择按钮。现在，您需要提供环境信息，如图 1-43 所示。

图 1-43

环境信息

这里，您需要提供详细信息，比如环境和域的名称。请确保环境 URL 是唯一的；这里将其命名为 awshelloworldjsp ，表示可以使用。然后为服务器选择平台详情，如图 1-44 所示。

图 1-44

服务器平台

在这里，选择由 AWS Elastic Beanstalk 发布和管理的托管平台，并从平台下拉列表中选择 Tomcat。因此，当 Elastic Beanstalk 运行环境时，它会为您创建一个 Tomcat 服务器。

现在，您需要将 WAR 文件上传到 Elastic Beanstalk。点击选择文件，从本地系统选择 HelloWorldJSP.war 文件，如图 1-45 所示。

图 1-45

应用代码

一旦文件成功上传到 Elastic Beanstalk，点击 Create environment 按钮。

在幕后，Amazon 提供了一个服务器来配合操作系统使用。他们安装 Java 和 Tomcat，并将您的 WAR 文件部署到 Tomcat 环境中。当一切都完成时，你会得到一个绿色的复选框，表示成功，如图 1-46 所示。这里，日志确认环境成功启动。

图 1-46

健康状况良好和最近事件

单击应用的链接。页面在浏览器中打开，显示“Hello World！”(参见图 1-47 )。

图 1-47

通过点击 URL 从浏览器访问应用

这是你的新申请。WAR 文件部署在 Amazon cloud 的 Elastic Beanstalk 中，并且已经启动并运行。

确保停止任何你不需要的未使用的 AWS Elastic Beanstalk 应用。这有助于防止亚马逊收取任何过度使用费用。

摘要

本章概述了亚马逊网络服务(AWS)。您了解了一些 AWS 关键服务，比如 EC2、Elastic Beanstalk、Amazon RDS 和 Amazon Route 53。您用 Maven 创建了一个免费的 AWS 帐户、一个服务器、一个 HelloWorld JSP 应用、一个 WAR 文件，并将该文件上传到 Elastic Beanstalk。最后，您在浏览器中访问应用，看到“Hello World！”消息。

下一章在 AWS 中部署一个 Spring Boot 应用作为 REST API。

二、在 AWS 中将 Spring Boot 应用部署为 REST API

前一章提供了亚马逊 Web 服务(AWS)的概述，包括像亚马逊弹性计算云(Amazon EC2)、AWS 弹性 Beanstalk、亚马逊关系数据库服务(Amazon RDS)和亚马逊 Route 53 这样的服务。首先，您为开发人员创建了一个免费的 AWS 帐户，探索了 Elastic Beanstalk，并创建了一个服务器。然后，您创建了 HelloWorld JSP 应用。最后，您用 Maven 构建了一个 WAR 文件，并将 WAR 上传到 Elastic Beanstalk。

在本章中，您将在本地系统中创建一个 Spring Boot 应用作为 REST API。然后，使用 Maven 为我们的 Spring Boot 应用构建 JAR，并将这个 JAR 部署在 Elastic Beanstalk 中，这样任何人都可以在互联网上访问 REST API。最后，您探索来自弹性豆茎的日志。

构建一个 Spring Boot 应用作为 REST API

为什么使用 Spring Boot 作为后端框架？有许多框架可用于开发 web 应用，Spring Boot 只是其中之一。但是，如果您希望快速构建一些东西，作为 web 应用开发框架，Spring Boot 可能是首选。

和 Spring Boot 一起工作就像和 Spring 开发者一起结对编程。

—乔希·朗@斯塔布克斯曼

Spring Boot 提供生产就绪的应用和服务，任何人都可以轻松运行。Spring Boot固执己见，建议确保开发者的决策，并支持企业应用中常见的一系列非功能特性(嵌入式服务器、安全性、健康检查、指标和外部化配置)。

在本节中，您将逐步开发您的 Spring Boot 应用。如果您已经熟悉了这个构建过程，那么您可以跳到本节的末尾，看看它们是如何组合在一起的。Spring 为开始一个全新的项目提供了不同的选项。更多信息，请参考 https://spring.io/ 。

REST 简介

表述性状态转移 (REST)是一种架构风格，描述了一个系统如何与另一个系统通信或共享其状态。HTTP(超文本传输协议)可能是支持 RESTful 架构的常用协议。像POST、GET、PUT和DELETE这样的标准 HTTP 方法访问和操作 RESTful web 资源。

• POST方法通过向服务器发送数据来执行创建操作。

• 方法从指定的资源中检索数据。

• PUT方法通过向服务器发送数据来执行更新操作。

• DELETE方法执行删除操作。

有意义的 HTTP 响应状态代码总是有助于客户端利用 RESTful API。表 2-1 描述了调用 RESTful API 时可能作为服务器响应返回的几个 HTTP 状态代码。

表 2-1

HTTP 响应状态代码

|

代码

|

消息

|

描述

Two hundred	好	成功回应。请求已成功。(这是成功 HTTP 请求的标准 HTTP 响应状态代码。)
Two hundred and one	创造	成功回应。这通常是在满足了POST或PUT请求之后发送的 HTTP 响应，结果创建了一个新资源。
Two hundred and four	不满足	成功回应。这个 HTTP 响应代码意味着请求已经被成功处理，但是没有为这个请求返回任何内容。
four hundred	错误的请求	客户端错误响应。由于无效语法，无法完成请求。
Four hundred and one	未经授权的	客户端错误响应。该请求需要用户授权才能获得请求的响应。
Four hundred and three	被禁止的	客户端错误响应。服务器拒绝满足请求，因为客户端没有访问所请求内容的权限。
Four hundred and four	未发现	客户端错误响应。服务器找不到请求的资源。
Four hundred and nine	冲突	客户端错误响应。由于与服务器当前状态的资源冲突，请求无法完成。

系统需求

Spring Boot 2.0.3 .发行版要求(至少)Java 8。所以，首先需要的是 Java 8 SDK。如果您已经在系统中设置了 JDK，那么在开始之前，您应该检查系统上安装的 Java 的当前版本。

$ java -version
java version "1.8.0_101"
Java(TM) SE Runtime Environment (build 1.8.0_101-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.101-b13, mixed mode)

Spring 提供了以下三种方法来创建全新的 Spring Boot 应用。

• 使用 Spring Boot CLI 工具

• 使用 Spring IDE

• 使用 Spring Initializr ( http://start.spring.io/ )

使用 Spring 工具套件创建 Spring Boot 应用

在本章中，您将使用 STS IDE 构建一个带有 REST 端点的 RESTful 应用HelloSpringBoot。REST API 层负责处理客户端请求并生成响应。

您通过使用 Spring Tool Suite (STS)生成一个 Spring Boot 应用来创建HelloSpringBoot。STS 是最新 Eclipse 发行版的现成发行版，预装了 Spring IDE 组件。

使用 Spring Starter 项目向导创建一个 Spring Boot 应用，如图 2-1 所示。默认情况下，Spring Boot 应用在端口 8080 上运行。

图 2-1

创建 Spring Boot 应用的向导

Spring Boot 提供了首发球员。您需要提供项目相关信息，如图 2-2 所示。

图 2-2

使用 Spring Starter 项目创建 HelloSpringBoot

Spring Boot 中的 starter 是一组类路径依赖项，它们自动配置应用，使开发人员无需任何配置就能构建应用。

在这一章中，你选择 web 依赖来构建一个简单的 RESTful 服务，如图 2-3 所示。

图 2-3

在 Spring starter 中选择 web 依赖项

点击Finish按钮生成一个工作区，在您的资源中创建新的包、类和静态文件。项目的最终结构如图 2-4 所示。

图 2-4

项目结构

让我们在下一节中检查代码。

走一遍

让我们通过浏览pom.xml文件和 Java 类文件来浏览代码。先说pom.xml。

pom.xml 文件

当创建一个 Spring Boot 应用时，您在启动对话框中选择的所有依赖项在pom.xml中都是可用的，如清单 2-1 所示。pom.xml文件是构建项目的诀窍。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns:="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
      <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.5.1</version>
            <relativePath/>
      </parent>
      <groupId>com.apress.AWS</groupId>
      <artifactId>HelloSpringBoot</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      <name>HelloSpringBoot</name>
      <description>Hello Spring Boot Application</description>
      <properties>
            <java.version>11</java.version>
      </properties>
      <dependencies>
            <dependency>
                  <groupId>org.springframework.boot</groupId>
                  <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                  <groupId>org.springframework.boot</groupId>
                  <artifactId>spring-boot-starter-test</artifactId>
                  <scope>test</scope>
            </dependency>
      </dependencies>
      <build>
            <plugins>
                  <plugin>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-maven-plugin</artifactId>
                  </plugin>
            </plugins>
      </build>
</project>

Listing 2-1pom.xml

注意下面关于清单 2-1 的内容。

• 元素指定了 Spring Boot 的父 POM，它包含了通用组件的定义。

• spring-boot-starter-web 上的<dependency>元素告诉 Spring Boot 这是一个 web 应用，并让 Spring Boot 据此形成自己的观点。

在继续之前，让我们看看 Spring Boot 的意见，以及它如何使用像spring-boot-starter-web to这样的首发形成其配置意见。

HelloSpringBoot应用已经使用spring-boot-starter-web作为 Spring Boot 的网络应用启动器。并且，基于这一出发点，Spring Boot 形成了以下观点。

• 用于 REST 框架的 Spring web MVC

• JSON 绑定的 Apache Jackson

• Tomcat 嵌入式 web 服务器容器

在 Spring Boot 对您计划构建的应用的类型形成意见之后，它交付了一个 Maven 依赖项的集合，支持 POM 内容和为HelloSpringBoot应用指定的 starter。

写代码

要引导一个 Spring Boot 应用，可以从一个main(...)方法开始。最有可能的是，你可以委托给静态的SpringApplication.run()方法，如清单 2-2 所示。

package com.apress.AWS;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author RaviKantSoni
 *
 */
@SpringBootApplication
@RestController
public class HelloSpringBootApplication {

      public static void main(String[] args) {
            SpringApplication.run(HelloSpringBootApplication.class, args);
      }

      @RequestMapping("/greeting")
      public String greetingMessage() {
            return "Welcome to Hello Spring Boot Application!";
      }

}

Listing 2-2\src\main\java\com\apress\AWS\HelloSpringBootApplication.java

让我们浏览一下重要的部分。

@SpringBootApplication 注释

HelloSpringBootApplication类中的第一个注释是 Spring Boot 1.2.0 中引入的@SpringBootApplication。它添加了以下注释。

• @Configuration:用@Configuration注释标注的类可以被 Spring Boot 容器用作 Spring Bean 定义的源，这并不特定于 Spring Boot。这个类可能包含一个或多个 Spring Bean 声明，通过带有@Bean注释的注释方法实现。

• @EnableAutoConfiguration:这个注释是 Spring Boot 项目的一部分，它告诉 Spring Boot 开始使用类路径定义添加 beans。自动配置智能地猜测并自动创建和注册您可能与应用一起运行的 beans，从而简化开发人员的工作。

• 这个注释告诉 Spring Boot 寻找特定的包来扫描带注释的组件、配置和服务。

@RestController 和@RequestMapping 批注

@RestController是HelloSpringBootApplication类中的另一个注释。这是一个刻板的注释。@RequestMapping注释提供了“路由”信息，并告诉 Spring Boot 任何带有路径/greeting的 HTTP 请求都应该映射到greetingMessage()方法。

@RestController和@RequestMapping注释来自 Spring MVC(这些注释并不特定于 Spring Boot)。

主要方法

HelloSpringBootApplication类最重要的部分是main(...)方法。使用 Spring Boot 开发的应用包含 main 方法，它在内部调用 Spring Boot 的SpringApplication.run()方法来启动应用。包含一个main方法的类是主类，用@SpringBootApplication注释进行了注释。

在 STS 中运行 Spring Boot 应用

使用 Spring Starter 项目向导创建的 Spring Boot 应用有两种风格:WAR 和 JAR。该向导允许您在打包选项中选择 WAR 或 JAR。

正如乔希·朗在《春之木卫一》的一次谈话中所说，“制造罐子，不要战争。”

——https://twitter.com/springcentral/status/598910532008062976

与 WAR 相比，Spring Boot 更喜欢 JAR，因为它允许您轻松地创建独立的 JAR 打包项目，在创建的工件中添加嵌入式 web 服务器(Apache Tomcat 是默认的 web 服务器)。它帮助开发人员减少设置本地或远程 Tomcat 服务器、WAR 打包和部署的开销。

您不需要 STS 的任何特殊工具就可以在本地运行您的 Spring Boot 应用。您可以从标准的 Eclipse Java 调试工具或 STS 中选择 Run As ➤ Java 应用来运行它。与其他 IDE 相比，使用 STS 的好处是它提供了一个专用的启动程序，与其他 IDE 做同样的事情，但是 STS 在它的基础上增加了一些有用的功能。所以，让我们使用 STS 来运行 Spring Boot 应用，如图 2-5 所示。只需右击HelloSpringBoot项目，然后选择运行为 ➤ Spring Boot App 。

图 2-5

STS 中运行应用的向导

Spring Boot 应用从控制台的输出开始，如图 2-6 所示。

图 2-6

STS 控制台上的输出

如果 Spring Boot 应用成功运行，控制台上的最后一行显示Started HelloSpringBootApplication。

恭喜你！您已经使用 Spring Boot 成功设置并运行了该应用。现在在浏览器中访问http://localhost:8080/greeting就可以看到网页了，如图 2-7 。

图 2-7

从浏览器访问 REST 端点

将 Swagger UI 添加到 Spring Boot 应用中

现在前端组件和后端组件通常会隔离一个 web 应用。构建后端 API 层引入了新的挑战，这些挑战已经超出了实现端点的范围。通常，您将 REST APIs 公开为前端组件或任何第三方应用集成的后端组件。

因此，您的 REST API 文档变得更加脆弱。REST API 文档应该有良好的结构，以便它信息丰富、简洁、易读。在这种情况下，为后端 REST API 制定一个合适的规范是非常重要的。此外，参考 API 文档应该同时描述 API 中的每个变化。手动完成这项工作既耗时又繁琐，因此这一过程的自动化是不可避免的。

Swagger 支持自动生成 API 文档，它还确保对 API 所做的任何更改都可以立即提供给客户。在本节中，您将学习如何在 Spring Boot 应用中使用 Swagger 2 来生成 REST API 文档。

霸气 2 简介

Swagger 2 是一个开源项目，记录了 RESTful APIs。它是语言无关的，并且可以扩展到 HTTP 协议之外的新技术和协议。

这个 Swagger 2 版本定义了一组 HTML(超文本标记语言)、JavaScript 和 CSS 资产，以便从符合 Swagger 的 API 动态生成文档。Swagger UI 项目捆绑了这些文件集，以在浏览器上显示 API，并以 JSON 格式返回响应数据。除了呈现文档，Swagger UI 还允许其他 API 开发者或 API 消费者与 API 的资源进行交互，而无需任何 API 实现逻辑。

被理解为 OpenAPI 规范的 Swagger 2 规范有几个实现。Springfox 最近取代了 Swagger-SpringMVC (Swagger 1.2 及更老版本)，并在 Spring Boot 应用中很受欢迎。Springfox 同时支持 Swagger 1.2 和 2.0。

让我们将 Swagger 2 用于我们的 Spring Boot REST web 服务，使用 Swagger 2 规范的 Springfox 实现。

在 Maven POM 中添加依赖关系

让我们使用 Swagger 规范的 Springfox 实现。它的最新版本可以在 Maven Central 上找到。要将其添加到我们基于 Spring Boot 的项目中，您需要添加一个单独的springfox-boot-starter依赖项，如清单 2-3 所示。

<dependency>
      <groupId>io.springfox</groupId>
      <artifactId>springfox-boot-starter</artifactId>
      <version>3.0.0</version>
</dependency>

Listing 2-3Add Springfox Dependency in pom.xml

将 Swagger 2 配置到项目中

Swagger 2 的配置主要集中在 Docket bean 上。对于我们的 Spring Boot 应用，让我们在 Spring Boot 配置类文件中创建一个 Docket bean 来为我们的应用配置 Swagger 2。Springfox Docket 实例为主要的 API 配置提供了默认的配置方法。清单 2-4 显示了我们的 Spring Boot SwaggerConfig配置类。

package com.apress.AWS.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

/**
 * @author RaviKantSoni
 *
 */
@Configuration
@EnableSwagger2
public class SwaggerConfig {
      @Bean
      public Docket productApi() {
            return new Docket(DocumentationType.SWAGGER_2)
                        .select()
                        .apis(RequestHandlerSelectors.any())
                        .paths(PathSelectors.any())
                        .build();
      }

}

Listing 2-4\src\main\java\com\apress\AWS\config\SwaggerConfig.java

在这个SwaggerConfig配置类中，@EnableSwagger2注释在类中启用了 Swagger 支持。在 Docket bean 实例上调用的select()方法返回一个ApiSelectorBuilder，它提供了一种控制由 Swagger 公开的端点的方法。

在代码中，RequestHandlerSelectors和PathSelectors使用any()通过 Swagger 为我们的整个 API 制作文档。

配置验证

此时，您应该能够通过重启应用并转到http://localhost:8080/v2/api-docs来测试 Swagger 配置。

如图 2-8 所示，结果是一个带有大量键/值对的 JSON 响应，可读性不是很好。

图 2-8

Swagger JSON 输出

Swagger UI

您想要人类可读的结构化文档。Swagger UI 是一个内置的解决方案，它使得用户与 Swagger 生成的 API 文档的交互更加容易。在浏览器中，转到http://localhost:8080/swagger-ui/。

你看到的是 Swagger UI 渲染生成的文档，如图 2-9 所示。

图 2-9

Swagger API 文档页面

基本的错误控制器是 Spring MVC 附带的 API。模型显示所有的Model对象。

在 Swagger 的响应中有一个在我们的应用中定义的所有控制器的列表。点击其中任何一个都会列出 HTTP 方法有效的操作端点(DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT)，如图 2-10 所示。

图 2-10

Swagger UI 列出了 REST 端点

有关 Swagger 的更多信息，请参考官方文档页面at https://swagger.io/docs/specification/2-0/basic-structure/ 。

为 Spring Boot 项目配置服务器端口

Spring Boot 应用配置的默认端口是 8080，这意味着 Spring Boot 应用在默认端口 8080 启动嵌入式 Tomcat 服务器。您可以将此默认嵌入式服务器端口更改为任何其他端口。

AWS Elastic Beanstalk 假设 Spring Boot 应用监听端口 5000。您可以通过在 Spring Boot 应用的application.properties文件中创建一个条目来更改默认端口，如清单 2-5 所示。

server.port=5000

Listing 2-5\src\main\resources\application.properties

让我们在另一个端口构建并运行我们的 Spring Boot 应用，然后打开浏览器访问我们的应用。这一次，您没有在浏览器中使用默认端口 8080；确切地说，是 5000 端口。在浏览器中，转到http://localhost:5000/swagger-ui/。

图 2-11 显示了 Swagger UI 渲染生成的文档。

图 2-11

拥有 5000 端口的 URI

为 Spring Boot 应用构建一个 JAR

既然您已经成功地创建了一个作为 REST API 的 Spring Boot 应用，那么让我们将它部署到 AWS Elastic Beanstalk。为了实现这个目标，您需要一个我们项目的可部署单元。

在开始实际过程之前，确保您的本地系统中安装了 Apache Maven(一个用于构建和管理任何基于 Java 的项目的命令行工具)。如果您还没有安装 Maven，您可以按照maven.apache.org中的说明进行操作。

Spring Boot 应用的默认模式打包可执行 jar(也称为fat jar)。因此，JAR 被用作这个项目的可部署单元。要构建 JAR，可以使用 STS 或命令提示符。

从 STS 中右键点击HelloSpringBoot项目，然后选择 Run As ➤ Maven build ，如图 2-12 所示。

图 2-12

使用 STS 构建 Maven

这将打开编辑配置窗口。在目标文本框中输入包。点击应用，然后点击运行，如图 2-13 所示。

图 2-13

编辑配置窗口

HelloSpringBoot 应用开始构建。您会看到整个 Maven 构建运行，如图 2-14 所示。

图 2-14

在 STS 中的控制台上构建输出

在项目的target文件夹中已经创建了一个名为HelloSpringBoot-0.0.1-SNAPSHOT.jar的 JAR。

Building jar: E:\Apress\workspace\AWS\HelloSpringBoot\target\HelloSpringBoot-0.0.1-SNAPSHOT.jar

要使用命令提示符构建 JAR，请转到您的项目目录(您创建 Spring Boot 项目的位置)并复制路径。在命令提示符下将工作目录改为项目路径，如图 2-15 所示。

图 2-15

命令提示符下项目路径的目录

在命令提示符下使用以下命令构建项目。

E:\Apress\workspace\AWS\HelloSpringBoot>mvn clean install

这将开始构建应用。名为HelloSpringBoot-0.0.1-SNAPSHOT.jar的 JAR 文件已经创建，如图 2-16 所示。

图 2-16

在命令提示符下成功构建

您需要获取生成的 JAR 文件并将其部署到 AWS Elastic Beanstalk。

在 AWS Elastic Beanstalk 中部署 Spring Boot 应用

您已经在本地创建并运行了 HelloSpringBoot REST API，并在target文件夹中创建了一个 JAR 文件。现在，让我们部署到 AWS Elastic Beanstalk。

使用 AWS 凭证登录到 AWS 管理控制台，并选择 Elastic Beanstalk 作为服务。在章节 1 中已经创建了两个应用，分别命名为My First Elastic Beanstalk Application和helloworld(见图 2-17 )。

图 2-17

弹性豆茎应用

现在让我们为我们的 Spring Boot REST API 创建一个全新的应用。首先，点击创建新应用按钮，并输入 HelloSpringBoot 应用名称。接下来，单击 Create 按钮为应用创建一个新环境。然后，点击立即创建一个链接。选择 Web 服务器环境作为环境层，然后单击选择按钮。

在环境信息页面上，将域命名为HelloSpringBoot，并检查可用性。然后选择 Java 作为托管平台，如图 2-18 所示。

图 2-18

Java 平台

最后，通过从项目的target文件夹(例如，在作者的本地是E:\Apress\workspace\AWS\HelloSpringBoot\target\HelloSpringBoot-0.0.1-SNAPSHOT.jar)中选择 JAR 文件来上传您的代码，然后点击创建环境按钮。

Elastic Beanstalk 在启动过程中协调支持环境所需的所有 AWS 资源的创建和部署。这包括但不限于启动两个 EC2 实例，创建一个负载平衡器，并创建一个安全组，如图 2-19 所示。

图 2-19

在 Elastic Beanstalk 中创建 Hellospringboot-env

一旦创建了环境并部署了资源，请注意健康报告为严重(参见图 2-20 )。这是因为 Spring Boot 应用仍然需要一些配置。

图 2-20

Spring Boot 应用的严重健康状况

AWS Elastic Beanstalk 假设应用监听端口 5000。要修复这种差异，请更改 Spring Boot 应用监听的端口。因此，您需要在 Elastic Beanstalk 环境中指定SERVER_PORT环境变量，并将值设置为 5000。

转到您环境中的配置页面。在配置下，点击编辑图标，如图 2-21 所示。

图 2-21

Spring Boot 应用严重健康

在环境属性中，您可以看到，当 Elastic Beanstalk 被配置为使用 Java 平台时，它已经设置了一些环境变量。

要更改 Spring Boot 应用监听的端口，添加一个新的环境变量 SERVER_PORT，值为 5000，如图 2-22 所示。

图 2-22

软件配置的环境属性

一旦单击“应用”,配置更改就会传播到应用服务器。应用重新启动。当它重新启动时，它通过环境变量获得新的配置。一分钟后，您会在仪表板上看到一个健康的应用，如图 2-23 所示。

图 2-23

健康状况良好

在云中测试作为 REST API 的 Spring Boot 应用

现在，让我们在 AWS 中测试部署的 REST API 端点。使用您在环境中配置的 URL 来访问服务。对于这个例子，指定的 URL 是 http://hellospringboot-env-1.eba-qppppkce.us-east-2.elasticbeanstalk.com 。

对于第一个测试，在浏览器中，使用 HTTP GET 在 http://hellospringboot-env-1.eba-qppppkce.us-east-2.elasticbeanstalk.com /greeting 处与 URI 打招呼。该服务响应一条欢迎问候消息，如图 2-24 所示。

图 2-24

从浏览器访问部署在云上的 REST API

接下来，从浏览器进入 http://hellospringboot-env-1.eba-qppppkce.us-east-2.elasticbeanstalk.com/swagger-ui/ 的 Swagger UI 仪表盘，如图 2-25 所示。

图 2-25

从浏览器访问 Swagger-UI 仪表板

探索来自弹性豆茎的原木

你可以从弹性豆茎探索 Spring Boot 日志。选择日志 ➤ 请求日志，从每个 EC2 实例中检索一个日志的最后 100 行或整组日志，如图 2-26 所示。

图 2-26

AWS 弹性豆茎原木

单击下载后，您会看到整个 Spring Boot 日志是可见的。

摘要

在本章中，您将 REST API 部署到了 Elastic Beanstalk。您创建了一个 Spring Boot 项目应用作为 REST API，然后为项目生成了一个 JAR 文件。您将这个 JAR 部署到 Elastic Beanstalk，解决了 AWS 中的服务器问题。最后，您访问了云中部署的应用。

在下一章中，您将使用 RDS 在 AWS 中部署一个 MySQL 数据库。

三、将 MySQL 作为数据库部署在带有 RDS 的 AWS 中

在第二章中，您将 REST API 部署到 AWS Elastic Beanstalk。您创建了一个 Spring Boot 应用作为 REST API，然后您生成了我们项目的 JAR 文件。您能够将 JAR 文件部署到 Elastic Beanstalk，并解决了 AWS 上的服务器问题以制作应用。最后，您能够访问部署在 AWS 云上的应用。

Amazon RDS 使设置和操作 MySQL 数据库变得容易，并使在 Amazon 云中扩展 MySQL 部署变得容易。自我管理数据库会带来很多挑战，并且需要维护。本章介绍了 Amazon 关系数据库服务(RDS ),您将学习如何部署它。

如果你看一下第二章的应用架构，Elastic Beanstalk 是我们基于 Java 的 Spring Boot 应用的部署地。现在让我们使用 Amazon RDS，它是云中的一个数据库。MySQL 运行在 AWS 上。在 AWS 中创建和配置了一个 MySQL 数据库的实例。表也是在 MySQL 数据库中创建的。

亚马逊 RDS(亚马逊关系数据库服务)简介

数据可以被理解为不同信息单元的集合，这些信息单元可以被转换成高效移动和处理所需的形式。数据库可以定义为结构化数据的有组织的集合，以便于访问、管理和更新。简单地说，数据库就是存储数据的地方。

Amazon RDS 是一个 web 服务，允许您在 Amazon cloud 上快速部署和扩展关系数据库。一旦部署了数据库，就可以使用 MySQL Workbench、Oracle SQL Developer 或其他管理工具来管理它。AWS 也支持像 MongoDB 这样的 NoSQL 数据库。

有关亚马逊 RDS 的更多信息，请参考 https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/Welcome.html 。

在 AWS 中创建 RDS 数据库的实例

让我们在 AWS 管理控制台上注册，开始配置 RDS MySQL 环境。选择所有服务中数据库部分下的 RDS，如图 3-1 所示。

图 3-1

所有服务中数据库部分下的 RDS

您将被重定向到 Amazon RDS 仪表板页面，如图 3-2 所示。此页面提供了有关您正在使用的资源的信息。让我们通过点击创建数据库按钮来创建一个 Amazon 关系数据库的实例。

图 3-2

亚马逊 RDS 仪表板

将打开一个新页面，您可以在其中定义数据库创建方法和其他选项。让我们开始创建一个数据库。

首先，从引擎选项中选择数据库引擎，如图 3-3 所示。有很多选项可用，但是让我们使用 MySQL 数据库引擎。MySQL 是一个广泛使用的开源关系数据库管理系统。MySQL 主要用于 web 数据库。

图 3-3

要选择的引擎选项

如图 3-4 所示，单击复选框仅启用 RDS 免费使用层的选项，这允许您在 AWS 云中免费使用数据库。然后单击下一步按钮。

图 3-4

RDS 免费使用层

接下来，指定数据库详细信息，如下图 3-5 所示。

图 3-5

指定数据库详细信息

保留许可证模型和数据库引擎版本的默认值。选中该框以仅启用 RDS 空闲层的选项。在 DB 实例类中，为空闲层保留默认的选定值db.t2.micro。

数据库实例标识符是您为查找或引用数据库实例而创建的唯一名称。接下来，为数据库提供一个合适的名称；我们用spring-aws-db，如图 3-6 。

图 3-6

设置数据库详细信息

同样，提供主用户名和密码。为了简单起见，我们对两者都使用了springaws,但是您可以使用您想要的任何值。您可以在以后使用这个用户名和密码连接到 MySQL 实例，所以要保护好这些凭证。然后单击下一步按钮。

最后，您需要配置一些高级设置，这些设置对于设置 RDS MySQL 环境至关重要，如图 3-7 所示。

图 3-7

配置高级设置

在“网络和安全”部分保留所有默认值。确保数据库实例的公共可访问性为 Yes。这允许数据库实例在互联网上可用，并与其他主机连接。

接下来，数据库选项包括名称、端口等，如图 3-8 所示。保持所有默认值不变。端口号为 3306，这是默认端口。其他选项也可用。

图 3-8

数据库选项

点击创建数据库按钮，启动亚马逊 RDS 数据库实例，如图 3-9 所示。

图 3-9

启动 Amazon RDS 数据库实例

您会看到您的数据库实例正在被创建，如图 3-10 所示。

图 3-10

Amazon RDS 数据库实例创建状态

您的数据库实例通常需要几分钟才能启动。

配置亚马逊 RDS

当前状态显示您在 AWS 云中有一个可用的数据库实例，它是作为 RDS 数据库服务器的实例创建的。不幸的是，这个数据库实例是空的，因为在 RDS 数据库实例中没有可用的数据库模式、表或数据。

您需要为关系数据库服务做一些配置工作，将它连接到 MySQL Workbench，并访问它。作为开发过程，第一件事是为入站连接规则配置安全性。然后，您需要用 MySQL Workbench 测试数据库连接。

在继续之前，让我们检查 Amazon RDS 数据库实例的状态。点击亚马逊 RDS 下的数据库，如图 3-11 所示。

图 3-11

数据库实例状态

在这里，您可以看到数据库实例spring-aws-db被添加到列表中。它的状态是可用，这表明数据库已经创建并可供使用。单击数据库表中的spring-aws-db链接。图 3-12 显示了总结。

图 3-12

Amazon RDS 数据库实例摘要

在这里，您可以看到关于spring-aws-db数据库实例的信息。类是db.t2.micro，引擎是 MySQL 社区，状态可用。

第一步。为入站连接规则配置安全性

首先，您需要为入站连接规则配置安全组规则。向下滚动到安全组规则部分，如图 3-13 所示。

图 3-13

安全组规则

入站规则定义了服务器上允许的流量以及谁可以连接到数据库实例。点击rds-launch-wizard进入 CIDR/IP -入站，重定向到安全组信息页面，如图 3-14 所示。

图 3-14

安全组

在该页面的底部，您会看到名为“详细信息”、“入站规则”、“出站规则”和“标签”的选项卡，如图 3-15 所示。

图 3-15

rds-启动-向导

点击入库规则页签，如图 3-16 所示。

图 3-16

入站规则

您会看到数据库只能从 IP 地址 59.99.65.121/32.访问，您需要在这里做一些修改。点击编辑入站规则按钮，重定向到编辑入站规则页面。在这里您可以编辑可以访问亚马逊 RDS MySQL 数据库实例的 IP 地址，如图 3-17 所示。

图 3-17

编辑入站规则

您可以确定可以到达数据库实例的流量。从 Source 下拉列表中选择 Anywhere 选项，如图 3-18 所示。

图 3-18

从源下拉列表中选择任意位置

现在，任何人都可以找到或连接到数据库实例，但是他们仍然需要提供正确的用户 ID 和密码。Anywhere source 选项有利于开发和测试，但是建议只允许从 Elastic Beanstalk 应用的 IP 地址进行生产访问。

点击保存规则按钮。现在可以看到入库规则已经设置好了，如图 3-19 所示。

图 3-19

入站规则中的更新源

这些更新的入站规则允许从任何地方连接。

第二步。用 MySQL Workbench 测试 Amazon RDS 数据库实例连接

一旦成功创建了 Amazon RDS MySQL 数据库实例，并且完成了所有必要的配置，第二步就是测试 RDS 数据库实例与 MySQL Workbench 的连接。

返回到浏览器中的上一页。在数据库部分，点击连接&安全选项卡，如图 3-20 所示。

图 3-20

入站规则中的更新源

在连接和安全选项卡中，有一个名为端点&端口的部分。端点指示数据库实例的主机名，您可以在 MySQL Workbench 中使用它来连接 RDS 数据库实例。在这种情况下，它是

spring-aws-db.cpsoyj7kwlno.us-east-2.rds.amazonaws.com

Note

有关 MySQL Workbench 安装指南，请参考附录 A。

将 MySQL Workbench 连接到 Amazon RDS MySQL 数据库实例

在本地系统中打开 MySQL Workbench。然后点击 + 图标，创建一个 MySQL 连接，如图 3-21 所示。

图 3-21

MySQL 工作台

这将打开设置新连接向导，如图 3-22 所示。

图 3-22

安装新连接向导

对于连接名称，输入值spring-aws-db。在主机名字段中，默认值是 127.0.0.1，即本地主机。从 AWS 管理控制台用以下 RDS 数据库实例主机名替换默认 IP 地址。

spring-aws-db.cpsoyj7kwlno.us-east-2.rds.amazonaws.com

保持端口号不变，因为 3306 是 AWS 控制台中数据库实例的端口。

使用您为 RDS 数据库实例创建的用户名和密码。所以，输入springaws作为用户名，如图 3-23 。点击储存在金库按钮输入密码。

图 3-23

安装新连接向导中的更新值

输入springaws，然后点击确定，如图 3-24 所示。

图 3-24

存储连接密码

单击测试连接按钮。您应该会收到一个通知，告诉您已经成功建立了 MySQL 连接，如图 3-25 所示。

图 3-25

成功建立了 MySQL 连接

这就是您如何知道数据库实例在 AWS 云中可用并运行的原因。您可以使用本地 MySQL 工作台来连接它。点击连接向导中的 OK 按钮，工作台将列出数据库连接的详细信息，如图 3-26 所示。

图 3-26

带有 Amazon RDS 数据库连接详细信息的 MySQL 工作台

在 RDS 数据库实例中创建一个表

MySQL 设置正确。您可以通过点击spring-aws-db来访问远程 RDS 数据库实例，这将在 SQL 编辑器中打开，如图 3-27 所示。

图 3-27

spring-aws-db 的 SQL 编辑器实例

目前，没有可用于 RDS 数据库实例的数据库、表或数据。您需要运行一些脚本来提供您可以查询的任何内容。

首先，让我们使用CREATE DATABASE命令创建一个数据库。创建新数据库的语法是CREATE DATABASE DB_NAME，其中DB_NAME是您想要创建的数据库名称。例如，要创建一个名为UserRegistration的数据库，在 query 选项卡中键入以下查询并运行它。

CREATE DATABASE UserRegistration;

一旦查询成功执行，Schema 选项卡应该显示UserRegistration数据库，如图 3-28 所示。

图 3-28

数据库已创建

现在，让我们在UserRegistration数据库中创建一个用户表。表格以结构化格式显示和存储记录。CREATE TABLE命令在现有数据库中创建一个新表。创建 MySQL 表的语法如清单 3-1 所示。

CREATE TABLE [IF NOT EXISTS] table_name(
    column_1 datatype(size) [NULL | NOT NULL],
    column_2 datatype(size) [NULL | NOT NULL],
    column_3 datatype(size) [NULL | NOT NULL],
    ........,
    column_N datatype(size) [NULL | NOT NULL],
    table_constraints
);

Listing 3-1Syntax to Create MySQL Table

table_name是表的名称，在 MySQL 数据库中应该是唯一的。当数据库中已经存在相同的表名时，IF NOT EXISTS子句有助于防止错误。

column_指定列名。datatype指定该列的数据类型，使用逗号运算符分隔各列。

table_constraints指定表的约束，如主键、外键和唯一键。例如，要创建一个名为users的表，在 query 选项卡中输入清单 3-2 中所示的查询并运行它。

use UserRegistration;

CREATE TABLE [IF NOT EXISTS]  users(
    id int NOT NULL AUTO_INCREMENT,
    first_name varchar(45) NOT NULL,
    last_name varchar(45) NOT NULL,
    address varchar(35) NOT NULL,
    age int NOT NULL,
    created_date DATE,
    PRIMARY KEY (id)
);

Listing 3-2Create Users Table in UserRegistration Database

在这里，use UserRegistration命令选择在哪个数据库下创建表。一旦查询成功执行，UserRegistration数据库应该显示users表，如图 3-29 所示。

图 3-29

表已创建

现在，让我们将一些数据插入到users表中。INSERT INTO命令在表格中添加或存储数据。将数据插入表格的语法如清单 3-3 所示。

INSERT INTO DATABASE.table_name (column_1, column_2,... column_N)
VALUES
( value_1, value_2,...value_N );

Listing 3-3Syntax to Insert Data into the Table

首先，指定数据库名称，后跟一个点(。)，后跟表名，然后是逗号分隔的列列表。接下来，在VALUES子句后提供对应于列名的值列表。例如，要在users表中插入数据，在 query 选项卡中键入清单 3-4 中所示的查询，然后运行它。

INSERT INTO UserRegistration.users (first_name, last_name, address, age, created_date)
VALUES
('Ravi', 'Soni', 'Sasaram-Bihar-India', 34, '2021-07-04');

Listing 3-4Insert Data in users Table in UserRegistration Database

MySQL 中默认的日期格式是 YYYY-MM-DD，其中 YYYY 用四位数表示年，MM 用两位数表示月，DD 用两位数表示日。

一旦成功执行了插入查询，就可以使用SELECT命令从 MySQL 数据库中获取数据。从数据库返回的数据存储在一个名为result-set的结果表中。从 MySQL 表中获取数据的SELECT命令语法如清单 3-5 所示。

SELECT column_1, column_2, ...
FROM
DATABASE.table_name;

Listing 3-5Syntax of SELECT Command to Fetch Data from Database

例如，要从users表中获取数据，在 query 选项卡中键入清单 3-6 中所示的查询，然后运行它。

SELECT first_name, last_name, address, age, created_date
FROM
UserRegistration.users;

Listing 3-6Fetch Data from UserRegistration Database

一旦SELECT查询成功执行，结果如图 3-30 所示。

图 3-30

表已创建

摘要

本章介绍了亚马逊 RDS。首先，您在 AWS 中创建了一个 MySQL 数据库实例并配置了数据库。然后，您在数据库中创建了一个表，并使用 MySQL Workbench 将数据插入其中。

下一章概述了 Spring Boot 应用中的 CRUD 操作，您将在 AWS 中部署与 MySQL 对话的 Spring Boot 应用。

四、在 AWS 中部署一个与 MySQL 通信的 Spring Boot 应用

第三章介绍了 Amazon RDS，您学习了如何在 Amazon 云上部署它。您在 AWS 中创建了一个 Amazon RDS MySQL 数据库的实例，并配置了该数据库。您还在这个数据库中创建了表，并使用 MySQL Workbench 向其中插入了数据。

在第二章中，您创建并部署了一个 Spring Boot REST API，其中包含 AWS Elastic Beanstalk 的一些端点。然而，真正的应用并不是这样运行的。真正的应用使用实时数据库来执行 CRUD 操作。

本章创建了一个 Spring Boot 应用作为 REST API，从本地系统与 Amazon RDS MySQL 数据库进行对话。

创建 Spring Boot 用户注册应用与 MySQL 数据库对话

在本节中，您将使用 Spring Initializr ( http://start.spring.io/ )创建UserRegistrationApp Spring Boot 应用。这里选择 Web、JPA、MySQL、Lombok 作为依赖，如图 4-1 所示。

图 4-1

使用 spring initialize 创建用户注册应用

表 4-1 列出了所有的UserRegistrationApp设置。

表 4-1

项目相关详细信息

|

字段

|

值

组	com . apress . aws 网站
假象	用户注册 App
名字	用户注册 App
描述	用户注册申请
包名	com . apress . aws 网站
包装	冲突
Java 版本	Eleven
语言	爪哇
项目	专家

输入项目元数据后，点击 Generate 按钮下载UserRegistrationApp.zip文件。将其解压缩，并作为 Maven 项目导入到 Spring Source Tool (STS) IDE 中。最初的项目结构如图 4-2 所示。

图 4-2

项目结构

让我们浏览代码以获得更多信息，并探索在pom.xml中定义的 Maven 依赖项。

pom.xml 中的 Maven 依赖项

创建 Spring Boot 应用时在 Spring Initializr 中选择的所有必需的依赖项都可以在pom.xml中找到，如清单 4-1 所示。pom.xml文件是构建 Spring Boot 应用的诀窍。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns:="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
      <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.5.2</version>
            <relativePath/>
      </parent>
      <groupId>com.apress.AWS</groupId>
      <artifactId>UserRegistrationApp</artifactId>
      <version>0.0.1-SNAPSHOT</version>
      <name>UserRegistrationApp</name>
      <description>User Registration Application</description>
      <properties>
            <java.version>11</java.version>
      </properties>
      <dependencies>
            <dependency>
                  <groupId>org.springframework.boot</groupId>
                  <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                  <groupId>org.springframework.boot</groupId>
                  <artifactId>spring-boot-starter-data-jpa</artifactId>
            </dependency>
            <dependency>
                  <groupId>mysql</groupId>
                  <artifactId>mysql-connector-java</artifactId>
                  <scope>runtime</scope>
            </dependency>
            <dependency>
                  <groupId>org.projectlombok</groupId>
                  <artifactId>lombok</artifactId>
                  <optional>true</optional>
            </dependency>
            <dependency>
                  <groupId>org.springframework.boot</groupId>
                  <artifactId>spring-boot-starter-test</artifactId>
                  <scope>test</scope>
            </dependency>
      </dependencies>
      <build>
            <plugins>
                  <plugin>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-maven-plugin</artifactId>
                        <configuration>
                              <excludes>
                                    <exclude>
                                          <groupId>org.projectlombok</groupId>
                                          <artifactId>lombok</artifactId>
                                    </exclude>
                              </excludes>
                        </configuration>
                  </plugin>
            </plugins>
      </build>
</project>

Listing 4-1pom.xml

此外，为 Swagger UI 用 Springfox 依赖项更新pom.xml，如清单 4-2 所示。

<dependency>
      <groupId>io.springfox</groupId>
      <artifactId>springfox-boot-starter</artifactId>
      <version>3.0.0</version>
</dependency>

Listing 4-2Add Springfox Dependency in pom.xml

龙目岛项目

您在创建项目时选择了 Lombok 依赖项。让我们看看龙目岛项目的主要目标。“Project Lombok 是一个小型 Java 库，可以像 Eclipse、IntelliJ、STS 等一样插入到您的 IDE 中。此外，它还可以插入 Maven、Ant 等构建工具。Lombok 库通过再次[防止您编写]另一个 getter、setter、toString 或 equals 方法来减少样板 Java 代码的数量。这种实现是在编译时自动完成的。”( https://projectlombok.org

Project Lombok 通过使用@Data Lombok 自动为对象生成getter, setter, toString和equals方法。下面是将 Lombok Java 库插入 STS IDE 的步骤。

图 4-3

. m2 目录下的 Lombok JAR 文件

1. 对于 STS IDE，获取 Lombok 可执行 JAR 文件。

2. 在 Spring Boot 项目中做 Maven 构建。图 4-3 显示龙目瓶在\.m2\repository\org\projectlombok\lombok\1.18.20\。

图 4-4

Lombok 安装程序 UI

1. 双击Lombok.jar打开安装程序界面。指定 STS.exe 路径的位置，然后点击安装/更新按钮，如图 4-4 所示。

图 4-5

Lombok 安装成功

1. 您应该会看到一条“安装成功”的消息，如图 4-5 所示。点击退出安装程序button退出安装程序。

图 4-6

带有 Lombok 细节的 Spring 工具套件

1. 重新启动 STS IDE 以确保 Lombok 配置正确。在 STS 中通过进入帮助选项并点击关于选项来验证这一点，如图 4-6 所示。

应用属性

您需要配置如何连接到 Amazon RDS MySQL 数据库。在第三章中，您捕获了 MySQL 数据库信息，比如 URL、用户名和密码，您在 MySQL 工作台与 Amazon RDS MySQL 数据库实例的连接中使用了这些信息。

让我们向/src/main/resources/application.properties文件添加代码，如清单 4-3 所示。

server.port=5000
# MySQL database settings
spring.datasource.url=jdbc:mysql://spring-aws-db.cpsoyj7kwlno.us-east-2.rds.amazonaws.com:3306/UserRegistration
spring.datasource.username=springaws
spring.datasource.password=springaws
# db-creation settings
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.format_sql=true

Listing 4-3/src/main/resources/application.properties

在这里，您可以配置数据源 URL、用户名和相应的密码，以便连接到 MySQL 数据库。spring.jpa.hibernate.ddl-auto可以是无、更新、创建或创建-删除。

• none是 MySQL 的默认值。它表示没有对数据库结构进行任何更改。

• update指示 Hibernate 根据给定的实体结构改变数据库。

• create指示 Hibernate 在应用每次重启时创建数据库，但在SessionFactory关闭时不删除它。

• create-drop指示 Hibernate 在应用每次重启时创建数据库，并在SessionFactory关闭时删除它。

在application.properties文件中，配置ddl-auto = update以确保每当应用重启时，Hibernate 都会将数据库中的表与类中声明的实体进行比较。如果实体结构中有任何更改，这些更改将在数据库中更新。

域实现:UserDTO 实体类

在UserRegistrationApp项目中，您创建了一个名为UserDTO的 DTO(数据传输对象)类，对应于com.apress.AWS.dto子包中的用户域对象。UserDTO类只包含数据。当关注点分离时，它在应用的不同层之间传输数据。

您可以用 JPA (Java Persistence API)注释来注释UserDTO类，这允许使用 JPA 技术轻松地持久化和检索它。对 JPA 的正式概述超出了本书的范围。

让我们实现UserDTO实体类，如清单 4-4 所示。

package com.apress.AWS.dto;

import java.time.LocalDateTime;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

import lombok.Data;

@Entity
@Table(name = "users")
@Data
public class UserDTO {

      @Id
      @GeneratedValue(strategy = GenerationType.AUTO)
      @Column(name = "id", nullable = false)
      private Long id;
      @Column(name = "first_name")
      private String firstName;
      @Column(name = "last_Name")
      private String lastName;
      @Column(name = "address")
      private String address;
      @Column(name = "age")
      private Integer age;
      @Column(name = "created_date")
      private LocalDateTime createdDate;

}

Listing 4-4\src\main\java\com\apress\AWS\dto\UserDTO.java

UserDTO类有六个属性:id, firstName, lastName, address, age,和createdDate。用@Entity注释对UserDTO类进行了注释，使其成为一个 JPA 实体。这个实体类也用@Table注释来定义表名为Users。用@Id注释对UserDTO中的id属性进行注释，使其成为主键。id属性已经用@GeneratedValue注释进行了注释，表示 ID 值应该自动生成。id属性使用@Column注释进行注释，以指定字段或属性映射到的列的详细信息。其他五个属性用@Column注释进行了注释。

使用了@Data Lombok 注释，所以您不必为属性创建 getter 和 setter，在编译时，它是自动生成的。下一步是提供存储库实现。

存储库实现:UserJpaRepository

数据访问对象(DAO)设计模式通过提供业务层(服务)和数据访问操作之间的分离来支持关注点分离，如图 4-7 所示。

图 4-7

关注点分离

DAO 层位于业务层和数据库之间，在数据库中执行 CRUD(创建、检索、更新、删除)操作。为了支持JpaRepository，您需要将清单 4-5 中所示的 Spring Data JPA 依赖项添加到pom.xml文件中。

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

Listing 4-5Spring Data JPA Dependency

清单 4-6 通过扩展org.springframework.data.jpa.repository.JpaRepository接口创建了一个名为UserJpaRepository的存储库接口，帮助将UserDTO域对象持久化到关系数据库中。

package com.apress.AWS.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.apress.AWS.dto.UserDTO;

@Repository
public interface UserJpaRepository extends JpaRepository<UserDTO, Long> {

}

Listing 4-6\src\main\java\com\apress\AWS\repository\UserJpaRepository.java

在清单 4-6 中，JpaRepository接口接受一个域对象。域对象的标识符字段是 UserDTO 和 Long。它的泛型参数是 T 和 ID。UserJpaRepository接口继承了JpaRepository提供的所有 CRUD 方法。

接下来，让我们创建一个自动连接UserJpaRepository的Service类。

服务实现:用户服务

让我们通过创建一个名为UserService的Service类来开始服务实现，如清单 4-7 所示，其中调用了UserJpaRepository接口的 CRUD 方法来处理 SQL 操作。

package com.apress.AWS.service;

import java.util.List;

import javax.transaction.Transactional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.apress.AWS.dto.UserDTO;
import com.apress.AWS.repository.UserJpaRepository;

@Service
@Transactional
public class UserService {

      @Autowired
      private UserJpaRepository useRepository;

      public List<UserDTO> listAll() {
            return useRepository.findAll();
      }

      public void save(UserDTO user) {
            useRepository.save(user);
      }

      public UserDTO get(Long id) {
            return useRepository.findById(id).get();
      }

      public void delete(Long id) {
            useRepository.deleteById(id);
      }

}

Listing 4-7\src\main\java\com\apress\AWS\service\UserService.java

这个UserService类使用自动绑定UserJpaRepository的@Autowired注释。

接下来，让我们创建一个 REST 控制器类来定义不同的 REST 端点，以检索和操作UserDTO域对象。

REST 控制器实现:UserRegistrationController

让我们创建一个名为UserRegistrationController的 Spring REST 控制器，并实现不同的 REST API 端点来执行 CRUD 操作。清单 4-8 是UserRegistrationController类的代码实现。

package com.apress.AWS.controller;

import java.util.List;
import java.util.NoSuchElementException;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.apress.AWS.dto.UserDTO;
import com.apress.AWS.service.UserService;

import lombok.extern.slf4j.Slf4j;

@Slf4j
@RestController
@RequestMapping("/api/")
public class UserRegistrationController {

      @Autowired
      private UserService userService;

      // URI - /api/users
      @GetMapping(value = "users")
      public ResponseEntity<List<UserDTO>> istAllUsers() {
            List<UserDTO> users = this.userService.listAll();
            return new ResponseEntity<List<UserDTO>>(users, HttpStatus.OK);
      }

      // URI - /api/user/id/1
      @GetMapping("user/id/{id}")
      public ResponseEntity<UserDTO> getUserById(@PathVariable(name = "id") final Long userId) {
            try {
                  final UserDTO user = this.userService.get(userId);
                  return new ResponseEntity<UserDTO>(user, HttpStatus.OK);
            } catch (NoSuchElementException e) {
                  return new ResponseEntity<UserDTO>(HttpStatus.NOT_FOUND);
            }
      }

      // URI - /api/user/save
      @PostMapping(value = "user/save")
      public ResponseEntity<UserDTO> save(@RequestBody UserDTO user) {
            this.userService.save(user);
            return new ResponseEntity<UserDTO>(user, HttpStatus.CREATED);
      }

      // URI - /api/user/delete/id/1
      @DeleteMapping("user/delete/id/{id}")
      public ResponseEntity<UserDTO> delete(@PathVariable(name = "id") final Long userId) {
            this.userService.delete(userId);
            return new ResponseEntity<UserDTO>(HttpStatus.NO_CONTENT);
      }

}

Listing 4-8\src\main\java\com\apress\AWS\controller\UserRegistrationController.java

这里，UserRegistrationController类用@RestController注释进行了注释。定义了@RequestMapping("/api")，这表明所有 REST API 端点 URL 都以/api开头，它将传入的 HTTP 请求映射到处理程序方法！

@Autowired注释将UserService自动连接到 RESTful 控制器。表 4-2 探究了在UserRegistrationController类中定义的不同 REST 端点来检索和操作UserDTO。

表 4-2

UserRegistrationController 类中定义的 REST 终结点

|

标注

|

上呼吸道感染

|

描述

@GetMapping	/API/用户	检索数据库中所有可用的用户
@PostMapping	/API/用户/保存	在数据库中创建新用户
@GetMapping ("/ ")	/api/user/id/	基于 ID 检索单个用户
@ DeleteMapping	/api/user/delete/id/	基于 ID 删除单个用户

现在，使用 Maven 构建来构建UserRegistrationApp,并在本地运行它来测试定义的 REST 端点。

在本地运行并测试 UserRegistrationApp

要在本地系统中使用 STS IDE 运行UserRegistrationApp，右击com.apress.AWS包下的UserRegistrationAppApplication.java类，然后点击运行为 ➤ Spring 引导 App ，如图 4-8 所示。

图 4-8

使用 STS IDE 运行 UserRegistrationApp

一旦UserRegistrationApp启动成功，STS 控制台的最后一行应该显示Started UserRegistrationAppApplication，如图 4-9 所示。

图 4-9

STS 控制台上的输出

现在，是时候使用 Postman ( www.postman.com )测试 REST API 了。您在第三章中使用 MySQL Workbench 向数据库添加了数据。您应该在 REST API 调用期间获得这些数据。

检索所有用户:/API/用户

让我们测试第一个 REST 端点来检索所有用户。在您的本地系统中启动 Postman 工具，选择 GET 作为请求类型，并输入http://localhost:5000/api/users来检索和显示所有用户数据。您应该会看到一个 200 OK HTTP 状态，如图 4-10 所示。

图 4-10

检索所有用户

检索单个用户:/api/user/id/

现在，让我们测试另一个 REST 端点，根据 id 检索单个用户。为了测试这个 REST 端点，启动 Postman，选择 GET 作为请求类型，并输入 URL ( http://localhost:5000/api/user/id/1)来检索和显示单个用户数据。您应该会看到一个 200 OK HTTP 状态，如图 4-11 所示。

图 4-11

检索单个用户

创建新用户:/api/user/save

接下来，让我们测试 REST 端点，在数据库中创建一个新用户。启动 Postman，选择 POST 作为请求类型，输入http://localhost:5000/api/user/save。点击 Body 单选按钮，然后选择 raw 。从下拉列表中，选择 JSON (application/json)作为内容类型头。在请求体中使用 JSON 数据，如清单 4-9 所示，并点击 Send。

{
      "last_name": "Soni",
      "firstName": "Namrata",
      "address": "Bangalore-India",
      "age": 25,
      "createdDate": "2021-07-04T00:00:00"
}

Listing 4-9JSON Data in the Body to Create a New User

POST 请求成功完成后，数据库中会创建一个新用户，响应 HTTP 状态为 201 Created，如图 4-12 所示。

图 4-12

创建新用户

删除现有用户:/api/user/delete/id/

要测试的最后一个端点根据 ID 从数据库中删除一个现有用户。为了测试这个 REST 端点，启动 Postman，选择 DELETE 作为请求类型，并输入 URL ( http://localhost:5000/api/user/id/2)来删除带有id=1的现有用户。成功完成删除请求后，该用户将从数据库中删除。删除用户后的响应 HTTP 状态为 204 无内容，如图 4-13 所示。

图 4-13

删除现有用户

Swagger UI: API 文档

在浏览器中，打开http://localhost:8080/swagger-ui/处的 Swagger UI 页面。你会看到生成的 API 文档，如图 4-14 所示。

图 4-14

Swagger API 文档页面

user-registration-controller在申请中定义。单击它会列出 REST 端点及其有效的 HTTP 方法。单击模型显示模型结构。图 4-15 显示了定义的 REST 端点和 UserDTO 模型结构。

图 4-15

Swagger UI 列出了 REST 端点

为 Spring Boot 应用构建一个 JAR

要从命令提示符下为 Spring Boot 应用构建 JAR，请转到创建 Spring Boot 项目的项目目录，并复制项目路径。现在，在命令提示符下将工作目录更改为项目路径。使用在命令提示符下执行的以下命令构建项目，如图 4-16 所示。

图 4-16

从命令提示符构建 JAR

E:\Apress\workspace\AWS\UserRegistrationApp>mvn clean install

这开始构建UserRegistrationApp项目。一旦构建成功，就会通知您名为UserRegistrationApp-0.0.1-SNAPSHOT.jar的 JAR 文件已经创建，如图 4-17 所示。

图 4-17

建立成功

您需要将生成的 JAR 文件部署到 Elastic Beanstalk 中。

在 AWS Elastic Beanstalk 中部署用户注册应用 Spring Boot 应用

既然您已经在本地系统中成功地为UserRegistrationApp应用创建了一个 JAR 文件，现在，您必须将这个 JAR 文件部署到 Elastic Beanstalk。

让我们使用您的 AWS 凭证登录 AWS 管理控制台，并选择 service as Elastic Beanstalk。图 4-18 显示三个应用已经可用:My First Elastic Beanstalk Application、helloworld和HelloSpringBoot。您在前面的章节中创建了它们。

图 4-18

Elastic Beanstalk 中可用的所有应用列表

接下来，让我们为与 MySQL 数据库对话的UserRegistrationApp Spring Boot 应用创建一个新应用。点击创建一个新的应用按钮，输入应用名UserRegistrationApp，点击创建按钮。

接下来，通过单击 Create one now 链接为该应用创建一个新环境。选择 Web 服务器环境作为环境层，然后点击选择按钮。

在环境信息页面，输入userregistration作为域名，并检查域名可用性(见图 4-19 )。

图 4-19

环境信息

接下来，选择 Java 作为托管平台，如图 4-20 所示。

图 4-20

Java 是托管平台

最后，从项目的target文件夹中选择 JAR 文件上传代码(如在作者本地系统中为E:\Apress\workspace\AWS\UserRegistrationApp\target\UserRegistrationApp-0.0.1-SNAPSHOT.jar)，然后点击创建环境按钮，如图 4-21 所示。

图 4-21

上传应用代码

创建环境并部署资源后，更改 Spring Boot 应用监听的服务器端口。因此，您需要在 Elastic Beanstalk 环境中指定SERVER_PORT环境变量，并将值设置为 5000。

在您环境的配置页面上，在软件下，点击编辑图标，如图 4-22 所示。

图 4-22

编辑软件配置

然后添加一个新的环境变量SERVER_PORT，用值5000来改变 Spring Boot 应用监听的端口，如图 4-23 所示。

图 4-23

软件配置中的环境属性

一旦单击 Apply 按钮，配置更改就会传播到应用服务器，并且应用会重新启动。

当它重新启动应用时，它通过环境变量获得新的配置。大约一分钟后，您会在仪表板上看到一个健康的应用，如图 4-24 所示。

图 4-24

健康状况良好

您现在已经准备好测试部署在 Amazon 云中的UserRegistrationApp应用了。

使用 Swagger UI 在 AWS 中测试部署的 REST API

现在，是时候在 AWS 中测试部署的 REST API 端点了。使用您在 AWS 环境中配置的 URL 来访问服务。对于这个例子，指定的 URL 是 http://userregistration.us-east-2.elasticbeanstalk.com 。

让我们在 http://userregistration.us-east-2.elasticbeanstalk.com/swagger-ui/ 打开浏览器中的 Swagger UI 页面。你会看到生成的 API 文档，如图 4-25 所示。

图 4-25

Swagger API 文档页面

这里，点击user-registration-controller显示已定义的 REST 端点列表，通过点击 Models 显示域模型结构，如图 4-26 所示。

图 4-26

Swagger UI 列出了 REST 端点和模型结构

使用 Swagger，让我们测试部署在 AWS 上的 REST 端点。

列出所有用户:/API/用户

在 Swagger UI 页面上，展开GET /api/users，点击“尝试”按钮。然后，单击 Execute 按钮来调用这个 REST 端点。图 4-27 显示 HTTP 状态响应代码应该是 200 OK，响应体应该包含用户列表。

图 4-27

列出所有使用 Swagger UI 的用户

创建新用户:/API/用户

在 Swagger UI 页面上，展开POST /api/user/save，点击“尝试”按钮。接下来，在请求体输入框中输入清单 4-10 所示的用户 JSON 数据，并选择 application/json 作为内容类型参数。

{
      "last_name": "Soni",
      "firstName": "Namrata",
      "address": "Bangalore-India",
      "age": 25,
      "createdDate": "2021-07-04T00:00:00"
}

Listing 4-10User JSON Data

接下来，单击 Execute 按钮来调用这个 REST 端点。如图 4-28 所示，响应 HTTP 状态码应该是 201 Created。

图 4-28

使用 Swagger UI 创建新用户

摘要

在本章中，您创建了与 Amazon RDS MySQL 数据库对话的UserRegistrationApp Spring Boot REST API。您探索了已经在pom.xml文件中使用的不同 Maven 依赖项，比如 Lombok、JPA 等等。您了解了如何将 Lombok 项目配置到 STS IDE。您用 URL、用户名和密码等数据库细节更新了application.properties文件。然后，您使用 JPA 注释创建了一个实体类，一个扩展 JpaRepository 接口的存储库接口，一个用于 CRUD 方法的服务类，以及一个定义不同 REST 端点的 REST 控制器。

首先，您使用 Postman 在本地测试了UserRegistrationApp应用。然后，您构建了一个 JAR，部署在 Elastic Beanstalk 中。最后，您使用 Swagger UI 测试了部署到 AWS 云的 REST 端点。

下一章将探讨如何在 AWS 和 S3 中部署完整的 Spring Boot React 应用。

五、在 AWS 和 S3 部署全栈 Spring Boot React 应用

在第四章中，你创建了UserRegistrationApp Spring Boot RESTful web 服务，它与 Amazon RDS MySQL 数据库对话以执行 CRUD 操作。您了解了如何将 Lombok 项目配置到 STS IDE。您使用 JPA 注释创建了一个Entity类，一个扩展 JpaRepository 接口的存储库接口，一个用于 CRUD 方法的Service类，以及一个定义不同 REST 端点的 REST 控制器。之后，您使用 Postman 在本地测试了UserRegistrationApp应用。然后构建一个可执行的 JAR，部署在 AWS Elastic Beanstalk 中。最后，您使用 Swagger UI 测试了部署的 REST 端点。

世人看到的是前端，包括使用 HTML、CSS 等一些语言的设计。前端的主要目的是以一种定义良好的风格呈现数据，并允许与客户端交互以执行 CRUD 操作。有这么多令人惊叹的 JavaScript 库可以用来开发前端应用。

React 是一个开源的前端 JavaScript 库，用于构建单页面应用。React 是一个完美的客户端库解决方案，提供了一种干净的结构化方法。

本章介绍作为前端框架的 React 及其主要组件。你可以使用 React 作为前端开发一个单页应用，来消费由使用 Spring Boot 开发的UserRegistrationApp后端应用所公开的 API，如图 5-1 所示。

图 5-1

全栈应用概述

您设置了一个开发环境来开发您的 React 前端应用。在本章中，您将学习以下内容。

• 如何开发和运行 React 作为本地前端应用

• 如何将 React 前端部署到 AWS S3

这个前端应用有一个主页、一个添加新用户页面和一个带有删除选项的列出所有用户页面。您对 AWS 进行 API 调用，其中已经部署了名为UserRegistrationApp的后端 RESTful 服务。向您介绍了 AWS S3(简单存储服务)，在这里您部署了 React 前端应用。最后，验证 React 前端应用的成功部署。

作为前端应用开发和运行 React

让我们开始在本地系统中使用 React 开发和运行交互式前端应用。我们假设您对 JavaScript、HTML5、CSS 和 React 有很好的了解。如果想深入了解 React，参考 https://reactjs.org 。

引入 React 作为前端框架

React 是一个开源的、基于组件的 JavaScript 库，用于构建快速的交互式 UI(用户界面)组件。它是由一位名叫乔丹·沃克的脸书软件工程师在 2011 年创建的。最初，它是由脸书开发和维护的。React 应用由独立的、隔离的、可重用的组件组成，这些组件是 React 应用的核心，每个组件负责构建复杂的、可重用的用户界面。每个 React 应用至少有一个被称为根组件的组件。这个根组件代表内部应用，并包含其他子组件。

您使用 React with CRUD 特性构建一个用户注册前端应用。这个 React 应用有不同的组件，如图 5-2 所示。

图 5-2

使组件与路由器和 Axios 发生反应

• App组件是包含react-router的根组件。这还包含一个链接到路线路径的导航栏。

• Home组件显示一条欢迎消息。

• ListAllUsers组件显示带有删除选项的所有用户的列表。

• 组件有一个新用户提交的表单。

所有这些组件都调用UserDataService中所需的方法，它在内部使用 Axios HTTP 库来发出 HTTP 请求并接收响应。

反应组分

在 React 中，组件被视为用户界面的核心部分。每个组件都有自己的结构，并且独立于其他组件，当所有组件合并成一个父组件时，就会产生应用的最终 UI。一个组件通常被实现为一个具有某种状态和呈现方法的 JavaScript 类，如清单 5-1 所示。

class UserClass {
   state = {};
   render() {

   }
}

Listing 5-1Structure of Component with State and Render Method

React 中主要有两种类型的组件。

• 无状态功能组件

  • 这些是 JavaScript 函数，没有自己的状态，返回 HTML 来描述 UI。

• 有状态类组件

  • 这些是常规的 ES6 类，它们从 React 库中扩展了Component类。它们必须包含一个 render 方法，该方法反过来返回 React 元素或 HTML。他们管理地方政府。

反应状态

状态是在组件内管理的可更新结构。一个Stateful组件有一个负责使用户界面动态和交互的状态。您需要声明一些缺省值来定义组件的初始状态。可以使用setState方法设置或更改状态。

构造器

在 React 中，构造函数初始化一个类的对象状态。这个建构函式会在类别的物件建立期间自动呼叫。在安装组件之前调用它。您需要在构造函数中的任何其他语句之前调用super(props)方法。此外，在 React 中，构造函数绑定事件处理程序方法。

React 组件的生命周期

让我们探索一下 React 组件的生命周期。它主要由四个阶段组成，如图 5-3 所示。

图 5-3

反应组件的生命周期

React 组件生命周期的不同阶段提供了不同的方法。React 根据组件阶段调用生命周期方法。

• 初始化是 React 组件的诞生阶段，它们通过设置初始状态和默认属性开始它们的旅程。这是在组件的构造函数中完成的。

• 挂载是 React 组件在文档对象模型(DOM)上挂载(创建和插入)的阶段。在完成初始化阶段之后，React 组件在这个挂载阶段第一次呈现。

• 更新是 React 组件生命周期的第三个阶段。它是创建的组件变更的状态。React 组件数据(例如，道具和状态)响应于诸如键入、点击等用户事件而被更新。

• 卸载是这个生命周期的最后一个阶段。React 组件实例被销毁并从 DOM 中卸载。

设置开发环境

运行任何 React 应用都需要以下工具。

• 一个代码编辑器，比如 Visual Studio，用来处理项目文件。可以从 https://code.visualstudio.com 下载。

• 去 https://nodejs.org 下载安装最新版本的 Node.js ，这是一个 JavaScript 运行时环境。

• 一个名为 npm 的包管理器，它下载并运行构建在 Node.js 上的 JavaScript 包。

要检查 Node.js 和 npm 版本，在终端中运行node –v和npm –v命令，如图 5-4 所示。

图 5-4

PC 中的 Node.js 和 npm 版本

跨来源资源共享(CORS)错误

当您在 React 中处理一个连接到用 Spring Boot 编写的 RESTful web 服务的前端应用时，无论何时在浏览器中发出请求，您都可能会得到一个 CORS 错误。基本上，这个错误意味着用户代理(http://localhost:3000)没有足够的权限访问 Spring Boot 资源(http://localhost:5000)。

该错误的解决方案需要更新 Spring Boot 应用，以支持对 RESTful web 服务的跨来源请求。您必须用@CrossOrigin注释来注释Controller类，以支持全局 CORS 配置，如清单 5-2 所示。并且，默认情况下，所有的 origins 和 GET、HEAD 和 POST HTTP 方法都是允许的。

@CrossOrigin
@RestController
@RequestMapping("/api/")
public class UserRegistrationController {

Listing 5-2\src\main\java\com\apress\AWS\controller\UserRegistrationController.java

在更新了Controller类之后，Maven 构建并运行UserRegistrationApp Spring Boot 应用。此外，还要确保在使用 React 开发前端应用时，UserRegistrationApp应该一直运行。

用 create-react-app 开发 React 前端应用

create-react-app包使得开发 React 前端应用变得轻而易举。要使用create-react-app创建 React 应用，请在您想要保存项目文件夹的文件夹中打开命令提示符，并运行以下npx命令(参见图 5-5 )。

图 5-5

使用 create-react-app 创建 React 应用的 npx 命令

npx create-react-app user-registartion-frontend-app

一旦npx命令运行成功，就会创建一个名为user-registration-frontend-app的文件夹，如图 5-6 所示；所有必需的软件包都会自动安装。

图 5-6

已成功创建用户注册前端应用

审查项目结构

创建 React 项目并安装所有必需的依赖项后，在 Visual Studio 中打开该项目。项目结构应如图 5-7 所示。

图 5-7

Visual Studio 中的项目结构

项目结构包含以下文件和文件夹。

• README.md文件是一个包含许多有用信息的降价文件。

• package.json文件管理应用所需的依赖项和运行它所需的脚本。

• .gitignore文件排除了 Git 跟踪的文件和文件夹。一般来说，您会排除像node_modules文件夹这样的大文件夹。

• src文件夹包含与 React 相关的源代码和您开发的所有组件。

  • src文件夹中的App.js文件是 React 应用的根组件。

  • index.js文件是 React 应用的顶层渲染文件。您使用index.js文件中的ReactDOM.render()方法导入App组件。

• public文件夹存储 React 应用的静态资产，如字体和图像。

  • index.html文件在公共文件夹中。React 应用使用这个文件来呈现所有组件。这支持了单页应用的原则。

• node_modules文件夹包含了 Node.js 和 npm 安装的所有包。

运行 React 应用

要构建 React 应用，以下文件必须以准确的文件名存在。

• public/index.html是整个项目中唯一的 HTML 文件。这个 HTML 文件是一个模板，它在应用启动时首先被加载。

  • 只有那些在public文件夹中的文件可以从public/index.html中使用。

  • 这个文件包含一行代码<div id="root"></div>，这表示所有的 React 应用组件都被加载到这个 div 中。

• src/index.js是 JavaScript 的入口点。

• The src/App.js是App组件，是 React 中的主要组件；它充当所有其他组件的容器。

要启动 React app，在user-registration-frontend-app打开命令提示符，这是一个新创建的文件夹，运行npm start命令，如图 5-8 所示。

图 5-8

启动 React 应用的 npm 启动命令

命令提示符下会出现一条成功消息，如图 5-9 所示。

图 5-9

命令提示符下编译成功的消息

这启动了 localhost:3000 上的开发服务器。这个开发服务器的伟大之处在于，服务器会自动刷新以反映更改，而不需要手动刷新浏览器。

点击网址(http://localhost:3000)可以在浏览器中查看应用，如图 5-10 所示。

图 5-10

React 应用的主页

恭喜你！您已经成功地为 React 应用创建了一个基础源代码，以便根据需要添加更多组件。这个应用内容来自于src/App.js文件，该文件包含清单 5-3 中所示的代码。

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Listing 5-3src/App.js

为了支持 CRUD 操作，让我们在 React 应用中创建以下附加文件。

• src/services/user-registration.service.js

• src/components/add-user.component.js

• src/components/home.component.js

• src/components/list-users.component.js

添加 Twitter Bootstrap 以 CSS 样式化 React 应用

默认情况下，create-react-app通过在src文件夹中提供一个App.css文件来支持 CSS，您可以在其中添加一些样式来改善外观。Twitter Bootstrap 是一个前端 CSS 框架，可以设计网站内容的样式。

打开命令提示符，运行npm install bootstrap命令，在node_modules文件夹中安装引导程序，如图 5-11 所示。

图 5-11

安装在 node_modules 文件夹中的引导

要将 Twitter Bootstrap 导入 React 应用，打开src/App.js文件并修改代码，如清单 5-4 所示。

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'

function App() {
      // ...
}

Listing 5-4src/App.js

添加 Navbar

让我们向App组件添加一个导航栏，它是 React 应用的根容器。用清单 5-5 中所示的代码更新src/App.js文件。

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'

function App() {
  return (
    <div className="App">
      <header className="App-header1">
        <div class="page-header text-center">
          <h2>User Registration App</h2>
        </div>
      </header>
      <div class="container-fluid">
        <nav class="navbar  bg-primary  justify-content-center">
            <div class="col-sm"></div>
            <a href="/"
              class="col-sm btn btn-outline-light"
              role="button">
              Home
            </a>
            <div class="col-sm"></div>
            <a href="/list-all-users"
              class="col-sm btn btn-outline-light"
              role="button">
              List All Users
            </a>
            <div class="col-sm"></div>
            <a href="/add-user"
              class="col-sm btn btn-outline-light"
              role="button">
              Add User
            </a>
            <div class="col-sm"></div>
        </nav>
      </div>
    </div>
  );
}

export default App;

Listing 5-5src/App.js

添加反应路由器

路由是根据用户的请求或操作将用户重定向到不同页面的过程。react-router包是建立在 React 之上的标准库系统，在单页面 web 应用中使用react-router定义多个路由。当用户在浏览器中输入特定的 URL，并且该 URL 路径与定义的路由匹配时，用户将被路由到该 URL。

默认情况下，React 不附带路由。并且，您需要在项目中添加一个 react-router 库来启用路由。打开命令提示符并运行以下命令来安装react-router。

npm install react-router-dom

既然你已经成功安装了react-router，那就让我们在应用中使用它吧。

启用路由的 BrowserRouter 对象

使用 HTML5 历史 API 来保持你的用户界面与 URL 同步。它用于带有 URL 段的客户端路由。

首先，您需要从react-router-dom导入BrowserRouter来启用项目中的路由。打开并更新src/index.js，用BrowserRouter对象包装 app 组件，如清单 5-6 所示。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

reportWebVitals();

Listing 5-6src/index.js

切换和路由以渲染路由

专门绘制路线，帮助在页面间切换，无需重新加载。匹配组件和路径的每条路线都会进行包含性渲染。

path属性定义了路线的路径；例如，/定义了主页的路径。Route加载定义好的组件；例如，它载入了主构件。用清单 5-7 中所示的源代码更新src/App.js文件。

import './App.css';
import React, {components} from 'react';
import { Switch, Route } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css'

import ListUsers from './components/list-users.component';
import Home from './components/home.component';
import AddUser from './components/add-user.component';

function App() {
  return (
    <div className="App">
      <header className="App-header1">
        <div class="page-header text-center">
          <h2>User Registration App</h2>
        </div>
      </header>
      <br/>
      <div class="container-fluid">
        <nav class="navbar  bg-primary  justify-content-center">
            <div class="col-sm"></div>
            <a href="/"
              class="col-sm btn btn-outline-light"
              role="button">
              Home
            </a>
            <div class="col-sm"></div>
            <a href="/list-all-users"
              class="col-sm btn btn-outline-light"
              role="button">
              List All Users
            </a>
            <div class="col-sm"></div>
            <a href="/add-user"
              class="col-sm btn btn-outline-light"
              role="button">
              Add User
            </a>
            <div class="col-sm"></div>
        </nav>
        <br/>
        <div className="container mt-3">
          <Switch>
            <Route exact path={["/"]} component={Home} />
            <Route exact path={["/list-all-users"]} component={ListUsers} />
            <Route exact path={["/add-user"]} component={AddUser} />
          </Switch>
        </div>
      </div>
    </div>
  );
}

export default App;

Listing 5-7Update src/App.js with react-router

React 应用中定义了三条路线。

• /为首页

• /list-all-users对于列出所有用户页面

• /add-user对于添加用户页面

为 REST API 调用初始化 Axios

React 是一个构建用户界面的 JavaScript 库。它与 HTTP 无关。要进行 HTTP 或 REST API 调用，需要使用第三方 HTTP 库。这里，您使用 Axios HTTP 库。

Axios 是一个基于 promise 的 HTTP 客户端，它允许您向给定的端点发出 HTTP 请求，并且具有良好的默认设置，可以与 JSON 一起工作。要使用 React 设置 Axios，您需要使用 npm 安装 Axios。打开命令提示符并运行npm install axios命令。让我们在src文件夹中创建一个http-common.js文件，如清单 5-8 所示。

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:5000/api/",
  headers: {
    "Content-type": "application/json"
  },
});

Listing 5-8src/http-common.js

根据 REST API 的 URL，可以在文件中更新baseURL。

数据服务发送 HTTP 请求

接下来，创建一个使用 Axios 向 REST API 发送 HTTP 请求的数据服务。让我们在src文件夹中创建一个service文件夹，并在该文件夹中创建一个user-registration.service.js文件，如清单 5-9 所示。

import http from '../http-common';

class UserDataService {

    getAllUsers() {
      return http.get("/users");
    }

    createUser(user) {
      return http.post("/user/save", user);
    }

    deleteUser(id) {
      return http.delete(`/user/delete/id/${id}`);
    }
}

export default new UserDataService();

Listing 5-9src/user-registration.service.js

UserDataService定义了三种方法:getAllUsers, createUser和deleteUser。对应于 HTTP GET、POST 和 DELETE 方法调用 Axios get、post和delete方法进行 CRUD 操作。

创建与路线对应的 React 组件

在src/components/子文件夹中创建对应于之前定义的三条路线的三个组件。

家用部件

让我们创建Home组件，它显示欢迎消息和一个导航栏。清单 5-10 显示了 home 组件的代码。

import React, { Component } from "react";

export default class Home extends Component {
    render() {
        return (
            <div class="container">
                <div class="panel panel-default">
                    <div class="alert alert-success">
                        <span class="lead">
                            Welcome to User Registration App
                        </span>
                    </div>
                    <div class="panel-body ">
                        <div class="alert alert-info">
                            <ul>
                                <li>
                                    Please click on
                                    <strong> List All Users </strong>
                                    to get all users.
                                </li>
                                <li>
                                    Please click on
                                    <strong> Add User </strong>
                                    to add a new user.
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Listing 5-10src/components/home.component.js

在这个组件中，您创建了一个扩展了Component类的Home类，该类包含一个返回包含欢迎消息的 HTML 代码的render()方法。

保存此主构件文件时，浏览器上的内容会自动刷新。浏览器中的结果如图 5-12 所示。

图 5-12

用户注册应用主页

添加用户组件

让我们创建另一个组件，以便在组件中添加新用户。该组件有一个提交新用户的表单，该表单有四个字段:名、姓、年龄和地址。清单 5-11 、 5-12 、 5-13 和 5-14 显示了add-user组件的代码片段。

import React, { Component } from "react";
import userRegistrationService from "../services/user-registration.service";

Listing 5-11Imports in src/components/add-user.component.js

这里，我们从"react"和user-registration-service导入了 React 和 Component。

export default class AddUser extends Component {

    constructor(props) {
      super(props);

      this.onChangeFirstName = this.onChangeFirstName.bind(this);
      this.onChangeLastName = this.onChangeLastName.bind(this);
      this.onChangeAge = this.onChangeAge.bind(this);
      this.onChangeAddress = this.onChangeAddress.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.newUser = this.newUser.bind(this);

      this.state = {
        id: null,
        firstName: "",
        lastName: "",
        age: "",
        address: "",
        createdDate: ""
      };

    }

Listing 5-12Constructor and State in AddUser Class in src/components/add-user.component.js

在前面的代码中，AddUser类扩展了组件。这个类的构造函数用默认值为id, firstName, lastName, age, address,和createdDate设置初始状态。此外，我们将它绑定到不同的事件，如onChangeFirstName、handleSubmit等。

    onChangeFirstName(event) {
        this.setState({
            firstName: event.target.value
        });
    }

    onChangeLastName(event) {
        this.setState({
            lastName: event.target.value
        });
    }

    onChangeAge(event) {
        this.setState({
            age: event.target.value
        });
    }

    onChangeAddress(event) {
        this.setState({
            address: event.target.value
        });
    }

    handleSubmit(event) {
        console.log(this.state)

        var data = {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            age: this.state.age,
            address: this.state.address
        };

        event.preventDefault();

        userRegistrationService.createUser(data)
        .then(response => {
            alert('You submitted successfully! ' + data.firstName + ' User is created');
            this.setState({
                id: response.data.id,
                firstName: response.data.firstName,
                lastName: response.data.lastName,
                age: response.data.age,
                address: response.data.address
            });
            this.props.history.push("/list-all-users");
        })
        .catch(e => {
            console.log(e);
        });
    }

    newUser() {
        this.setState({
            id: null,
            firstName: "",
            lastName: "",
            age: "",
            address: "",
            createdDate: ""
        });
    }

Listing 5-13Functions in AddUser Class in src/components/add-user.component.js

创建了四个函数(onChangeFirstName, onChangeLastName, onChangeAge, onChangeAddress)来跟踪输入值并设置状态变化。定义了一个名为handleSubmit的函数来获取表单(state)的值，并调用userRegistrationService的createUser()方法，该方法在内部向 REST API 发送 HTTP POST 请求。

    render() {
        return (
            <div className="submit-form">
                <div className="form-group">
                    <label htmlFor="firstName">First Name</label>
                    <input
                        type="text"
                        className="form-control"
                        id="firstName"
                        required
                        value={this.state.firstName}
                        onChange={e => this.onChangeFirstName(e)}
                        name="firstName"
                    />
                </div>

                <div className="form-group">
                    <label htmlFor="lastName">Last Name</label>
                    <input
                        type="text"
                        className="form-control"
                        id="lastName"
                        required
                        value={this.state.lastName}
                        onChange={e => this.onChangeLastName(e)}
                        name="lastName"
                    />
                </div>

                <div className="form-group">
                    <label htmlFor="age">Age</label>
                    <input
                        type="text"
                        className="form-control"
                        id="age"
                        required
                        value={this.state.age}
                        onChange={e => this.onChangeAge(e)}
                        name="age"
                    />
                </div>

                <div className="form-group">
                    <label htmlFor="address">Address</label>
                    <input
                        type="text"
                        className="form-control"
                        id="address"
                        required
                        value={this.state.address}
                        onChange={e => this.onChangeAddress(e)}
                        name="address"
                    />
                </div>

                <button onClick={this.handleSubmit} className="btn btn-success">
                Submit
                </button>
            </div>
        )
    }
}

Listing 5-14Render Method to Return HTML Code

这里，render 方法产生 UI。AddUser包含名字、姓氏、年龄和地址的输入框，还包含创建新用户的提交按钮，如图 5-13 所示。

图 5-13

用于添加新用户的页面

列出所有用户组件

让我们创建另一个组件来列出components子文件夹中的所有用户。这个组件有一个用户数组来显示表中的用户列表，每一行都有一个删除按钮来从列表中删除特定的用户。清单 5-15 和 5-16 显示了list-user组件的代码片段。

import React, { Component } from "react";
import UserDataService from '../services/user-registration.service';

export default class UsersList extends Component {
    constructor(props) {
      super(props);
      this.retrieveUsers = this.retrieveUsers.bind(this);
      this.deleteUser = this.deleteUser.bind(this);
      this.state = {
        users: []
      };
    }

    componentDidMount() {
        this.retrieveUsers();
    }

    retrieveUsers() {
        UserDataService.getAllUsers()
            .then(response => {
                this.setState({
                users: response.data
                });
                console.log(response.data);
            })
            .catch(e => {
                console.log(e.target);
            });
    }

    deleteUser(user, index) {
        UserDataService.deleteUser(user.id)
            .then(response => {
                alert('Deleted successfully! ' + user.firstName);
                this.retrieveUsers();
            })
            .catch(e => {
                console.log(e.target);
            });
    }

Listing 5-15Imports, Constructor, State, and Functions in UsersList Class in src/components/list-users.component.js

UsersList类扩展了Components类。React, Component,和user-registration-service进口为UserDataService。我们定义了这个类的构造函数，它为用户数组设置初始状态。此外，我们将此绑定到不同的事件，如retrieveUsers和deleteUser。

retrieveUsers函数被定义为通过调用UserDataService的getAllUsers()方法来获取用户列表，该方法在内部向 REST API 发送 HTTP GET 请求。定义了一个名为deleteUser的函数，通过调用UserDataService的deleteUser()方法来删除用户，该方法在内部向 REST API 发送 HTTP 删除请求。在组件被挂载(放在 DOM 中)后,componentDidMount()方法立即执行 React 代码。

    render() {
        const { users } = this.state;

        return (
                <table class="table table-hover">
                    <caption>List of users</caption>
                    <thead class="thead-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">First Name</th>
                        <th scope="col">Last Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Address</th>
                        <th scope="col">Delete</th>
                    </tr>
                    </thead>
                    <tbody>
                        {users && users.map((user, index) => (
                            <tr>
                                <th scope="row">{index+1}</th>
                                <td>{user.firstName}</td>
                                <td>{user.lastName}</td>
                                <td>{user.age}</td>
                                <td>{user.address}</td>
                                <td>
                                    <button type="button"
                                        onClick={() => this.deleteUser(user, index)}
                                        class="btn btn-danger custom-width"
                                        key={index}
                                    >
                                        <span class="glyphicon glyphicon-remove">
                                            Delete
                                        </span>
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
        );
    }
}

Listing 5-16Render Method to Return HTML Code

render方法产生一个 UI。“用户列表”页面在表格中显示用户列表。它还为表格中的每个用户行包含一个删除按钮，如图 5-14 所示。

图 5-14

列出所有用户以及删除用户选项

尽管您在上一节中只添加了一个用户，但该列表显示了两个用户。这是因为数据库已经包含一个在第四章中添加的用户。

在这里，点击删除按钮删除一个特定的用户，如图 5-15 所示。

图 5-15

删除现有用户

成功删除特定用户后，表格显示更新后的用户列表，如图 5-16 所示。

图 5-16

删除操作后更新了用户列表

构建 React 代码作为 AWS 的前端应用

您已经在本地系统中使用 React with CRUD 特性成功开发并运行了一个用户注册前端应用，该应用使用来自也在本地系统中运行的UserRegistrationApp RESTful web 服务的数据。要将 React 应用部署到 AWS，您需要构建 React 代码。

验证 AWS 弹性 Beanstalk 环境已启动

您已经更新了 Spring Boot 应用，它应该被部署到 Elastic Beanstalk。您已经了解了后端应用的部署流程，因此您需要遵循这里的流程来完成UserRegistrationApp Spring Boot 应用的部署。一旦您成功地部署了更新的代码，您需要验证弹性 Beanstalk 环境已经启动，如图 5-17 所示。

图 5-17

验证 Elastic Beanstalk 环境是否已启动

使用 AWS Elastic Beanstalk 环境 URL 更新 React 应用中的 BaseURL

我们在src/http-common.js文件中的 React 前端应用中提供了 RESTful 应用的 localhost URL，以便 Axios 可以从前端到后端进行 REST API 调用。

现在，React 前端应用应该与部署在 Elastic Beanstalk 中的 RESTful web 服务进行交互。为此，打开src/http-common.js文件并用弹性 Beanstalk 环境 URL 更新基本 URL，如清单 5-17 所示。

import axios from "axios";

export default axios.create({
  //baseURL: "http://localhost:5000/api/",
  baseURL: "http://userregistration.us-east-2.elasticbeanstalk.com/api/",
  headers: {
    "Content-type": "application/json"
  },

});

Listing 5-17src/http-common.js

在构建之前，让我们在本地验证这些更改。在浏览器中访问“列出所有用户”页面后，您可以看到来自 AWS 的结果，如图 5-18 所示。

图 5-18

React app 与部署在 Elastic Beanstalk 中的 RESTful web 服务进行交互

为了交叉验证更改，在浏览器中打开开发者工具并验证请求 URL，如图 5-19 所示，为 POST 方法创建一个新用户。

图 5-19

在浏览器开发工具中验证请求 URL

为 AWS 部署构建 React 代码

您已经在 React 应用中进行了所需的更改，并验证了这些更改，以确认 React 应用与部署在 AWS 中的 RESTful web 服务进行了交互。现在，您希望将这个 React 前端应用部署到 AWS 服务器。您需要为 React 应用创建一个构建。

要创建一个构建，您需要停止 React 应用，并在命令提示符下执行下面的npm命令。

E:\Apress\workspace\AWS\user-registartion-frontend-app>npm run build

运行 build 命令后，React 应用中会创建一个名为build的文件夹，其中会填充一个优化的生产版本，如图 5-20 所示。

图 5-20

使用 npm 命令构建 React 应用

所以，现在build文件夹准备好了。它包含一个static文件夹和asset-manifest.json、fevicon.ico、index.html、manifest.json、logo.png、robots.txt文件，如图 5-21 所示。

图 5-21

React 应用中的构建文件夹

将 React 前端部署到 AWS S3:托管静态网站

在上一节中，您构建了一个 React 前端应用，希望将其部署在 AWS S3 中。

S3 简介:AWS 中的简单存储服务

S3 代表简单存储服务，是云中的可扩展存储。S3 基本上是一个对象商店。

登录 AWS 控制台管理，点击顶部的所有服务超链接，在存储类别下找到 S3，如图 5-22 所示。

图 5-22

AWS 上存储类别下的 S3 服务

点击 S3 会将你带到包含该桶的详细信息的页面，如图 5-23 所示。

图 5-23

亚马逊 S3 的桶详细信息

一个桶是属于该容器的文件对象的集合。图 5-23 显示在亚马逊 S3 有一个桶。

图 5-24 显示这个桶包含了您在前面章节中部署的所有 jar，如。

图 5-24

桶里有罐子

AWS 从 S3 获取所有需要的 jar，您可以认为这主要是 AWS 中的一个存储服务。如果您想存储备份文件、归档文件、数据暂存或日志文件等内容，可以在 AWS 中使用 S3。

S3 还可以为静态网站提供服务，这是您部署 React 应用的特性。S3 提供高耐用性和高可用性。

虽然存储桶与地区相关联，但是当您使用 S3 时，您是在一个全球空间中，这意味着一个全球服务，并且您并没有真正选择一个地区，如图 5-25 所示。

图 5-25

选择 S3 意味着全球服务

接下来，在 AWS S3 部署 React 应用。

创建一个桶

打开创建桶页面，如图 5-26 所示。

图 5-26

使用 spring initialize 创建用户注册应用

这里，您需要提供一般的配置信息。在 AWS 中输入时段名称时，时段名称应该是全局唯一的。在 Bucket name 中输入user-registration-frontend-app，页面上的其他选项保持不变，然后点击 Create bucket 按钮。您应该会得到一条成功消息，如图 5-27 所示。

图 5-27

使用 spring initialize 创建用户注册应用

在这里，您可以看到在 AWS S3 创建了两个存储桶。点击新创建的名为user-registration-frontend-app的桶，进入user-registration-frontend-app，如图 5-28 所示。

图 5-28

用户-注册-前端-带有对象详细信息的应用

这里，对象是空的，因为这是一个新创建的 bucket。点击上传按钮，将本地系统的所有内容上传到build文件夹中，如图 5-29 所示。

图 5-29

将构建文件夹中的文件上传到 S3 存储桶

接下来，单击页面底部的上传按钮。文件上传成功后，您会得到一条成功消息，如图 5-30 所示。

图 5-30

上传文件和文件夹到 AWS S3

现在，在 Objects 选项卡下，您可以看到所有出现在user-registration-frontend-app桶中的对象。图 5-31 显示static文件夹以及您上传到桶中的所有文件。

图 5-31

使用 spring initialize 创建用户注册应用

要托管网站，进入属性选项卡，向下滚动到静态网站托管，然后点击编辑，如图 5-32 所示。

图 5-32

静态网站托管

接下来选择启用进行静态网站托管，选择托管一个静态网站作为托管类型，输入 index.html 作为索引文件，如图 5-33 所示。

图 5-33

更新静态网站托管详细信息

index.html 的文件被上传到了 S3 桶。保存更改。现在你可以在属性页签中找到桶网站端点 URL，如图 5-34 所示。

图 5-34

存储桶网站端点 URL

点击水桶网站端点 URL 给出 403 禁止错误，如图 5-35 所示。

图 5-35

使用 spring initialize 创建用户注册应用

拒绝访问错误是由于 S3 安全问题造成的。默认情况下，您上传的所有对象在权限页签中都有阻止公共访问，如图 5-36 所示。

图 5-36

默认情况下，所有对象都会阻止公共访问

要公开该桶的所有内容，以便可以在互联网上访问，请单击阻止公共访问，取消选中阻止所有公共访问，然后单击保存更改，如图 5-37 所示。

图 5-37

使用 spring initialize 创建用户注册应用

将弹出一个确认屏幕来确认设置。您需要在输入框中输入确认，点击确认按钮，如图 5-38 所示。

图 5-38

要确认设置，请在字段中输入确认

应该会出现一条成功消息，如图 5-39 所示。

图 5-39

已成功编辑存储桶的阻止公共访问设置

现在，您需要编辑 bucket 策略，它是用 JSON 编写的。它提供对存储在存储桶中的对象的访问。要编辑 bucket policy，在权限选项卡中，向下滚动到 Bucket policy 部分，点击编辑按钮，在 policy 下输入 JSON，如图 5-40 所示。

图 5-40

更新存储桶策略

清单 5-18 显示了一个 bucket 策略的 JSON。

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":"s3:GetObject",
      "Resource":["arn:aws:s3:::user-registartion-frontend-app/*"]
    }
  ]
}

Listing 5-18JSON for Bucket Policy

Resource包含存储桶名称，即user-registration-frontend-app，用于标识存储桶策略的资源。这个 JSON 指定了一个特定的版本。Action中的GetObject允许访问所有主体。所有用户都可以在user-registration-frontend-app执行GetObject。

接下来，保存更改，这将提示一条消息，说明“这个存储桶具有公共访问权限。”使用 bucket 网站端点 URL 刷新浏览器。您现在可以访问您的主页，如图 5-41 所示。

图 5-41

主页中的 Bucket 网站端点 URL

恭喜你！您已经在 AWS S3 成功托管了您的 static React 应用，并且可以访问主页。

验证 React 前端应用的成功部署:解决 404 错误

单击主页导航栏中的“列出所有用户”按钮。你得到 404 未发现错误，如图 5-42 所示。

图 5-42

列出所有用户页面抛出 404 错误

要解决这个问题，您需要将错误文档框更新为index.html。要进行这些更改，您需要转到 bucket 下的 Properties 选项卡。向下滚动到静态网站托管，点击编辑，更新错误文档，如图 5-43 所示。

图 5-43

更新静态网站托管中的错误文档

这就是react-router的工作方式。它处理来自前端的请求，并将用户路由到其他路由。保存修改并刷新浏览器，查看列出所有用户页面，如图 5-44 所示。

图 5-44

AWS S3 托管的访问列表-所有用户页面

摘要

本章介绍了作为前端框架的 React 及其主要组件，使用 React 作为前端来开发单页面应用，以使用后端应用公开的 API。您设置了一个开发环境来开发 React 前端应用，并被介绍到 AWS 中的 S3，在那里您部署了一个 React 前端应用。