教程：创建以 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. 通过以下网址登录AWS 管理控制台并打开 CodePipeline 控制台：http://console.aws.amazon.com/codesuite/codepipeline/home。

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

3. 在步骤 1：选择创建选项页面上的创建选项下，选择构建自定义管道选项。选择下一步。

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

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

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

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

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

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

   选择下一步。

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

   选择下一步。

10. 在步骤 5：添加测试阶段中，选择跳过测试阶段，并通过再次选择跳过接受警告消息。

    选择下一步。

11. 在步骤 6：添加部署阶段中：

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

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

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

       注意

       如果不选择部署前提取文件，部署将会失败。这是因为管道中的 AWS CodeCommit 操作会将源构件压缩成 ZIP 文件。

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

       

    4. （可选）在标准 ACL 中，您可以将一组预定义的授权（称作标准 ACL）应用于上传的构件。

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

    6. 选择下一步。

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

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

    index.html
    main.css
    graphic.jpg

14. 访问您的终端节点以测试网站。您的终端节点遵循以下格式： 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. 通过以下网址登录AWS 管理控制台并打开 CodePipeline 控制台：http://console.aws.amazon.com/codesuite/codepipeline/home。

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

3. 在步骤 1：选择创建选项页面上的创建选项下，选择构建自定义管道选项。选择下一步。

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

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

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

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

   选择下一步。

8. 在步骤 4：添加构建阶段中：

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

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

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

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

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

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

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

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

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

   10. 选择下一步。

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

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

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

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

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

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

      

   4. （可选）在标准 ACL 中，您可以将一组预定义的授权（称作标准 ACL）应用于上传的构件。

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

   6. 选择下一步。

10. 在 Step 6: Review 中，查看信息，然后选择 Create pipeline。

11. 管道成功运行后，在 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);