Angular AWS

前提条件

• Angular CLI
• AWS 账户

创建 Angular 应用

让我们开始创建我们的 Angular 项目。首先，我们需要通过运行以下命令来安装最新版本的 Angular CLI。

运行上述命令后，您可以通过运行 `ng version` 来验证最新的 CLI 版本。它将显示如下版本：

现在，让我们创建一个新的 Angular 应用程序。您可以导航到要创建 Angular 项目的工作区，然后运行以下命令：

在此示例中，我们不添加路由，并将使用 SCSS 格式作为样式表。

Angular CLI 将安装所有必需的 npm 包，并在选定的工作区下创建 Angular 应用。如果您使用 VS Code 进行开发，则可以按如下方式查看工作区以及所有必需的文件。

• `package.json` 文件包含所有必需的依赖项。
• `angular.json` 文件包含所有必需的配置，包括输出文件和 CSS 样式路径。
• `tsconfig.json` 定义了编译 TypeScript 文件所需的编译器选项。
• `main.ts` 是应用程序的入口点，它引导应用程序。
• 将添加初始的 `app.component` 和 `app.module` 文件，用于呈现应用程序的着陆页。

构建应用程序并生成输出文件夹

我们可以通过运行以下命令来生成构建文件。它将在 `angular.json` 文件中指定的输出文件夹中生成。此文件夹将用于托管我们稍后将在本文中看到的 AWS S3 存储桶。

您可以验证在 `angular.json` 文件中配置的输出路径。

成功构建应用程序后，`dist/MyFirstAngularApp` 将输出以下文件：

在 localhost 上运行应用程序

转到工作区并运行 `ng serve` 命令来构建应用程序并在 localhost 上启动开发服务器。您可以在浏览器中打开该链接并按如下方式验证着陆页。

将 Angular 应用部署到 AWS S3 服务

接下来，让我们将 Angular 应用程序部署到无服务器 S3 服务。要继续，您需要一个 AWS 账户。您可以在 https://aws.amazon.com/console/ 上创建一个免费账户。他们在第一年提供许多免费服务。对于 S3，您可以在第一年获得以下免费服务。

成功创建账户并登录后，您可以在“服务”->“存储”选项下导航到 S3。第一步是创建 S3 存储桶名称。存储桶名称在所有 AWS 账户中是唯一的，因此不应选择通用名称，因为它可能已被占用。

此外，明智地选择存储桶名称会很有帮助，因为 S3 会按以下格式公开 URL。

在存储桶名称之后，您需要选择区域。选择离用户位置较近的区域是有意义的，这将为用户提供更快的应用程序性能。以下是我为我的存储桶定义的配置：

让我们最后点击“创建”按钮来创建我们的 S3 存储桶。成功创建存储桶后，您可以在 S3 存储桶列表中找到它，如下所示：

单击新创建的存储桶，然后单击“属性”选项卡。您将看到一组卡片。

单击“静态网站托管”卡以定义我们应用程序的入口点和错误页面。

您会在那里看到三个选项，您需要选择“使用此存储桶托管网站”。在这里，您需要定义索引文档和错误文档。在我们的例子中，我们将两个文档都定义为 `index.html` 文件。

此外，您还可以看到将启动浏览器中应用程序的终端节点 URL。

让我们点击“保存”并使用给定的终端节点 URL 访问浏览器。此时，我们遇到了以下 403 禁止访问错误。原因是所有 S3 存储桶策略默认都是私有的，这将使所有用户无法访问该应用程序。

我们可以在“存储桶策略”选项卡下管理存储桶策略，并授予所有用户公共访问权限。

首先，让我们转到“权限”选项卡并单击“编辑”按钮。在这里，默认情况下，“阻止通过新公共存储桶进行公共访问”和“阻止通过新公共存储桶进行公共和跨账户访问”这两个选项都设置为 true。让我们取消选中它们并点击“保存”。

接下来，您需要应用一个策略来授予匿名用户访问我们数据的权限。我们可以复制以下策略并将其粘贴到“管理存储桶策略”部分。在 JSON 对象中的 `Resource` 属性中更改存储桶名称为您当前存在的存储桶会很有帮助。

我已经更新了存储桶策略如下。此外，非常重要的是仅授予用户 `GetObject` 权限，而不是 `PUT`、`DELETE` 等任何编辑访问权限，以防止任何安全问题。

部署 Angular 构建

现在让我们复制我们最初在文章中讨论的位于 `dist/MyFirstAngularApp` 路径下的 Angular 构建输出，并将其上传到 S3。

文件上传成功后，您可以导航到 S3 终端节点 URL 并验证应用程序是否已启动并正在运行。

[Your-BucketName].s3-website-[Your-BucketRegion].amazonaws.com

我们刚刚创建了我们的第一个 Angular 应用并将其部署到了 AWS 无服务器 S3。