選項 1：將靜態網站檔案部署到 Amazon S3 選項 2：從 S3 來源儲存貯體將建置的存檔檔案部署到 Amazon S3

教學課程：建立使用 Amazon S3 做為部署供應商的管道

在本教學中，您將設定管道，在部署階段使用 Amazon S3 做為部署動作提供者持續交付檔案。當您變更來源儲存庫中的來源檔案時，完整的管道便會偵測到變更。接著，管道會使用 Amazon S3 將檔案部署到儲存貯體。每次您在來源位置修改或新增網站檔案時，部署都會以最新檔案建立網站。

注意

即使您從來源儲存庫刪除檔案，S3 部署動作也不會刪除與已刪除檔案對應的 S3 物件。

本教學課程提供兩種選項：

建立將靜態網站部署到您的 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 存儲庫。這些檔案是 Create Pipeline (建立管道) 精靈針對 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. 選取 Choose file (選擇檔案)，然後瀏覽您的檔案。輸入您的使用者名稱和電子郵件地址來確定變更。選擇 Commit changes (遞交變更)。
  4. 對於您要上傳的每個檔案重複此步驟。

步驟 2：建立管道

在本節中，您可以採取下列動作建立管道：

具有 CodeCommit 動作的來源階段，其中來源成品是您網站的檔案。
具有 Amazon S3 部署動作的部署階段。

使用精靈建立管道

請登入AWS Management Console並開啟 CodePipeline 主控台，網址為 http://console.aws.amazon.com/codesuite/codepipeline/home。
在 Welcome (歡迎) 頁面、Getting started (入門) 頁面、或者 Pipelines (管道) 頁面上，選擇 Create pipeline (建立管道)。
在 Step 1: Choose pipeline settings (步驟 1：選擇管道設定) 的 Pipeline name (管道名稱) 中，輸入 MyS3DeployPipeline。
在管線類型中，針對本教學課程的目的選擇 V1。您也可以選擇 V2；但是請注意，管道類型在特性和價格上有所不同。如需詳細資訊，請參閱管線類型。
在 [服務角色] 中，選擇 [新增服務角色] CodePipeline 以允許在 IAM 中建立服務角色。
將 Advanced settings (進階設定) 下的設定保留為預設值，然後選擇 Next (下一步)。
在 Step 2: Add source stage (步驟 2：新增來源階段) 的 Source provider (來源提供者) 中，選擇 AWS CodeCommit。在 Repository name (儲存庫名稱) 中，選擇您在步驟 1：建立 CodeCommit 儲存庫中建立的 CodeCommit 儲存庫名稱。在 Branch name (分支名稱) 中，選擇包含最新程式碼更新的分支名稱。除非您自己建立不同分支，否則僅能使用 main。

選取儲存庫名稱和分支後，會顯示要為此管道建立的 Amazon E CloudWatch vents 規則。

選擇下一步。
在 Step 3: Add build stage (步驟 3：新增建置階段) 中，選擇 Skip build stage (跳過建置階段)，然後再次選擇 Skip (跳過) 來接受警告訊息。

選擇下一步。
在 Step 4: Add deploy stage (步驟 4：新增部署階段) 中：
1. 在Deploy provider (部署提供者)中，選擇 Amazon S3。
2. 在 Bucket (儲存貯體) 中，輸入您公有儲存貯體的名稱。
3. 選取 Extract file before deploy (部署前解壓縮檔案)。
  
  注意
  如果您沒有選取 Extract file before deploy (部署前解壓縮檔案)，部署則會失敗。這是因為您管道中的 AWS CodeCommit 動作會壓縮來源成品，且您的檔案是 ZIP 檔案。
  
  選取 Extract file before deploy (部署前解壓縮檔案) 時，則會顯示 Deployment path (部署路徑)。請輸入您要使用的路徑的名稱。這會在 Amazon S3 中建立檔案擷取到的資料夾結構。在本教學課程中，請將此欄位保留空白。
4. (選用) 在 Canned ACL (固定的 ACL) 中，您可以將一組預先定義的授與 (稱為固定的 ACL) 套用至上傳的成品。
5. (選用) 在 Cache control (快取控制) 中，輸入快取參數。您可以將此設為控制請求/回應的快取行為。如需有效值，請參閱 HTTP 操作的 Cache-Control 標頭欄位。
6. 選擇下一步。
在 Step 5: Review (步驟 5：檢閱) 中，檢閱資訊，然後選擇 Create pipeline (建立管道)。
管道成功執行後，開啟 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 代碼和構建規格 .yml 文件。將來源檔案合併為 ZIP 檔案之後，您可以將來源 ZIP 檔案上傳到 S3 來源儲存貯體，並使用 CodeBuild 階段將建置的應用程式 ZIP 檔案部署到 S3 目標儲存貯體。經過編譯的程式碼會在您的目標儲存貯體中做為存檔保留。

