コンソールにサインインする
CodePipeline
ユーザーガイド (API バージョン 2015-07-09)

AWS ドキュメント » AWS CodePipeline » ユーザーガイド » CodePipeline のチュートリアル » チュートリアル: Amazon S3 をデプロイプロバイダとして使用するパイプラインを作成する

チュートリアル: Amazon S3 をデプロイプロバイダとして使用するパイプラインを作成する

このチュートリアルでは、デプロイステージでデプロイアクションプロバイダとして Amazon S3 を使用してファイルを継続的にデリバリーするパイプラインを設定します。ソースリポジトリ内のソースファイルに変更を加えると、完成したパイプラインはその変更を検出します。パイプラインは Amazon S3 を使用してそれらのファイルをバケットにデプロイします。このチュートリアルには 2 つのオプションがあります。

重要

この手順でパイプラインに追加するアクションの多くでは、AWS リソースを必要とします。これらのリソースはパイプラインを作成する前に作成する必要があります。ソースアクション用の AWS リソースは、パイプラインを作成する AWS リージョンと同じリージョンで常に作成する必要があります。たとえば、米国東部 (オハイオ) リージョンでパイプラインを作成する場合、CodeCommit リポジトリは米国東部 (オハイオ) リージョンにあることが必要です。

パイプラインの作成時にクロスリージョンアクションを追加できます。クロスリージョンアクション用の AWS リソースは、アクションを実行する予定の AWS リージョンと同じリージョンにあることが必要です。クロスリージョンアクションの詳細については、「CodePipeline でクロスリージョンアクションを追加する」を参照してください。

オプション 1: 静的ウェブサイトファイルを Amazon S3 にデプロイする

この例では、サンプルの静的ウェブサイトテンプレートファイルをダウンロードし、そのファイルを AWS CodeCommit リポジトリにアップロードします。続いて、バケットを作成し、ホスティング用に設定します。次に、AWS CodePipeline コンソールを使用してパイプラインを作成し、Amazon S3 デプロイ設定を指定します。

前提条件

以下のものを用意しておく必要があります。

  • CodeCommit リポジトリ。「チュートリアル: シンプルなパイプラインを作成する (CodeCommit リポジトリの場合)」で作成した AWS CodeCommit リポジトリを使用できます。

  • 静的ウェブサイトのソースファイル。このリンクを使用して サンプル静的ウェブサイトをダウンロードします。sample-website.zip をダウンロードすると、以下のファイルが生成されます。

    • index.html ファイル

    • main.css ファイル

    • graphic.jpg ファイル

  • ウェブサイトホスティング用に設定された Amazon S3 バケット。「静的ウェブサイトを Amazon S3 上でホスティングする」を参照してください。必ずパイプラインと同じリージョンにバケットを作成します。

    注記

    ウェブサイトのホスティングには、バケットへのパブリック読み取りアクセスを許可するアクセス設定が必要です。ウェブサイトのホスティング以外では、Amazon S3 バケットへのパブリックアクセスをブロックするデフォルトのアクセス設定を維持する必要があります。

ステップ 1: ソースファイルを CodeCommit リポジトリにプッシュする

このセクションでは、パイプラインによってソースステージに使用されるリポジトリに、ソースファイルをプッシュします。

ファイルを 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. アップロードするファイルごとにこのステップを繰り返します。

ステップ 2: パイプラインの作成

