オプション 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 デプロイ設定を指定します。

前提条件

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

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. [ファイルの選択] を選択し、ファイルを参照します。ユーザー名とメールアドレスを入力して、変更をコミットします。[Commit changes] (変更のコミット) を選択します。
  4. アップロードするファイルごとにこのステップを繰り返します。

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

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

ソースアーティファクトが Web サイトのファイルである CodeCommit アクションを使用したソースステージ。
Amazon S3 デプロイメントアクションを使用したデプロイメントステージ。

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

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

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

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

[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/

サンプル Web ページが表示されます。

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

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

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

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

前提条件

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

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

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

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

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

CodeBuild 構築プロジェクトに使用される buildspec.yml ファイル。
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 コンソール https://console.aws.amazon.com/codesuite/codebuild/home を開きます。
[ようこそ] ページ、[Getting started (開始方法)] ページ、または [パイプライン] ページで、[パイプラインの作成] を選択します。
Eclipseステップ 1: パイプラインの設定の選択、でパイプライン名「」と入力します。MyS3DeployPipeline。
サービスロール で、新しいサービスロール を選択して、CodePipeline が IAM でサービスロールを作成できるようにします。
[詳細設定] をデフォルト設定のままにし、[次へ] を選択します。
Eclipseステップ 2: ソースステージを追加する、でソースプロバイダーで、Amazon S3。[バケット] で、ソースバケットの名前を選択します。[S3 object key (S3 オブジェクトキー)] に、ソース ZIP ファイルの名前を入力します。必ず、ファイル拡張子.zip を含めてください。

[Next] (次へ) をクリックします。
Eclipseステップ 3: ビルドステージを追加する:
1. Eclipseビルドプロバイダーで、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 Skills Skills をデプロイするパイプラインを作成する

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