Tutorial: Create a pipeline that uses Amazon S3 as a deployment provider

To push files to your CodeCommit repository

1. Extract the downloaded sample files. Do not upload the ZIP file to your repository.

2. Push or upload the files to your CodeCommit repository. These files are the source artifact created by the Create Pipeline wizard for your deployment action in CodePipeline. Your files should look like this in your local directory:

   index.html
   main.css
   graphic.jpg

3. You can use Git or the CodeCommit console to upload your files:

   1. To use the Git command line from a cloned repository on your local computer:

      1. Run the following command to stage all of your files at once:

         git add -A

      2. Run the following command to commit the files with a commit message:

         git commit -m "Added static website files"

      3. Run the following command to push the files from your local repo to your CodeCommit repository:

         git push

   2. To use the CodeCommit console to upload your files:

      1. Open the CodeCommit console, and choose your repository from the Repositories list.

      2. Choose Add file, and then choose Upload file.

      3. Select Choose file, and then browse for your file. Commit the change by entering your user name and email address. Choose Commit changes.

      4. Repeat this step for each file you want to upload.

To create a pipeline with the wizard

1. Sign in to the AWS Management Console and open the CodePipeline console at http://console.aws.amazon.com/codesuite/codepipeline/home.

2. On the Welcome page, Getting started page, or Pipelines page, choose Create pipeline.

3. On the Step 1: Choose creation option page, under Creation options, choose the Build custom pipeline option. Choose Next.

4. In Step 2: Choose pipeline settings, in Pipeline name, enter MyS3DeployPipeline.

5. In Pipeline type, choose V2. For more information, see Pipeline types. Choose Next.

6. In Service role, choose New service role to allow CodePipeline to create a service role in IAM.

7. Leave the settings under Advanced settings at their defaults, and then choose Next.

8. In Step 3: Add source stage, in Source provider, choose AWS CodeCommit. In Repository name, choose the name of the CodeCommit repository you created in Step 1: Create a CodeCommit repository. In Branch name, choose the name of the branch that contains your latest code update. Unless you created a different branch on your own, only main is available.

   After you select the repository name and branch, the Amazon CloudWatch Events rule to be created for this pipeline is displayed.

   Choose Next.

9. In Step 4: Add build stage, choose Skip build stage, and then accept the warning message by choosing Skip again.

   Choose Next.

10. In Step 5: Add deploy stage:

    1. In Deploy provider, choose Amazon S3.

    2. In Bucket, enter the name of your public bucket.

    3. Select Extract file before deploy.

       Note

       The deployment fails if you do not select Extract file before deploy. This is because the AWS CodeCommit action in your pipeline zips source artifacts and your file is a ZIP file.

       When Extract file before deploy is selected, Deployment path is displayed. Enter the name of the path you want to use. This creates a folder structure in Amazon S3 to which the files are extracted. For this tutorial, leave this field blank.

       

    4. (Optional) In Canned ACL, you can apply a set of predefined grants, known as a canned ACL, to the uploaded artifacts.

    5. (Optional) In Cache control, enter the caching parameters. You can set this to control caching behavior for requests/responses. For valid values, see the Cache-Control header field for HTTP operations.

    6. Choose Next.

11. In Step 6: Review, review the information, and then choose Create pipeline.

12. After your pipeline runs successfully, open the Amazon S3 console and verify that your files appear in your public bucket as shown:

    index.html
    main.css
    graphic.jpg

13. Access your endpoint to test the website. Your endpoint follows this format: http://bucket-name.s3-website-region.amazonaws.com/.

    Example endpoint: http://my-bucket.s3-website-us-west-2.amazonaws.com/.

    The sample web page appears.

To create a buildspec.yml file

• Create a file named buildspec.yml with the following contents. These build commands install TypeScript and use the TypeScript compiler to rewrite the code in index.ts to JavaScript code.

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

To create an index.ts file

• Create a file named index.ts with the following contents.

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

To upload files to your S3 source bucket

1. Your files should look like this in your local directory:

   buildspec.yml
   index.ts

   Zip the files and name the file source.zip.

2. In the Amazon S3 console, for your source bucket, choose Upload. Choose Add files, and then browse for the ZIP file you created.

3. Choose Upload. These files are the source artifact created by the Create Pipeline wizard for your deployment action in CodePipeline. Your file should look like this in your bucket:

   source.zip

To create a pipeline with the wizard

1. Sign in to the AWS Management Console and open the CodePipeline console at http://console.aws.amazon.com/codesuite/codepipeline/home.

2. On the Welcome page, Getting started page, or Pipelines page, choose Create pipeline.

3. On the Step 1: Choose creation option page, under Creation options, choose the Build custom pipeline option. Choose Next.

4. In Step 2: Choose pipeline settings, in Pipeline name, enter MyS3DeployPipeline.

5. In Service role, choose New service role to allow CodePipeline to create a service role in IAM.

6. Leave the settings under Advanced settings at their defaults, and then choose Next.

7. In Step 3: Add source stage, in Source provider, choose Amazon S3. In Bucket, choose the name of your source bucket. In S3 object key, enter the name of your source ZIP file. Make sure you include the .zip file extension.

   Choose Next.

8. In Step 4: Add build stage:

   1. In Build provider, choose CodeBuild.

   2. Choose Create build project. On the Create project page:

   3. In Project name, enter a name for this build project.

   4. In Environment, choose Managed image. For Operating system, choose Ubuntu.

   5. For Runtime, choose Standard. For Runtime version, choose aws/codebuild/standard:1.0.

   6. In Image version, choose Always use the latest image for this runtime version.

   7. For Service role, choose your CodeBuild service role, or create one.

   8. For Build specifications, choose Use a buildspec file.

   9. Choose Continue to CodePipeline. A message is displayed if the project was created successfully.

   10. Choose Next.

9. In Step 5: Add deploy stage:

   1. In Deploy provider, choose Amazon S3.

   2. In Bucket, enter the name of your S3 target bucket.

   3. Make sure that Extract file before deploy is cleared.

      When Extract file before deploy is cleared, S3 object key is displayed. Enter the name of the path you want to use: js-application/{datetime}.zip.

      This creates a js-application folder in Amazon S3 to which the files are extracted. In this folder, the {datetime} variable creates a timestamp on each output file when your pipeline runs.

      

   4. (Optional) In Canned ACL, you can apply a set of predefined grants, known as a canned ACL, to the uploaded artifacts.

   5. (Optional) In Cache control, enter the caching parameters. You can set this to control caching behavior for requests/responses. For valid values, see the Cache-Control header field for HTTP operations.

   6. Choose Next.

10. In Step 6: Review, review the information, and then choose Create pipeline.

11. After your pipeline runs successfully, view your bucket in the Amazon S3 console. Verify that your deployed ZIP file is displayed in your target bucket under the js-application folder. The JavaScript file contained in the ZIP file should be index.js. The index.js file contains the following output:

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