教程：创建以 Amazon S3 作为部署提供程序的管道

将文件推送到您的 CodeCommit 存储库

1. 提取下载的示例文件。请勿将ZIP文件上传到您的存储库。

2. 将文件推送或上传到您的 CodeCommit 存储库。这些文件是由 “创建管道” 向导创建的源项目，用于在中的部署操作 CodePipeline。您的文件在本地目录中应如下所示：

   index.html
   main.css
   graphic.jpg

3. 你可以使用 Git 或 CodeCommit 控制台上传文件：

   1. 在本地计算机上从克隆的存储库使用 Git 命令行：

      1. 运行以下命令以立即暂存您的所有文件：

         git add -A

      2. 运行以下命令以提交带有提交消息的文件：

         git commit -m "Added static website files"

      3. 运行以下命令将本地存储库中的文件推送到存储 CodeCommit 库：

         git push

   2. 要使用 CodeCommit 控制台上传您的文件，请执行以下操作：

      1. 打开 CodeCommit 控制台，然后从 “存储库” 列表中选择您的存储库。

      2. 选择添加文件，然后选择上传文件。

      3. 选择选择文件，然后浏览找到您的文件。通过输入您的用户名和电子邮件地址来提交更改。选择提交更改。

      4. 对要上传的每个文件重复此步骤。

使用向导创建管道

1. 登录 Amazon Web Services Management Console 并打开 CodePipeline 控制台，网址为 http://console.aws.amazon.com/codesuite/codepipeline/home。

2. 在欢迎页面、入门页面或管道页面上，选择创建管道。

3. 在步骤 1：选择管道设置的管道名称中，输入 MyS3DeployPipeline。

4. 在 “管道类型” 中，选择 V2。有关更多信息，请参阅 管道类型。选择下一步。

5. 在服务角色中，选择新建服务角色 CodePipeline 以允许在中创建服务角色IAM。

6. 将高级设置中的各项设置保留为默认值，然后选择下一步。

7. 在步骤 2：添加源阶段的源提供程序中，选择 Amazon CodeCommit。在存储库名称中，选择您在中创建的 CodeCommit存储库的名称步骤 1：创建 CodeCommit 存储库。在分支名称中，选择包含最新的代码更新的分支的名称。除非您自行创建了其他分支，否则仅 main 可用。

   选择存储库名称和分支后，将显示要为此管道创建的 Amazon CloudWatch Events 规则。

   选择下一步。

8. 在步骤 3：添加构建阶段中，选择跳过构建阶段，并通过再次选择跳过接受警告消息。

   选择下一步。

9. 在步骤 4：添加部署阶段中：

   1. 在部署提供程序中，选择 Amazon S3。

   2. 在存储桶中，输入您的公有存储桶的名称。

   3. 选择在部署前提取文件。

      注意

      如果不选择部署前提取文件，部署将会失败。这是因为您的管道中的 Amazon CodeCommit 操作会压缩源工件，而您的文件是一个ZIP文件。

      当在部署前提取文件已选择时，将会显示部署路径。输入您要使用的路径的名称。这将在 Amazon S3 中创建一个文件夹结构，文件将提取到该文件夹结构中。对于此教程，将此字段保留为空。

      

   4. （可选）在 C an ACL ded 中，您可以将一组预定义的授权（称为封装ACL授权）应用于上传的工件。

   5. （可选）在缓存控制中，输入缓存参数。您可以设置它以控制请求/响应的缓存行为。有关有效值，请参阅HTTP操作标Cache-Control题字段。

   6. 选择下一步。

10. 在步骤 5：审核中，查看信息，然后选择创建管道。

11. 在管道成功运行后，打开 Amazon S3 控制台并验证您的文件是否显示在公有桶中，如下所示：

    index.html
    main.css
    graphic.jpg

12. 访问您的终端节点以测试网站。您的终端节点遵循以下格式： http://bucket-name.s3-website-region.amazonaws.com/。

    示例终端节点：http://my-bucket.s3-website-us-west-2.amazonaws.com/。

    此时会显示示例网页。

创建 buildspec.yml 文件