必要條件

您必須已擁有下列各項目：

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 主控台中，針對您的來源儲存貯體選擇「上傳」。選擇 Add files (新增檔案)，然後瀏覽您建立的 ZIP 檔案。
選擇上傳。這些檔案是 Create Pipeline (建立管道) 精靈針對 CodePipeline 中的部署動作所建立的來源成品。您的檔案在您的儲存貯體中應該如下所示：
```
source.zip
```

步驟 2：建立管道

在本節中，您可以採取下列動作建立管道：

具有 Amazon S3 動作的來源階段，其中來源成品是可下載應用程式的檔案。
具有 Amazon S3 部署動作的部署階段。

使用精靈建立管道

請登入AWS Management Console並開啟 CodePipeline 主控台，網址為 http://console.aws.amazon.com/codesuite/codepipeline/home。
在 Welcome (歡迎) 頁面、Getting started (入門) 頁面、或者 Pipelines (管道) 頁面上，選擇 Create pipeline (建立管道)。
在 Step 1: Choose pipeline settings (步驟 1：選擇管道設定) 的 Pipeline name (管道名稱) 中，輸入 MyS3DeployPipeline。
在 [服務角色] 中，選擇 [新增服務角色] CodePipeline 以允許在 IAM 中建立服務角色。
將 Advanced settings (進階設定) 下的設定保留為預設值，然後選擇 Next (下一步)。
在 Step 2: Add source stage (步驟 2：新增來源階段) 的 Source provider (來源提供者) 中，選擇 Amazon S3。在 Bucket (儲存貯體) 中，輸入您來源儲存貯體的名稱。在 S3 object key (S3 物件金鑰) 中，輸入您的來源 ZIP 檔案名稱。請確保您加入 .zip 副檔名。

選擇下一步。
在 Step 3: Add build stage (步驟 3：新增建置階段)：
1. 在 Build provider (建置供應商) 中，選擇 CodeBuild。
2. 選擇 Create build project (建立建置專案)。在 Create project (建立專案) 頁面：
3. 在 Project name (專案名稱) 中，輸入此建置專案的名稱。
4. 在 Environment (環境) 中，選擇 Managed image (受管映像)。針對 Operating system (作業系統)，選擇 Ubuntu。
5. 針對 Runtime (執行時間)，選擇 Standard (標準)。針對 Runtime version (執行時間版本)，選擇 aws/codebuild/standard:1.0。
6. 在 Image version (映像版本) 中，選擇 Always use the latest image for this runtime version (總是將最新的映像用於此執行時間版本)。
7. 對於服務角色，請選擇您的 CodeBuild 服務角色，或建立一個服務角色。
8. 對於 Build specifications (建置規格)，選擇 Use a buildspec file (使用 buildspec 檔案)。
9. 選擇「繼續」 CodePipeline。如果已成功建立專案，則會顯示訊息。
10. 選擇下一步。
在 Step 4: Add deploy stage (步驟 4：新增部署階段) 中：
1. 在Deploy provider (部署提供者)中，選擇 Amazon S3。
2. 在 Bucket (儲存貯體) 中，輸入您 S3 目標儲存貯體的名稱。
3. 請確定已清除 Extract file before deploy (部署前解壓縮檔案)。
  
  清除 Extract file before deploy (部署前解壓縮檔案) 時，則會顯示 S3 object key (S3 物件金鑰)。請輸入您要使用的路徑名稱：js-application/{datetime}.zip
  
  這將在 Amazon S3 中創建一個文件js-application夾，該文件夾將文件提取到該文件夾。在此資料夾中，{datetime} 變數會在管道執行時在每個輸出檔案上建立時間戳記。
4. (選用) 在 Canned ACL (固定的 ACL) 中，您可以將一組預先定義的授與 (稱為固定的 ACL) 套用至上傳的成品。
5. (選用) 在 Cache control (快取控制) 中，輸入快取參數。您可以將此設為控制請求/回應的快取行為。如需有效值，請參閱 HTTP 操作的 Cache-Control 標頭欄位。
6. 選擇下一步。
在 Step 5: Review (步驟 5：檢閱) 中，檢閱資訊，然後選擇 Create pipeline (建立管道)。

管道成功執行後，請在 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。

您必須啟用 Javascript，才能使用 AWS 文件。請參閱您的瀏覽器說明頁以取得說明。

文件慣用形式

教學：建立部署 Amazon Alexa 技能的管道

教學課程：將應用程式發佈到 AWS Serverless Application Repository