このセクションでは、次のアクションを使用してパイプラインを作成します。

  • CodeCommit アクションを含むソースステージ。この場合、ソースアーティファクトはウェブサイトのファイルです。

  • Amazon S3 デプロイアクションを含むデプロイステージ。

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

  1. AWS マネジメントコンソール にサインインし、CodePipeline コンソール (http://console.aws.amazon.com/codesuite/codepipeline/home) を開きます。

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

  3. [Step 1: Choose pipeline settings (ステップ 1: パイプラインの設定の選択)] の [パイプライン名] で、MyS3DeployPipeline と入力します。

  4. [Service role (サービスロール)] で、次のいずれかの操作を行います。

    • [New service role (新しいサービスロール)] を選択して、CodePipeline に IAM でのサービスロールの作成を許可します。[ロール名] では、ロールとポリシーの名前はいずれもデフォルトで AWSCodePipelineServiceRole-region-pipeline_name という形式になります。たとえば、このチュートリアル用に作成されるサービスロールは AWSCodePipelineServiceRole-eu-west-2-MyS3DeployPipeline です。

    • [Existing service role (既存のサービスロール)] を選択します。[ロール名] で、リストからサービスロールを選択します。

    注記

    サービスロールを作成したタイミングによっては、AWS の他のサービスをサポートするためにロールのアクセス許可の更新が必要になる場合があります。詳細については、他の AWS サービスのアクセス許可の追加 を参照してください。

  5. アーティファクトストア:

    1. [Default location (デフォルトの場所)] を選択し、パイプライン用に選択したリージョン内のパイプラインのデフォルトのアーティファクトストア (デフォルトとして指定された Amazon S3 アーティファクトバケットなど) を使用します。

    2. Amazon S3 アーティファクトバケットなどのアーティファクトストアがパイプラインと同じリージョンにすでに存在する場合は、[Custom location (カスタムの場所)] を選択します。

    注記

    これはソースコードのソースバケットではありません。これはパイプラインのアーティファクトストアです。パイプラインごとに個別のアーティファクトストア (Amazon S3 バケットなど) が必要です。パイプラインを作成または編集する場合は、パイプラインリージョンにアーティファクトバケットが必要であり、アクションを実行している AWS リージョンごとに 1 つのアーティファクトバケットが必要です。

    詳細については、「入出力アーティファクトの概要」および「CodePipeline パイプライン構造のリファレンス」を参照してください。

    [次へ] を選択します。

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

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

    [次へ] を選択します。

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

    [次へ] を選択します。

  8. ステップ 4: デプロイステージの追加:

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

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

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

      注記

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

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

      AWS CodeCommit ソースを使用する S3 デプロイアクションの [Step 4: Deploy (ステップ 4: デプロイ)] ページ

    4. (オプション) [既定 ACL] で、既定 ACL と呼ばれる、あらかじめ定義された一連の許可を、アップロードされたアーティファクトに適用できます。

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

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

  9. [ステップ 5: 確認] で情報を確認し、[パイプラインの作成] を選択します。

    AWS CodeCommit ソースを使用する Amazon S3 デプロイアクションの完成したパイプライン

  10. パイプラインが正常に実行されたら、Amazon S3 コンソールを開き、ファイルがパブリックバケットに表示されていることを確認します。

    index.html
main.css
graphic.jpg

  11. エンドポイントにアクセスしてウェブサイトをテストします。エンドポイントは http://bucket-name.s3-website-region.amazonaws.com/ という形式に従います。

    エンドポイントの例: http://my-bucket.s3-website-us-west-2.amazonaws.com/

    サンプルは以下のように表示されます。

    サンプルウェブサイト

ステップ 3: 任意のソースファイルに変更を加えてデプロイを確認する

ソースファイルに変更を加え、その変更をリポジトリにプッシュします。これにより、パイプラインの実行がトリガーされます。ウェブサイトが更新されていることを確認します。

オプション 2: ビルド済みアーカイブファイルを Amazon S3 ソースバケットから Amazon S3 にデプロイする

このオプションでは、ビルドステージのビルドコマンドが TypeScript コードを JavaScript コードにコンパイルし、出力を別のタイムスタンプ付きフォルダの下の Amazon S3 ターゲットバケットにデプロイします。まず、TypeScript コードと buildspec.yml ファイルを作成します。ソースファイルを ZIP ファイルにまとめたら、このソース ZIP ファイルを Amazon S3 ソースバケットにアップロードします。次に、CodeBuild ステージを使用して、ビルド済みアプリケーション ZIP ファイルを Amazon S3 ターゲットバケットにデプロイします。コンパイルされたコードはアーカイブとしてターゲットバケットに保存されます。

前提条件

以下のものを用意しておく必要があります。

ステップ 1: ソースファイルを作成して Amazon S3 ソースバケットにアップロードする

このセクションでは、ソースファイルを作成し、パイプラインによってソースステージに使用されるバケットにプッシュします。このセクションでは、以下のソースファイルを作成する手順について説明します。

  • buildspec.yml ファイル。CodeBuild ビルドプロジェクトに使用されます。

  • index.ts ファイル。

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

ファイルを Amazon S3 ソースバケットにアップロードするには

  1. ローカルディレクトリのファイルは次のようになります。

    buildspec.yml
index.ts

    ファイルを圧縮して、ファイルに source.zip という名前を付けます。

  2. Amazon S3 コンソールで、ソースバケットの [Upload (アップロード)] を選択します。[ファイルを追加] を選択し、作成した ZIP ファイルを参照します。

  3. [Upload] を選択します。これらのファイルは、CodePipeline の [パイプラインを作成する] ウィザードによってデプロイアクション用に作成されたソースアーティファクトです。ファイルはバケットで以下のようになっています。 

    source.zip

ステップ 2: パイプラインの作成

このセクションでは、次のアクションを使用してパイプラインを作成します。

  • Amazon S3 アクションを含むソースステージ。ここでは、ソースアーティファクトはダウンロード可能なアプリケーションのファイルです。

  • Amazon S3 デプロイアクションを含むデプロイステージ。

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

  1. AWS マネジメントコンソール にサインインし、CodePipeline コンソール (http://console.aws.amazon.com/codesuite/codepipeline/home) を開きます。

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

  3. [Step 1: Choose pipeline settings (ステップ 1: パイプラインの設定の選択)] の [パイプライン名] で、MyS3DeployPipeline と入力します。

  4. [Service role (サービスロール)] で、次のいずれかの操作を行います。

    • [New service role (新しいサービスロール)] を選択して、CodePipeline に IAM でのサービスロールの作成を許可します。[ロール名] では、ロールとポリシーの名前はいずれもデフォルトで AWSCodePipelineServiceRole-region-pipeline_name という形式になります。たとえば、このチュートリアル用に作成されるサービスロールは AWSCodePipelineServiceRole-eu-west-2-MyS3DeployPipeline です。

    • [Existing service role (既存のサービスロール)] を選択します。[ロール名] で、リストからサービスロールを選択します。

    注記

    サービスロールを作成したタイミングによっては、AWS の他のサービスをサポートするためにロールのアクセス許可の更新が必要になる場合があります。詳細については、他の AWS サービスのアクセス許可の追加 を参照してください。

  5. アーティファクトストア:

    1. [Default location (デフォルトの場所)] を選択し、パイプライン用に選択したリージョン内のパイプラインのデフォルトのアーティファクトストア (デフォルトとして指定された Amazon S3 アーティファクトバケットなど) を使用します。

    2. Amazon S3 アーティファクトバケットなどのアーティファクトストアがパイプラインと同じリージョンにすでに存在する場合は、[Custom location (カスタムの場所)] を選択します。

    注記

    これはソースコードのソースバケットではありません。これはパイプラインのアーティファクトストアです。パイプラインごとに個別のアーティファクトストア (Amazon S3 バケットなど) が必要です。パイプラインを作成または編集する場合は、パイプラインリージョンにアーティファクトバケットが必要であり、アクションを実行している AWS リージョンごとに 1 つのアーティファクトバケットが必要です。

    詳細については、「入出力アーティファクトの概要」および「CodePipeline パイプライン構造のリファレンス」を参照してください。

    [次へ] を選択します。

  6. [Step 2: Add source stage (ステップ 2: ソースステージの追加)] ページの [ソースプロバイダ] で、[Amazon S3] を選択します。[バケット] で、ソースバケットの名前を選択します。[S3 object key (S3 オブジェクトキー)] に、ソース ZIP ファイルの名前を入力します。

    [次へ] を選択します。

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

    1. [ビルドプロバイダ] で、[AWS 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. [Continue to CodePipeline (CodePipeline に進む)] を選択します。プロジェクトが正常に作成された場合はメッセージが表示されます。

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

  8. ステップ 4: デプロイステージの追加:

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

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

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

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

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

      Amazon S3 ソースを使用する Amazon S3 デプロイアクションの [Step 4: Deploy (ステップ 4: デプロイ)] ページ

    4. (オプション) [既定 ACL] で、既定 ACL と呼ばれる、あらかじめ定義された一連の許可を、アップロードされたアーティファクトに適用できます。

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

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

  9. [ステップ 5: 確認] で情報を確認し、[パイプラインの作成] を選択します。

    Amazon S3 ソースを使用する Amazon S3 デプロイアクションの完成したパイプライン

  10. パイプラインが正常に実行されたら、Amazon S3 コンソールでバケットを表示します。デプロイした ZIP ファイルがターゲットバケットの js-application フォルダの下に表示されていることを確認します。ZIP ファイルに含まれる JavaScript ファイルは 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);

ステップ 3: 任意のソースファイルに変更を加えてデプロイを確認する

ソースファイルに変更を加え、それらのファイルをソースバケットにアップロードします。これにより、パイプラインの実行がトリガーされます。ターゲットのバケットを表示し、デプロイされた出力ファイルが以下のように js-application フォルダにあることを確認します。

サンプル ZIP のダウンロード