コンソール画面での大まかな手順
- 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
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でデプロイするためのビルドプロセスを自動化
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が含まれる
- ECSのデプロイに必要な
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ブラウザに表示されることを確認