コンソール画面での大まかな手順

GitHubリポジトリの準備: "https://github.com/shu130/aws_study29"
Amazon ECRリポジトリの作成
CodeStar ConnectionでGitHubとAWSを連携
CodeBuildプロジェクトの作成
ECSでサービスをデプロイ
CodePipelineを作成し、全体のCI/CDパイプラインを構築

概要図

1. GitHubリポジトリの準備

Dockerfile: Dockerイメージを作成
buildspec.yml: CodeBuildがビルドプロセスを実行するための設定ファイル
index.html: Dockerコンテナの中で使うサンプルの静的ファイル

Dockerfile：

nginx の公式Dockerイメージを元にして、新しいコンテナを作成
シンプルな index.html を nginx の公開ディレクトリにコピー
コンテナ起動時に**nginx をフォアグラウンドで起動**し、Webサーバーを起動

Dockerfile

# Dockerfile
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
CMD ["nginx", "-g", "daemon off;"]

index.html

確認用のHTMLファイル

<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Dockerテストページ</title>
</head>
<body>
    <h1>Hello, Docker!</h1>
    <p>このページが無事表示されていればOK！</p>
</body>
</html>

buildspec.yml：

CodeBuild で使う buildspec.yml の設定ファイル
DockerイメージをECRにビルド・プッシュし、ECSでデプロイするためのビルドプロセスを自動化

buildspec.yml

version: 0.2

env:
  variables:
    ECR_REPOSITORY: https://github.com/shu130/aws_study29

phases:
  pre_build:
    commands:
      - echo Logging in to Amazon ECR...
      - aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin ${ECR_REPOSITORY}
  build:
    commands:
      - echo Building the Docker image...
      - docker build -t container-test-app .
      - docker tag container-test-app:latest ${ECR_REPOSITORY}:latest
  post_build:
    commands:
      - echo Pushing the Docker image...
      - docker push ${ECR_REPOSITORY}:latest
      - echo Build completed on `date`
      - echo Creating imagedefinitions.json...
      - |
        echo '[
          {
            "name": "container-test-app",
            "imageUri": "'${ECR_REPOSITORY}':latest"
          }
        ]' > imagedefinitions.json
      - echo imagedefinitions.json created.

artifacts:
  files:
    - imagedefinitions.json

`env: variables`:

ビルド環境で使う変数を定義
ECR_REPOSITORY という変数で ECR のリポジトリURLを指定
ECRリポジトリ作成後にURIを記載する

1. `pre_build`: ビルド前の準備

このフェーズでは、ECRにログインするためのコマンドを実行する。

aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin ${ECR_REPOSITORY}:
- AWS ECRにログインするためのコマンド
- まず、aws ecr get-login-password を使ってAWSからログイン用のパスワードを取得し、Dockerのログインコマンドに渡す
- ECRに対してDockerを使って操作する準備が整う

2. `build`: Dockerイメージのビルドとタグ付け

このフェーズでは、Dockerイメージをビルドし、ECRにプッシュするためのタグを付ける。

docker build -t container-test-app .:
- 現在のディレクトリ（.）にある Dockerfile を元に、container-test-app という名前のDockerイメージをビルド
docker tag container-test-app:latest ${ECR_REPOSITORY}:latest:
- ビルドしたDockerイメージに「タグ」を付ける
- タグ付けは、ECRにイメージをプッシュする際に必要
- container-test-app:latest はローカルでのイメージ名
- ${ECR_REPOSITORY}:latest はECRにプッシュする際のイメージ名

3. `post_build`: イメージのプッシュと後処理

ビルド後のフェーズ。ここでは、DockerイメージをECRにプッシュし、ECSデプロイ用のファイル（imagedefinitions.json）を作成する。

docker push ${ECR_REPOSITORY}:latest:
- ECRにDockerイメージをプッシュ
- latest タグ付きのイメージがECRにアップロードされる
echo '[ { "name": "container-test-app", "imageUri": "'${ECR_REPOSITORY}':latest" } ]' > imagedefinitions.json:
- ECSのデプロイに必要な imagedefinitions.json というファイルを作成
- ECSが使用するDockerイメージの名前とECRのURLが含まれる

`artifacts`: 出力する成果物

ビルドの成果物（アーティファクト）として保存するファイルを指定する。

files: - imagedefinitions.json:
- ビルドの最後に imagedefinitions.json を保存し、次のステップでECSにデプロイする際に使用

2. ECRリポジトリの作成

ECRを使用してDockerイメージを保存する。

ECRリポジトリの作成:
- 作成後にURIをbuildspec.ymlの変数に記載

3. CodeStar ConnectionでGitHubとAWSを連携

AWSとGitHubを接続するために、CodeStar Connectionsを使用する。

CodeStar Connectionの作成:

コンソール画面のCodePipeline
デベロッパー用ツール＞接続＞接続を作成
GitHub App をインストールしてボットとして接続

4. CodeBuildプロジェクトの作成

GitHubリポジトリのコードからDockerイメージをビルドし、ECRにプッシュする。

ソースプロバイダとして「github」を選び、上記で作成したCodeStar Connections接続を選択
アーティファクトは特に指定しない
(リポジトリ内の buildspec.yml に、DockerイメージをビルドしECRにプッシュするためのステップが定義済み)
ECRのコンソール画面でプッシュされていることを確認

5. ECSでサービスをデプロイ

ビルドされたDockerイメージをデプロイするためのECSクラスターを準備する。

Fargate でクラスターを作成
タスク定義作成：コンテナにはECRにプッシュされたDockerイメージのURLを指定
サービス作成：必要なVPC,サブネット,セキュリティグループを指定して、ECS上でコンテナを実行
index.htmlの内容が表示されることを確認

6. CodePipelineを作成

GitHubでコードがプッシュされた時にビルド・デプロイまでの自動化を行う。

パイプライン名を指定
ソースプロバイダとして「github v2」を選び、上記で作成したCodeStar Connections接続を選択
ビルドステージで「CodeBuild」を選択し、上記で作成したCodeBuildプロジェクト名を指定
デプロイステージで「Amazon ECS」を選び、ターゲットとなるECSクラスターとサービスを指定、イメージ定義ファイルにimagedefinitions.jsonを指定

確認

githubにあるindex.htmlを直接編集
pipelineが発動し、編集した内容でWebブラウザに表示されることを確認