オプション 1 静的Webサイトファイルの導入先 Amazon S3 オプション 2: ビルドされたアーカイブファイルを Amazon S3 S3ソースバケットから

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

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

注記

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

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

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

重要

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

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

オプション 1 静的Webサイトファイルの導入先 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. [ファイルの追加]、[ファイルのアプロード] の順に選択します。
  3. [ファイルの選択] を選択し、ファイルを参照します。ユーザー名とメールアドレスを入力して、変更をコミットします。[変更のコミット] を選択します。
  4. アップロードするファイルごとにこのステップを繰り返します。

ステップ 2. パイプラインを作成する

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

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

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

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

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

[次] を選択します。
内 ステップ3: ビルドステージを追加、選択 ビルドステージをスキップを選択し、警告メッセージを承認します。 スキップ もう一度。

[次] を選択します。
内 ステップ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. [次] を選択します。
内 ステップ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: ビルドされたアーカイブファイルを Amazon S3 S3ソースバケットから

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

Prerequisites

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

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

注記

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

ステップ 1. ソースファイルを作成して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);

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

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

ステップ 2. パイプラインを作成する

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

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

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

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

[次] を選択します。
内 ステップ3: ビルドステージを追加:
1. [ビルドプロバイダ] で、[AWS CodeBuild] を選択します。
2. [Create build project (ビルドプロジェクトの作成)] を選択します。[プロジェクトの作成] ページで:
3. [プロジェクト名] に、このビルドプロジェクトの名前を入力します。
4. [環境] で、[マネージド型イメージ] を選択します。[オペレーティングシステム] で、[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. [次] を選択します。
内 ステップ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. [次] を選択します。
内 ステップ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);
```