チュートリアル: 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. [Add file]、[Upload file] の順に選択します。

      3. [ファイルの選択] を選択し、ファイルを参照します。ユーザー名とメールアドレスを入力して、変更をコミットします。[Commit changes] (変更のコミット) を選択します。

      4. アップロードするファイルごとにこのステップを繰り返します。

ウィザードを使用してパイプラインを作成するには

1. にサインイン AWS Management Console し、http://console.aws.amazon.com/codesuite/codepipeline/home で CodePipeline コンソールを開きます。

2. [ようこそ] ページ、[開始方法] ページ、または [パイプライン] ページで、[パイプラインの作成] を選択します。

3. [ステップ 1: パイプラインの設定を選択する] の [パイプライン名] に「MyS3DeployPipeline」と入力します。

4. パイプラインタイプ で、V2 を選択します。詳細については、「パイプラインのタイプ」を参照してください。[Next (次へ)] を選択します。

5. サービスロール で、 が でサービスロールを作成できるようにする新しいサービスロールを選択しますIAM。 CodePipeline

6. [詳細設定] をデフォルト設定のままにし、[次へ] を選択します。

7. [Step 2: Add source stage (ステップ 2: ソースステージの追加)] の [ソースプロバイダ] で、[AWS CodeCommit] を選択します。リポジトリ名 で、 で作成したリポジトリの名前 CodeCommitを選択しますステップ 1: CodeCommit リポジトリを作成する。[Branch name] で、最新のコード更新を含むブランチの名前を選択します。独自のブランチを作成する場合を除き、ここで使用できるのは main のみです。

   リポジトリ名とブランチを選択すると、このパイプライン用に作成される Amazon CloudWatch Events ルールが表示されます。

   [Next (次へ)] を選択します。

8. [Step 3: Add build stage] (ステップ 3: ビルドステージを追加する) で、[Skip build stage] (ビルドステージのスキップ) を選択し、もう一度 [スキップ] を選択して警告メッセージを受け入れます。

   [Next (次へ)] を選択します。

9. ステップ 4: デプロイステージを追加する:

   1. [デプロイプロバイダ] で、[Amazon S3] を選択します。

   2. [バケット] にパブリックバケットの名前を入力します。

   3. [Extract file before deploy (デプロイ前にファイルを展開)] を選択します。

      注記

      [デプロイ前にファイルを抽出] を選択しないと、デプロイに失敗します。これは、パイプラインの AWS CodeCommit アクションがソースアーティファクトを圧縮し、ファイルが ZIP ファイルであるためです。

      [Extract file before deploy (デプロイ前にファイルを展開)] を選択すると、[Deployment path (デプロイパス)] が表示されます。使用するパスの名前を入力します。これにより、ファイルが展開されるフォルダ構造が Amazon S3 に抽出されます。このチュートリアルでは、このフィールドを空欄にします。

      

   4. （オプション) 既定 ACLでは、既定 ACLと呼ばれる一連の事前定義された権限を、アップロードされたアーティファクトに適用できます。

   5. (オプション) [キャッシュコントロール] で、キャッシュパラメータを入力します。これを設定して、リクエスト/レスポンスのキャッシュ動作を制御できます。有効な値については、 HTTPオペレーションの Cache-Control ヘッダーフィールドを参照してください。

   6. [Next (次へ)] を選択します。

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. にサインイン AWS Management Console し、http://console.aws.amazon.com/codesuite/codepipeline/home で CodePipeline コンソールを開きます。

2. [ようこそ] ページ、[開始方法] ページ、または [パイプライン] ページで、[パイプラインの作成] を選択します。

3. [ステップ 1: パイプラインの設定を選択する] の [パイプライン名] に「MyS3DeployPipeline」と入力します。

4. サービスロール で、 が でサービスロールを作成できるようにする新しいサービスロールを選択しますIAM。 CodePipeline

5. [詳細設定] をデフォルト設定のままにし、[次へ] を選択します。

6. [Step 2: Add source stage (ステップ 2: ソースステージの追加)] ページの [ソースプロバイダ] で、[Amazon S3] を選択します。[バケット] で、ソースバケットの名前を選択します。S3 オブジェクトキー で、ソースZIPファイルの名前を入力します。必ず、ファイル拡張子.zip を含めてください。

   [Next (次へ)] を選択します。

7. [Step 3: Add build stage (ステップ 3: ビルドステージの追加] で:

   1. [ビルドプロバイダ] で、[CodeBuild] を選択します。

   2. Create build project (ビルドプロジェクトの作成)を選択します。[プロジェクトの作成] ページで:

   3. [プロジェクト名] に、このビルドプロジェクトの名前を入力します。

   4. [環境] で、[マネージド型イメージ] を選択します。[Operating system] で、[Ubuntu] を選択します。

   5. [ランタイム] で、[Standard (標準)] を選択します。[ランタイムバージョン] で、[aws/codebuild/standard:1.0] を選択します。

   6. [イメージのバージョン] で、[Always use the latest image for this runtime version (このランタイムバージョンには常に最新のイメージを使用)] を選択します。

   7. サービスロール で、 CodeBuild サービスロールを選択するか、作成します。

   8. [ビルド仕様] で、[Use a buildspec file (ビルド仕様ファイルの使用)] を選択します。

   9. 「続行」を選択します CodePipeline。プロジェクトが正常に作成された場合はメッセージが表示されます。

   10. [Next (次へ)] を選択します。

8. ステップ 4: デプロイステージを追加する:

   1. [デプロイプロバイダ] で、[Amazon S3] を選択します。

   2. [バケット] に、S3 ターゲットバケットの名前を入力します。

   3. [Extract file before deploy (デプロイ前にファイルを展開)] がオフになっていることを確認します。

      [Extract file before deploy (デプロイ前にファイルを展開)] がオフになっていると、[S3 object key (S3 オブジェクトキー)] が表示されています。使用するパスの名前を入力します: js-application/{datetime}.zip。

      これにより、ファイルが展開される js-application フォルダが Amazon S3 に作成されます。このフォルダでは、パイプラインの実行時に {datetime} 変数によって各出力ファイルにタイムスタンプが付けられます。

      

   4. （オプション) 既定 ではACL、既定 ACLと呼ばれる一連の事前定義された権限を、アップロードされたアーティファクトに適用できます。

   5. (オプション) [キャッシュコントロール] で、キャッシュパラメータを入力します。これを設定して、リクエスト/レスポンスのキャッシュ動作を制御できます。有効な値については、 HTTPオペレーションの Cache-Control ヘッダーフィールドを参照してください。

   6. [Next (次へ)] を選択します。

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);