Angular 5 应用程序部署入门指南

Angular 框架非常适合想要构建交互式单页应用的任何人。该框架可以帮助您创建更简单的渐进式 Web 应用 (PWA)，并且可以很好地与其他视图库（如 React 和 Vue）配合使用。然而，Angular（或者任何 SPA，事实上）令人困惑的一个方面是如何将应用程序部署到云中的最佳方式？

在本教程中，我们将部署全新的 Angular 5 应用程序，并了解如何在云中完成它。

常规部署流程

想象一下，您正在处理一个 MEAN 堆栈项目。该堆栈由后端 MongoDB、服务器 Express、前端 Angular 和运行时环境 Node.js 组成。如果项目相对较小，不需要协作，您可以手动将版本推送到云端。在这种情况下，您将创建一个包，然后将本地主机的构建工件复制到服务器。但我必须警告您，这并不是一个好方法。相反，您希望通过一个单一的魔术命令来自动化整个过程，该命令可以完成从构建、优化、测试到部署的所有工作。稍后我们将讨论这一点。

接下来要考虑的是架构以及您将使用的服务器类型。我们可以使用功能齐全的服务器或静态 Web 托管解决方案。如果您对这两者感到困惑，以下是如何区分它们。Angular 构建通常由不随时间更改的静态资源组成。静态资源包括一个 index.html 文件、.css 文件、.js 文件和图像。因此，您可以将代码推送到静态对象存储服务。使用静态容器而不是服务器的优点是它更便宜，并且可以在无需任何额外配置的情况下处理流量。

对于 MEAN 堆栈项目，理想的架构在 AWS 作为云主机的情况下应如下所示。

让我先解释一下结构。RDS 实例运行数据库。但是，如果您明确要使用 MongoDB，则可能需要将其替换为 EC2 和附加的 AWS EFS 卷。服务器端节点应用程序将在 EC2 容器中运行。Angular 是静态的，可以托管在 S3 存储桶中。Amazon CloudFront 加速了静态和动态内容的分布，并充当中间缓存。

现在我们对所有内容如何连接有了更好的了解，让我们看看如何将 Angular 应用程序部署到 S3 存储桶。

必备组件

我假设您对 Angular 的工作原理和不同的 Angular 组件有一定的基本了解。如果您还没有，请创建一个基本的 Angular 项目。和往常一样，我将使用 Angular CLI 来创建一个。

    npm install -g @angular/cli 
    ng new deploy-demo 
    cd deploy-demo 
    ng serve 

您可能已经知道，ng serve 命令会编译所有文件并生成 webpack 包。但是构建工件是从内存中提供的，这不适用于生产环境，因为我们需要生成的文件的磁盘可用性，以便将其推送到云服务器。

别担心！Angular CLI 配备了我们创建优化的生产构建所需的一切，而无需依赖第三方库。

构建您的 Angular 应用程序

CLI 带有一个 build 命令，您可以使用它来构建您的 Angular 5 应用程序。

ng build

上面的命令会将生成的构建工件写入输出目录，该目录默认为 dist/。但是，编译后的文件并未优化，在生产环境中性能不佳。您可以通过向 build 命令添加 --prod 元标志来创建优化构建。--prod 元标志启用 Ahead of Time (AoT) 编译，从而实现更快的渲染，以及其他生产级优化，如打包、最小化、混淆和死代码消除。

为了进一步减小包的大小，您可以添加另一个优化标志，如下所示

ng build --prod --build-optimizer

您可以在项目的 GitHub 优化页面上了解更多关于优化 Angular 的信息。

配置存储桶

如前所述，我们将把应用程序部署到 Amazon S3 存储桶。如果您还没有，请注册 Amazon。然后按照以下步骤配置您的存储桶。

1. 创建一个新存储桶。您选择的名称在所有存储桶中都应该是全局唯一的。
2. 创建存储桶后，转到属性选项卡并选择静态 Web 托管。
3. 索引文档和错误文档应指向 index.html。如果您使用 Angular 路由器，这有助于配置 S3，使其在遇到不存在的路由时返回应用程序的主页 (index.html)。
4. 设置存储桶的权限。每个存储桶都有一个权限，该权限决定了谁可以读/写该存储桶。我们将编写一个新策略，允许公共访问读取存储在该存储桶中的对象。

   {
   "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": [
                   "s3:GetObject"
               ],
               "Resource": [
                   "arn:aws:s3:::angular-demo/*"
               ]
           }
       ]
   }

   将 angular-demo 替换为您的 S3 存储桶的名称。

部署应用程序

要手动部署应用程序，您需要将 dist 目录的内容复制到 S3 存储桶。您可以拖放它们，或者使用上传按钮将文件上传到存储桶。确保 index.html 位于根目录下，因为这是我们之前指定的目录。

您可以在静态 Web 托管选项卡中找到 URL。我的看起来像这样

http://angular-demo.3-website-us-east-1.amazonaws.com

使用 CLI 工具自动化部署

开发和生产之间手动同步文件的过程既乏味又过时。您需要创建一个生产版本，对其进行优化，然后手动拖放文件，这需要开发人员进行过多的交互。相反，您可以按照以下方式自动化整个过程

1. 首先，我们需要安装 CLI 工具。我将使用官方 AWS CLI。

   pip ins tall awscli --upgrade -user 

2. 如果您还没有，请生成您的账户的访问密钥和密钥。
3. 配置工具以与您的账户配合使用。您需要使用上一步生成的访问密钥。

   >aws configure
   AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
   AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
   Default region name [None]: us-east-2
   Default output format [None]: jso

现在，您需要编写一个部署脚本，将构建工件上传到服务器。

#/bin/bash
#upload files
aws s3 cp ./dist s3://BUCKETNAME --recursive --acl public-read

将 BUCKETNAME 替换为您的存储桶的名称。您现在可以将部署脚本添加到您的 package.json 中，这样当您运行 npm deploy 时，它就会生成一个优化的构建并将新构建上传到服务器。就是这样！

结论

部署 Angular 应用程序很简单，不是吗？当您将 SPA 视为静态 HTML 网站时尤其如此，因为您可以采用传统的托管技术。与需要服务器的动态网站不同，客户端 Web 应用可以托管在 Amazon S3 等存储引擎上。希望本教程有所帮助。分享您对部署 Angular 应用程序的看法以及您在此过程中的经验。