如何创建具有自定义域、HTTPS 和持续部署的 AWS S3 托管 Angular 应用

要求

基本静态站点设置

自定义域和 HTTPS

持续交付

结束

本指南介绍了如何使用自定义域、HTTPS 和来自 GitHub 存储库的持续部署在 AWS S3 中托管 Angular 应用程序。（准确日期为公元 2019 年 12 月 16日）

要求

• GitHub 帐户
• 一个包含在根目录中创建的 Angular App 的 GitHub Repo
• AWS 账户
• 可以更新其 DNS 设置的域名

基本静态站点设置

S3

• 创建带有站点名称（example.com）的存储桶
• 转到'Properties'标签页
• 选择'Static Website'
• 选择'Use this bucket to host a website'并输入 index.html 作为索引文档和错误文档（适用于单页应用程序）
• 手动将 index.html 文件添加到存储桶以进行测试
• 记下端点，稍后设置 CDN 时我们将需要它。
• 转到'Permissions'标签页
• 选择'Bucket Policy'
• 复制以下 json 并替换BUCKET_NAME存储桶的名称 (example.com)。

{
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME/*"
            ]
        }
    ]
}

注意：bucket-policy.json 中的策略将默认使此存储桶中的所有对象公开可用，这在后续部署脚本中是必需的，因为通常情况下，对象默认设置为私有。如果您不这样做，您的网站将无法访问。

• 使用站点名称和子域名创建存储桶（www.example.com）
• 转到'Properties'标签
• 选择'Static Website'
• 选择'Redirect requests'并选择'http'协议

自定义域和 HTTPS

Route 53 和 DNS

• 单击'Create Hosted Zone'并输入您的域名 example.com'Public Hosted Zone'
• 前往您获得域名的域名注册商（例如 hover.com）
• 将新创建的托管区域中的值复制ns到域的名称服务器设置中

AWS 证书管理器（SSL 证书）

• 确保us-east-1已选择区域，因为 Cloud Front 需要此区域（位于仪表板右上角）。更多信息请访问https://aws.amazon.com/certificate-manager/faqs/
• 'www'添加您的域名 example.com 和带有子域名www.example.com 的域名，然后单击'Next'
• 选择'DNS Validation'然后单击'Next'
• 点击'Review'
• 点击'Confirm and Request'
• 展开每个域的区域并单击'Create record in route53'
• 点击'Continue'

AWS 云端 (CDN)

• 点击'Create Distribution'
• 'Web'点击下'Get Started'
• 输入'Origin Domain Name'您之前记下的 S3 站点端点。其格式应为bucket.name .s3-website- aws-region .amazonaws.com
• 在下'Viewer Protocol Policy'，选择'redirect http to https'
• 'Price class'在选择下'use only US, Canada and Europe'。这些区域以外的用户将遇到更多延迟，但这样做更便宜
• 在下面'Alternate Domain Names (CNAMEs)'输入您的顶级域名（example.com），然后在新行上输入您的域名和'www'子域名（www.example.com）
• 在AWS 证书管理器中'SSL Certificate'选择'Custom SSL Certificate'我们刚刚创建的证书
• 输入'Default Root Object'​'index.html'
• 点击'Create Distribuion'

注意：创建分发需要 15 到 20 分钟，请耐心等待，然后再继续下一步。

注意：每月前 1,000 条无效路径请求是免费的，但此后每增加一条无效路径将收取 0.005 美元的费用。

注意：您最多可以同时处理 3,000 个路径失效请求。通配符“*”请求最多可以同时使 15 个路径失效，因此如果您的应用包含超过 15 个文件，则需要在部署脚本中手动移除每个路径，而不是使用通配符路径。

回到53号公路

• 点击'Hosted Zones'
• 单击您的域名 example.com
• 单击'Create Record Set'并将名称留空设置'Alias'为'Yes'选择'Alias Target'，然后从下拉菜单中选择我们之前创建的 Cloud Front 部署单击创建
• 重复上述操作，但'www'这次输入名称。

注意：这可能需要几分钟才能完成。我之前遇到过，没有 www 子域名的网站比有 www 子域名的网站先运行。最终，www 子域名也会运行，所以请耐心等待。

您的网站现在应该在https://example.com和https://www.example.com下上线。

持续交付

AWS 代码管道

• 导航到 AWS Code Pipeline
• 输入管道的名称
• 选择'New service role'，默认名称就可以
• 确保'Allow AWS CodePipeline to create a service role so it can be used with this new pipeline'已检查

• 点击'Next'

• 在下拉菜单中'Source provider'选择'GitHub'

• 单击'Connect To GitHub'并允许 AWS 访问您的 GitHub 帐户

• 在下拉菜单中'Repository'，选择你的仓库

• 在下拉菜单中'Branch'，选择所需的分支

• 'Change detection options'在确保'GitHub webhooks'已选择的情况下

• 点击'Next'

• 在下拉菜单中'Build provider'选择'AWS CodeBuild'

• 在'Region'下拉菜单中，选择所需的 AWS 区域

• 在 下'Project name'，点击'Create project'。这将打开一个弹出窗口。

• 在弹出窗口中，'Project Name'输入所需的名称

• 'Environment image'在选择下'Managed image'

• 'Operating System'在select下'Ubuntu'。这包括我们构建 Angular 应用所需的语言运行时

• 'Runtimes'在选择下'Standard'

• 'Image'在选择下'aws/codebuild/standard:3.0'。这包含我们想要的 NodeJS 版本 12。

• 'Image version'在选择下'Always use the latest image for this runtime version'

• 'Environment Type'在选择下'Linux'

• 选择并输入适当的名称（例如“codebuild-service-role-s3-angular” 'Service role'）'New Service Role'

• 'Build specifications'在选择下'User a buildspec file'

• 点击'Continue to CodePipeline'

• 您应该返回到 CodePipeline

• 点击'Next'

• 单击'Skip deploy stage'，正如我们在构建管道中所述。

• 点击'Create pipeline'

AWS CodeBuild

• 在您的代码库根目录中创建一个buildspec.yaml文件。这将在我们的持续交付管道的 CodeBuild 部分中用于构建您的 Angular 应用，并将其复制到 S3 存储桶的根目录中。

将以下内容复制到buildspec.yaml文件中。
替换@SITE_NAME为您的网站名称 (example.com)。
替换@ANGULAR_APP_NAME为运行 ng build 后包含您的 Angular 应用的文件夹名称，该文件夹可以在dist默认 Angular 应用文件夹中找到。
替换@ANGULAR_APP_ENVIRONMENT为您的 Angular 应用的构建环境，prod即默认值。
替换@CLOUDFRONT_DISTRIBUTION_ID为您之前创建的 CloudFront 发行版的 ID。您可以在 CloudFront 仪表板中找到该 ID。

version: 0.2

env:
  variables:
    S3_BUCKET: "@SITE_NAME"
    APP_NAME: "@ANGULAR_APP_NAME"
    BUILD_ENV: "@ANGULAR_APP_ENVIRONMENT"
    CDN_DISTRIBUTION_ID: "@CLOUDFRONT_DISTRIBUTION_ID"

phases:
  install:
    runtime-versions:
      # NodeJS included in the docker image
      nodejs: 12
    commands:
      # Install node dependancies.
      - npm install

  build:
    commands:
      # Builds Angular application.
      - node ./node_modules/@angular/cli/bin/ng build --$BUILD_ENV

  post_build:
    commands:
      # Clear S3 bucket.
      - aws s3 rm s3://$S3_BUCKET --recursive
      # Copy files from dist to S3
      - cd dist
      - aws s3 cp $APP_NAME s3://$S3_BUCKET --recursive
      # Begin cloudfront invalidation
      - aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths "/*"

CodePipeline IAM 角色权限

您将为 Code Pipeline 和 CodeBuild 创建一个 IAM 角色。您需要授予 CodeBuild 角色访问 S3 和 Cloudfront 的权限

• 前往 IAM 仪表板
• 点击'Roles'
• 在表格中，单击上一步中 CodeBuild 期间创建的角色。
• 点击'Attach Policy'
• 在搜索栏中输入'S3'，然后点击旁边的复选框'AmazonS3FullAccess'。
• 在搜索栏中输入'CloudFront'，然后点击旁边的复选框'CloudFrontFullAccess'。
• 单击此项'Attach Policy'可将策略添加到该角色。

结束

你做到了，干得好，朋友❤️