オプション 1: Amazon S3 への静的ウェブサイトファイルのデプロイ方法オプション 2: S3 ソースバケットから Amazon S3 にビルド済みアーカイブファイルをデプロイする

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

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

注記

ソースリポジトリからファイルを削除しても、S3 デプロイアクションでは、削除されたファイルに対応する S3 オブジェクトは削除されません。

このチュートリアルには 2 つのオプションがあります。

静的ウェブサイトを S3 パブリックバケットにデプロイするパイプラインを作成する。この例では、パイプラインを作成します。AWS CodeCommitソースアクションと Amazon S3 デプロイアクションのいずれかです。「オプション 1: Amazon S3 への静的ウェブサイトファイルのデプロイ方法」を参照してください。
サンプル TypeScript コードを JavaScript にコンパイルし、CodeBuild 出力アーティファクトをアーカイブ用の S3 バケットにデプロイするパイプラインを作成する。この例では、Amazon S3 ソースアクション、CodeBuild ビルドアクション、および Amazon S3 デプロイアクションを使用するパイプラインを作成します。「オプション 2: S3 ソースバケットから Amazon S3 にビルド済みアーカイブファイルをデプロイする」を参照してください。

重要

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

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

オプション 1: Amazon S3 への静的ウェブサイトファイルのデプロイ方法

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

Prerequisites

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

CodeCommit リポジトリです。「チュートリアル: シンプルなパイプラインを作成する (CodeCommit リポジトリ)」で作成した AWS CodeCommit リポジトリを使用できます。
静的ウェブサイトのソースファイル。このリンクを使用してサンプル静的ウェブサイトをダウンロードします。sample-website.zip をダウンロードすると、以下のファイルが生成されます。
- index.html ファイル
- main.css ファイル
- graphic.jpg ファイル
ウェブサイトホスティング用に設定された S3 バケット。「静的ウェブサイトを Amazon S3 でホスティングする」を参照してください。必ずパイプラインと同じリージョンにバケットを作成します。

注記

ウェブサイトのホスティングには、バケットへのパブリック読み取りアクセスを許可するアクセス設定が必要です。ウェブサイトのホスティングを除き、S3 バケットへのパブリックアクセスをブロックするデフォルトのアクセス設定を維持してください。

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

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

ファイルを CodeCommit リポジトリにプッシュするには

ダウンロードしたサンプルファイルを解凍します。ZIP ファイルをリポジトリにアップロードしないでください。
ファイルを CodeCommit リポジトリにプッシュまたはアップロードします。これらのファイルは、によって作成されたソースアーティファクトです。パイプラインを作成するウィザードを使用してデプロイメントCodePipeline。ファイルは、ローカルディレクトリに次のように表示されます。
```
index.html
main.css
graphic.jpg
```
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. [ファイルの選択] を選択し、ファイルを参照します。ユーザー名とメールアドレスを入力して、変更をコミットします。[変更のコミット] を選択します。
  4. アップロードするファイルごとにこのステップを繰り返します。

ステップ 2: パイプラインを作成します。

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

ソースアーティファクトはウェブサイトのファイルです。ここでは、CodeCommit アクションを使用します。ここでは、ソースアーティファクトはウェブサイトのファイルです。
Amazon S3 デプロイアクションを含むデプロイステージ。

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

にサインインします。AWS Management Consoleを開き、CodePipeline コンソールをhttp://console.aws.amazon.com/codesuite/codepipeline/home。
[ようこそ] ページ、[Getting started (開始方法)] ページ、または [パイプライン] ページで、[パイプラインの作成] を選択します。
Eclipseステップ 1: パイプラインの設定の選択, でパイプライン名にと入力します。MyS3DeployPipeline。
Eclipseサービスロール] で、[新しいサービスロールCodePipeline が IAM でのサービスロールの作成を許可します。
[詳細設定] をデフォルト設定のままにし、[次へ] を選択します。
Eclipseステップ 2: ソースステージの追加, でソースプロバイダー] で、[AWS CodeCommit。Eclipseリポジトリ名で、で作成した CodeCommit リポジトリの名前を選択します。ステップ 1: CodeCommit リポジトリを作成する。[Branch name] で、最新のコード更新を含むブランチの名前を選択します。独自のブランチを作成する場合を除き、ここで使用できるのは main のみです。

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

[Next] を選択します。
Eclipseステップ 3: ビルドステージの追加] で、[ビルドステージのスキップを選択し、警告メッセージを受け入れます。スキップするをクリックします。

[Next] を選択します。
Eclipseステップ 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] を選択します。
Eclipseステップ 5: 確認を選択し、情報を確認してから、[パイプラインの作成。
パイプラインが正常に実行されたら、Amazon S3 コンソールを開き、ファイルがパブリックバケットに表示されていることを確認します。
```
index.html
main.css
graphic.jpg
```
エンドポイントにアクセスしてウェブサイトをテストします。エンドポイントは http://bucket-name.s3-website-region.amazonaws.com/ という形式に従います。

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

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

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

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

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

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

Prerequisites

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

S3 ソースバケット。「チュートリアル: シンプルなパイプラインを作成する (S3 バケット)」で作成したバケットを使用できます。
S3 ターゲットバケット。「静的ウェブサイトを Amazon S3 でホスティングする」を参照してください。必ず、作成するパイプラインと同じ AWS リージョンにバケットを作成してください。

注記

この例では、ファイルをプライベートバケットにデプロイする方法を示します。ウェブサイトのホスティング用にターゲットバケットを有効にしたり、バケットを公開するポリシーをアタッチしたりしないでください。

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

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

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

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

ファイルは、ローカルディレクトリに次のように表示されます。
```
buildspec.yml
index.ts
```
ファイルを圧縮して、ファイルに source.zip という名前を付けます。
Amazon S3 コンソールで、ソースバケットの [アップロード。[ファイルを追加] を選択し、作成した ZIP ファイルを参照します。
[Upload] を選択します。これらのファイルは、によって作成されたソースアーティファクトです。パイプラインを作成するウィザードを使用してデプロイメントCodePipeline。ファイルはバケットで以下のようになっています。
```
source.zip
```

ステップ 2: パイプラインを作成します。

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

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

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

にサインインします。AWS Management Consoleを開き、CodePipeline コンソールをhttp://console.aws.amazon.com/codesuite/codepipeline/home。
[ようこそ] ページ、[Getting started (開始方法)] ページ、または [パイプライン] ページで、[パイプラインの作成] を選択します。
Eclipseステップ 1: パイプラインの設定の選択, でパイプライン名にと入力します。MyS3DeployPipeline。
Eclipseサービスロール] で、[新しいサービスロールCodePipeline が IAM でのサービスロールの作成を許可します。
[詳細設定] をデフォルト設定のままにし、[次へ] を選択します。
Eclipseステップ 2: ソースステージの追加, でソースプロバイダー] で、[Amazon S3。[バケット] で、ソースバケットの名前を選択します。[S3 object key (S3 オブジェクトキー)] に、ソース ZIP ファイルの名前を入力します。必ず、ファイル拡張子.zip を含めてください。

[Next] を選択します。
Eclipseステップ 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. [Next] を選択します。
Eclipseステップ 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] を選択します。
Eclipseステップ 5: 確認を選択し、情報を確認してから、[パイプラインの作成。
パイプラインが正常に実行されたら、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 フォルダにあることを確認します。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

チュートリアル: Amazon Alexa Skill をデプロイするパイプラインを作成する

チュートリアル: にアプリケーションを発行するAWS Serverless Application Repository