オプション 1: 静的ウェブサイトファイルを Amazon S3 にデプロイするオプション 2：構築されたアーカイブファイルを S3 ソースバケットから Amazon S3 にデプロイする

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

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

重要

パイプラインの作成の一環として、お客様が提供する S3 アーティファクトバケットがアーティファクト CodePipeline にによって使用されます。（これは S3 ソースアクションに使用されるバケットとは異なります）。S3 アーティファクトバケットがパイプラインのアカウントとは異なるアカウントにある場合は、S3 アーティファクトバケットがによって所有 AWS アカウントされており、安全で信頼できることを確認してください。

注記

ソースリポジトリからファイルを削除しても、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 リポジトリ。で作成した AWS CodeCommit リポジトリを使用できますチュートリアル: シンプルなパイプラインを作成する (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: パイプラインを作成する

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

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

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

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

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

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

[Next (次へ)] を選択します。
ステップ 4: デプロイステージを追加する:
1. [デプロイプロバイダ] で、[Amazon S3] を選択します。
2. [バケット] にパブリックバケットの名前を入力します。
3. [Extract file before deploy (デプロイ前にファイルを展開)] を選択します。
  
  注記
  [デプロイ前にファイルを抽出] を選択しないと、デプロイに失敗します。これは、パイプライン内の AWS CodeCommit アクションがソースアーティファクトを圧縮し、ファイルが ZIP ファイルであるためです。
  
  [Extract file before deploy (デプロイ前にファイルを展開)] を選択すると、[Deployment path (デプロイパス)] が表示されます。使用するパスの名前を入力します。これにより、ファイルが展開されるフォルダ構造が Amazon S3 に抽出されます。このチュートリアルでは、このフィールドを空欄にします。
4. （オプション) Canned ACLでは、アップロードされたアーティファクトに、Canned ACLと呼ばれる事前定義された許可のセットを適用できます。
5. (オプション) [キャッシュコントロール] で、キャッシュパラメータを入力します。これを設定して、リクエスト/レスポンスのキャッシュ動作を制御できます。有効な値については、 HTTPオペレーションのCache-Controlヘッダーフィールドを参照してください。
6. [Next (次へ)] を選択します。
[ステップ 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 ターゲットバケットにデプロイします。コンパイルされたコードはアーカイブとしてターゲットバケットに保存されます。

前提条件

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

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ファイルを参照します。
[アップロード] を選択します。これらのファイルは、でのデプロイアクション用にパイプラインの作成ウィザードによって作成されたソースアーティファクトです CodePipeline。ファイルはバケットで以下のようになっています。
```
source.zip
```

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

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

ソースアーティファクトがダウンロード可能なアプリケーションのファイルである Amazon S3 アクションを含むソースステージ。
Amazon S3 デプロイメントアクションを使用したデプロイメントステージ。

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

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

[Next (次へ)] を選択します。
[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 (次へ)] を選択します。
ステップ 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. （オプション) Canned ACLでは、アップロードされたアーティファクトに、Canned ACLと呼ばれる事前定義された許可のセットを適用できます。
5. (オプション) [キャッシュコントロール] で、キャッシュパラメータを入力します。これを設定して、リクエスト/レスポンスのキャッシュ動作を制御できます。有効な値については、 HTTPオペレーションのCache-Controlヘッダーフィールドを参照してください。
6. [Next (次へ)] を選択します。
[ステップ 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