CodeCommitの設定

ここでは、フロントエンドをコードで管理するためのGitリポジトリを、CodeCommitをリモートリポジトリとして利用して作成します。

作業手順

Gitリポジトリの作成とCloud9でのGit環境の設定

  1. 「サービス」から「CodeCommit」を選択し、「リポジトリの作成」を選択します。

  2. 「リポジトリを作成」の画面で、以下のように設定します。

    • リポジトリ名：{ユーザ名}-ecsdemo-frontend

    1

  3. 次に、今回のハンズオンで作成したCloud9環境を開き、ターミナルに以下のコマンドを入力します。

    • 任意の部分は適宜置き換えてください。
    git config --global user.name "{任意の名前}"
git config --global user.email "{任意のメールアドレス}"
git config --global credential.helper '!aws codecommit credential-helper $@'
git config --global credential.UseHttpPath true

    Gitリポジトリのクローンとアプリケーションコードのダウンロード

    1. CodeCommitの先ほど作成したリポジトリの画面右上の「URLのクローン」を選択し、「HTTPSのクローン」を選択します。
    • これでHTTPS形式のリポジトリURLがコピーされます。

    2

    1. コピーしたリポジトリのURLを用いて以下のコマンドを実行します。
    cd ~/environment
git clone {コピーしたGitリポジトリのURL}

    以下は実行例です。

    $ cd ~/environment
$ git clone https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/user1-ecsdemo-frontend
Cloning into 'user1-ecsdemo-frontend'...
warning: You appear to have cloned an empty repository.
    1. 次に、以下のコマンドでアプリケーションコードをダウンロードし、解凍します。ソースコードがダウンロードできていることを確認します。
    cd ~/environment
wget {このハンズオンのURL}/codes/ecshandson.tar.gz
tar --warning=no-unknown-keyword -xzf ecshandson.tar.gz

3

CI/CDのための準備

ここでは、クローンしたリポジトリに、ダウンロードしたファイルをコピーしながら、CI/CDのための準備をします。

  1. まず、ディレクトリを移動します。
  cd ~/environment/ecshandson/ecsdemo-frontend/
  1. 次に、ファイルをコピーします。
  cp -pr ./* ~/environment/{ユーザー名}-ecsdemo-frontend/
  cp -pr .dockerignore ~/environment/{ユーザー名}-ecsdemo-frontend/
  cp -pr .gitignore ~/environment/{ユーザー名}-ecsdemo-frontend/

  1. Cloud9環境の左側、ディレクトリツリーから{ユーザー名}-ecsdemo-frontendを開き、不要なbuildspec-dockerhub.ymlとbuildspec-test.ymlを削除します。

    • ファイルを右クリックし、「Delete」を選択すると削除できます。

  2. そして、以下のようにbuildspec.ymlを修正します。

      version: 0.2
  phases:
    pre_build:
      commands:
        - $(aws ecr get-login --region $AWS_DEFAULT_REGION --no-include-email)
        - REPOSITORY_URI=01234567890.dkr.ecr.us-east-1.amazonaws.com/{ユーザ名}-ecsdemo-frontend
        - IMAGE_TAG=$(echo $CODEBUILD_RESOLVED_SOURCE_VERSION | cut -c 1-7)

    build:
      commands:
        - docker build -t $REPOSITORY_URI:latest .
        - docker tag $REPOSITORY_URI:latest $REPOSITORY_URI:$IMAGE_TAG

    post_build:
      commands:
        - docker push $REPOSITORY_URI:latest
        - docker push $REPOSITORY_URI:$IMAGE_TAG
        - printf '{"Version":"1.0","ImageURI":"%s"}' $REPOSITORY_URI:$IMAGE_TAG > imageDetail.json

  artifacts:
    files: imageDetail.json
    1. appspec.ymlを作成します。以下の内容を修正せず、そのままお使いください。

    • お急ぎの方用のappspec.ymlダウンロードリンクはこちらです。

    • ファイルの作成は、ディレクトリを右クリックし、「New File」を選択すると作成できます。

    • appspec.ymlファイルはCodeDeployがデプロイを管理するために使用するファイルです。

    • TASK_DEFINITIONプレースホルダーは、パイプラインが走ると自動的に置き換わります。

    • 今回のデプロイ対象はECSなので、「ECSタスク定義」「ロードバランサー情報」などを含める必要があります。

      version: 0.0
  Resources:
    - TargetService:
        Type: AWS::ECS::Service
        Properties:
          TaskDefinition: "<TASK_DEFINITION>"
          LoadBalancerInfo:
            ContainerName: "ecsdemo-frontend"
            ContainerPort: "3000"

  3. taskdef.jsonを作成します。こちらは「サービス」から「ECS」を選択し、「タスク定義」、「{ユーザ名}-ecsdemo-frontend」、「最新のRevisionを表示」、「JSON」と順に選択すると表示される内容をコピーして、利用します。

5

  1. 先ほどコピーして作成したtaskdef.jsonを以下のように修正します。

    • taskdef.jsonはFargateで起動されるタスクの情報が記載されたファイルです。

    • 今回はパイプラインがトリガーされると動的にタスク定義を更新します。

    • imageを<IMAGE1_NAME>に変更しますが。このプレースホルダーは「Build」アクション後に動的にアップデートされます。

      {
          "memoryReservation": 128,
          "volumesFrom": [],
          "stopTimeout": null,
          "image": "<IMAGE1_NAME>",
          "startTimeout": null,
          "dependsOn": null,
          "disableNetworking": null,
          "interactive": null,
          "healthCheck": null
      }
  1. 最後に、これらの変更を以下のコマンドでリモートリポジトリへプッシュします。
  cd ~/environment/{ユーザ名}-ecsdemo-frontend/
  git add -A
  git commit -m "my first commit"
  git push origin master

以下は実行例です。

  Admin:~/environment/user1-ecsdemo-frontend (master) $ git push origin master
  Counting objects: 135, done.
  Delta compression using up to 2 threads.
  Compressing objects: 100% (130/130), done.
  Writing objects: 100% (135/135), 48.51 KiB | 2.42 MiB/s, done.
  Total 135 (delta 51), reused 0 (delta 0)
  To https://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/user1-ecsdemo-frontend
  * [new branch]      master -> master

実装の確認

  1. CodeCommitコンソールの「コミット」から、コミット履歴が見えることを確認します。

6