• 使用以下内容创建名为 buildspec.yml 的文件。这些编译命令安装 TypeScript 并使用 TypeScript编译器将代码重写index.ts为 JavaScript代码。

  version: 0.2
  
  phases:
    install:
      commands:
        - npm install -g typescript
    build:
      commands:
        - tsc index.ts
  artifacts:
    files:
      - index.js

创建 index.ts 文件

• 使用以下内容创建名为 index.ts 的文件。

  interface Greeting {
      message: string;
  }
  
  class HelloGreeting implements Greeting {
      message = "Hello!";
  }
  
  function greet(greeting: Greeting) {
      console.log(greeting.message);
  }
  
  let greeting = new HelloGreeting();
  
  greet(greeting);

将文件上传到 S3 源存储桶

1. 您的文件在本地目录中应如下所示：

   buildspec.yml
   index.ts

   压缩这些文件，并将文件命名为 source.zip。

2. 在 Amazon S3 控制台中，对于您的源桶，选择上传。选择 “添加文件”，然后浏览您创建的ZIP文件。

3. 选择上传。这些文件是由 “创建管道” 向导创建的源项目，用于在中的部署操作 CodePipeline。您的文件应该在您的文件夹中如下所示：

   source.zip

使用向导创建管道

1. 登录 Amazon Web Services Management Console 并打开 CodePipeline 控制台，网址为 http://console.aws.amazon.com/codesuite/codepipeline/home。

2. 在欢迎页面、入门页面或管道页面上，选择创建管道。

3. 在步骤 1：选择管道设置的管道名称中，输入 MyS3DeployPipeline。

4. 在服务角色中，选择新建服务角色 CodePipeline 以允许在中创建服务角色IAM。

5. 将高级设置中的各项设置保留为默认值，然后选择下一步。

6. 在步骤 2: 添加源阶段的源提供程序中，选择 Amazon S3。在存储桶中，选择您的源存储桶的名称。在 S3 对象密钥中，输入源ZIP文件的名称。请确保包含 .zip 文件扩展名。

   选择下一步。

7. 在步骤 3：添加构建阶段中：

   1. 在构建提供程序中，选择 CodeBuild。

   2. 选择 Create build project（创建构建项目）。在创建项目页面上：

   3. 在项目名称中，输入此构建项目的名称。

   4. 在环境中，选择托管映像。对于操作系统，选择 Ubuntu。

   5. 对于运行时，选择标准。对于运行时版本，选择 aws/codebuild/standard:1.0。

   6. 在映像版本中，选择始终对此运行时版本使用最新映像。

   7. 对于服务角色，请选择您的 CodeBuild 服务角色或创建一个服务角色。

   8. 对于构建规范，选择使用 buildspec 文件。

   9. 选择 “继续” CodePipeline。如果项目已成功创建，则会显示一条消息。

   10. 选择下一步。

8. 在步骤 4：添加部署阶段中：

   1. 在部署提供程序中，选择 Amazon S3。

   2. 在存储桶中，输入您的 S3 目标存储桶的名称。

   3. 确保已清除部署前提取文件。

      当在部署前提取文件已清除时，将会显示 S3 对象键。输入您要使用的路径的名称：js-application/{datetime}.zip。

      这将在 Amazon S3 中创建一个 js-application 文件夹，文件将提取到该文件夹中。在此文件夹中，{datetime} 变量在您的管道运行时会在每个输出文件上创建一个时间戳。

      

   4. （可选）在 C an ACL ded 中，您可以将一组预定义的授权（称为封装ACL授权）应用于上传的工件。

   5. （可选）在缓存控制中，输入缓存参数。您可以设置它以控制请求/响应的缓存行为。有关有效值，请参阅HTTP操作标Cache-Control题字段。

   6. 选择下一步。

9. 在步骤 5：审核中，查看信息，然后选择创建管道。

10. 管道成功运行后，在 Amazon S3 控制台中查看您的桶。确认已部署ZIP的文件显示在目标存储桶中的js-application文件夹下。 JavaScript 文件中包含ZIP的文件应该是index.js。index.js 文件包含以下输出：

    var HelloGreeting = /** @class */ (function () {
        function HelloGreeting() {
            this.message = "Hello!";
        }
        return HelloGreeting;
    }());
    function greet(greeting) {
        console.log(greeting.message);
    }
    var greeting = new HelloGreeting();
    greet(greeting);