Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

現在の場所：ホーム / 技術 Tips & Tutorials / AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~

By コメントを書く

AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~

AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~

クラウド上でアプリケーションをDockerイメージとして管理し、Dockerコンテナとして運用する方法として、AWSのECRとECSがあります。今回はECRとECSの入門として、ReactのDockerアプリケーションをAWS上で稼働させる方法を紹介します。

はじめに

アプリケーションをDocker化するのが主流となっている昨今において、Dockerイメージの管理やDockerコンテナの運用をクラウド上で完結させることが求められています。AWSではそのためのサービスとして、Dockerイメージ管理のためのECR、Dockerコンテナ運用のためのECSが提供されています。

今回はReactのDockerアプリケーションを対象として、AWSのECRとECSを使って、AWS上でDockerコンテナを稼働させてみましょう。

前提

以下の準備が完了している必要があります。

  • NodeJSがインストールされていること
  • Dockerがインストールされていること
  • AWS CLIがインストールされ、適切なIAMのユーザが作成済みで、プロファイルに設定されていること(AWS CLIでECSをすべて操作するにはIAMのユーザ「AmazonEC2ContainerServiceFullAccess」のロールを割り当てる必要があります)
  • AWS上にテスト用のVPCとパブリックなサブネットが構築済みであること(今回はデフォルトをそのまま使います)
  • AWS上にテスト用のセキュリティグループが構築済みであること(今回はデフォルトのセキュリティグループに、自分のIP向けにSSHポート22、HTTPポート80、TCPポート「32768–61000」を公開する設定を追加したものを使います)
  • AWSのEC2インスタンスにSSHするためのキーペアが作成済みであること(今回は「MyKeyPair」という名前で作成したものを使います)

上記のAWSの設定の意味が理解できない場合は、この記事の内容に取り組む前にIAM、EC2、VPC、AWS CLIの基礎を学んだ方が良いでしょう。

細かいバージョンは「環境」を参照してください。

ECRとは？

ECR(Elastic Container Registry)とは、AWSが提供しているDocker向けのレジストリーサービスです。Dockerのレジストリーサービスと言えばDocker社が提供しているDockerHubですが、そのAWS版です。詳しい説明は公式ドキュメントを参照してください。

ECSとは？

ECS(Elastic Container Service)とは、AWSが提供しているDocker向けのコンテナオーケストレーションサービスです。簡単に言えばAWS上でDockerコンテナを稼働させる環境と、そのコンテナをスケールするための機能が主に提供されています。使用イメージとしては、開発したDockerアプリケーションをビルドしてイメージにし、そのイメージをECRにPushして管理し、そのイメージを使ってECSでDockerコンテナを起動して運用するような感じになります。こちらも詳しくは公式ドキュメントを参照してください。

ReactのDockerアプリケーションの作成

今回の主題ではありませんが、ECRとECSを使うためにDockerアプリケーションが必要なのでReactで簡単に作成します。

ベースを作る

create-react-appでReactのサンプルアプリケーションを作り、Docker化しましょう。

$ create-react-app sample-react-ecs-app
$ cd sample-react-ecs-app/
$ touch Dockerfile
$ tree -I node_modules
.
├── Dockerfile
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

Dockerファイルの作成

ReactアプリケーションをNginxに乗せる構成にしましょう。

Dockerfile

Dockerfileは以下のようにします。

FROM node:11-alpine as builder
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn install
COPY . .
RUN yarn build

FROM nginx:1.15-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80

完成です。

サンプルアプリケーションの起動

完成したサンプルアプリケーションを起動してみましょう。

$ docker image build -t sample-react-ecs-app:latest .
$ docker images | grep sample-react-ecs-app
sample-react-ecs-app   latest              1416916c000b        17 seconds ago      18.2MB
$ docker container run --rm -p 80:80 sample-react-ecs-app:latest

起動した状態でブラウザで「localhost:80」を開きます。

NewImage

OKですね。

ECRのリポジトリ作成とDockerイメージの管理

それではAWSのECRでDockerリポジトリを作っていきましょう。

ECRでリポジトリを作成する

AWSコンソールにログインし、「ECS」をクリックします。

NewImage

「Repositories」を選択し、「Get started」をクリックします。

NewImage

「Repository name」に任意のリポジトリ名(今回は「sample-react-ecs-app」)を入力し、「Next step」をクリックします。

NewImage

「Done」をクリックして完了です。

NewImage

新しいリポジトリが作成されました。

NewImage

DockerイメージをECRにPushする

リポジトリ画面の「View Push Commands」をクリックます。

NewImage

すると以下のようにPushする手順が出てきます。

NewImage

それでは、この手順通りにPushしてみましょう。(すでにDockerイメージはビルド済みですが、手順通りにビルドもしています)

$ $(aws ecr get-login --no-include-email --region us-east-1)
WARNING! Using --password via the CLI is insecure. Use --password-stdin.
Login Succeeded
$ docker build -t sample-react-ecs-app .
$ docker tag sample-react-ecs-app:latest XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/sample-react-ecs-app:latest
$ docker push XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/sample-react-ecs-app:latest
The push refers to repository [XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/sample-react-ecs-app]
61b57277474b: Pushed
7f875a1274be: Pushed
42538a727f9c: Pushed
5abab21bd32e: Pushed
df64d3292fd6: Pushed
latest: digest: sha256:b6477ba3dfc6932f2d4ce911fe5b53033b31dbe57254ecb057634b9500a232a2 size: 1363

画面を確認してみましょう。

NewImage

ECRにDockerイメージがPushされていることが確認できました。

ECSによるDockerコンテナの運用

次にDockerイメージをECSで稼働させましょう。

ECSクラスターの作成

「Clusters」を選択し、「Create Cluster」をクリックします。

NewImage

「EC2 Linux + Networking」を選択し、「Next step」をクリックします。

NewImage

今回はクラスターに前半に以下を設定します。

  • Cluster name: 「sample-react-ecs-app-cluster」
  • Provisioning Model: On-Demand Instance
  • EC2 Instance type: t2.micro
  • Number of Instance: 2 (今回は2つのEC2を使います)
  • Key pair: MyKeyPair

NewImage

クラスターの後半には以下を設定します。

  • VPC: 今回のテスト用に準備したVPC
  • Subnet: 今回のテスト用に準備したパブリックなサブネットを2つ
  • Security group: 今回のテスト用に準備したセキュリティグループ
  • Container Instance IAM role: ecsInstanceRole (自動で作成される)

NewImage

「Create」をクリックします。

すると以下のようにクラスターが作成されます。作成が完了したら「View Cluster」をクリックします。

NewImage

「Registered container instances」が「2」になり、「ECS Instances」のタグをクリックすると2つのインスタンスが「ACTIVE」になっていることが確認できます。

NewImage

また、「EC2 Dashboard」を見ると、EC2インスタンスが自動的に2つ起動しています。

NewImage

これでクラスターの作成が完了しました。

ECSタスクの作成

「Task Definitions」を選択し、「Create new Task Definition」をクリックします。

NewImage

「EC2」を選択し、「Next step」をクリックします。

NewImage

「Configure task and container definitions」の前半に以下を設定します。

  • Task Definition Name: 「sample-react-ecs-app-task」
  • Network Mode: Bridge

「Container Definition」の「Add container」をクリックしてコンテナ情報を設定します。

NewImage

コンテナ情報には以下を設定します。

  • Container name: sample-react-ecs-app
  • Image: (ECRに作成したリポジトリの「Repository URI」)
  • Memory Limits: Hard limit, 128
  • Port mappings: 0:80 (Host portを「0」にすると動的ポートマッピング(dynamic host port mapping)が有効になり、同一インスタンス内に複数のDockerコンテナを起動できる)

入力が終わったら「Add」をクリックします。

NewImage

コンテナ情報が追加できたので、「Create」をクリックします。

NewImage

タスクの作成が完了しました。

NewImage

ECSタスクの実行

ECSのタスクとは、Dockerコンテナの起動コマンドです。

「Action」から「Run Task」をクリックします。

NewImage

以下を設定して、「Run Task」をクリックします。

  • Launch type: EC2
  • Cluster: sample-react-ecs-app-cluster
  • Number of tasks: 2 (Dockerコンテナの数を2つにする)
  • Placement: AZ Balanced Spread

NewImage

「Tasks」タブを選ぶと、2つのタスクが実行されています。

NewImage

タスクの「Last status」が「PENDING」から「RUNNING」になればDockerコンテナの起動が完了しています。

NewImage

試しに、1つのインスタンス内のDockerコンテナでの状況を確認してみましょう。

「EC2 Dashboard」からECSで起動したインスタンスを1つ選択して、パブリックIPアドレスを確認します。

NewImage

SSHでアクセスします。

$ ssh -i ~/.ssh/MyKeyPair.pem ec2-user@18.208.224.98
[ec2-user@ip-172-31-29-65 ~]$ docker container ls
CONTAINER ID        IMAGE                                                               COMMAND                  CREATED             STATUS              PORTS                   NAMES
ce7d4889d153        XXXXXXXXXXXX.dkr.ecr.us-east-1.amazonaws.com/sample-react-ecs-app   "nginx -g 'daemon of…"   6 minutes ago       Up 6 minutes        0.0.0.0:32768->80/tcp   ecs-sample-react-ecs-app-task-1-sample-react-ecs-app-fec3f4b4e9bfce947d00
91909553a102        amazon/amazon-ecs-agent:latest                                      "/agent"                 7 minutes ago       Up 7 minutes                                ecs-agent
[ec2-user@ip-172-31-29-65 ~]$ exit

以下の2つのDockerコンテナが起動しています。

  • amazon-ecs-agent: ECSエージェント(AWSのECSの機能を使うためのクライアントのプロセス)
  • sample-react-ecs-app: 今回作成したDockerアプリケーション(32768ポートで公開されている)

公開されているポートでブラウザにアクセスしてみます。

NewImage

正しく表示されました。

ここでDockerコンテナの公開ポートがECSによって自動的に決定されていることに注意してください。これは「動的ポートマッピング(dynamic host port mapping)」によるものです。

動的ポートマッピングが有効になっている場合、Dockerコンテナのホスト側のポートは「32768–61000」の範囲で設定されます。詳しくは公式ドキュメントを参照してください。

ALBによるロードバランシングの設定

ALB(Application Load Balancer)を使用することで、動的ポートマッピングされ、インスタンス内のDockerコンテナにロードバランスすることができます。

「Load Balancers」を選択し、「Create Load Balancer」をクリックします。

NewImage

「Application Load Balancer」の「Create」をクリックします。

NewImage

以下を設定し、「Next: Configure Security Settings」をクリックします。

  • Name: sample-react-ecs-app-alb
  • Scheme: internet-facing

NewImage

インスタンスを配置したVPCとサブネットを選択し、「Next: Configure Security Settings」をクリックします。

NewImage

今回はテストなのでセキュリティ設定はせずに「Next: Configure Security Groups」をクリックします。

NewImage

今回のテスト用のセキュリティグループを選択し、「Next: Configure Routing」をクリックします。

NewImage

以下を設定し、「Next: Register Targets」をクリックします。

  • Target group -> Name: sample-react-ecs-app-target-1
  • Target group -> Target type: Instance
  • Health checks -> Path: 「/index.html」

NewImage

後でECSサービスを使ってインスタンスを登録するので、ここではインスタンスを選択せずに「Next: Review」をクリックします。

NewImage

「Create」をクリックします。

NewImage

「Close」をクリックして完了です。

NewImage

ESCサービスの作成

ここまではECS上のDockerコンテナを起動するためにタスクを手動で実行してきましたが、サービスを使うことでそれを自動化できます。

対象のクラスタで「Services」タブを選択し、「Create」をクリックします。

NewImage

以下を設定し、「Next step」をクリックします。

  • Launch type: EC2
  • Task Definition: sample-react-ecs-app-task
  • Service name: sample-react-ecs-app-service
  • Number of tasks: 2
  • Placement Template: AZ Balanced Spread

NewImage

以下を設定し、「Next step」をクリックします。

  • Load balancer type: Application Load Balancer
  • Load balancer name: sample-react-ecs-app-alb
  • Target group name: sample-react-es-app-target-1

NewImage

以下を設定し、「Next step」をクリックします。

  • Service Auto Scaling: Configure Service Auto Scaling to adjust your service’s desired count
  • Minimum number of tasks: 2
  • Desired number of tasks: 2 (コンテナ2つにしてみます)
  • Maximum number of tasks: 4
  • Automatic task scaling policies -> Policy name: sample-react-ecs-scaling-policy

NewImage

「Create Service」をクリックします。

NewImage

サービスが作成されました。「View Service」をクリックします。

NewImage

タスクが2つ実行されています。

NewImage

「Events」タブを選択すると自動で実行されたイベントが確認できます。ALBのターゲットに自動的にインスタンスが登録さていることが確認できます。

NewImage

アプリケーションの稼働確認

最後にALB経由でDockerコンテナのアプリケーションの稼働を確認してみましょう。

「Load Balancers」から、今回作成したALB(sample-react-ecs-app-alb)を選択し、DNS名をコピーします。

NewImage

ブラウザにDNS名を入力すると、Reactアプリケーションの画面が表示されました。

NewImage

これでAWS上で稼働したReactのDockerアプリケーションをALBを使って公開できることが確認できました。

最後に

いかがでしたか？これでECRとECSを使って、AWS上でDockerのイメージ管理やコンテナ運用ができるようになりましたね。Dockerアプリケーションをクラウド上でどんどん運用していきましょう。それでは。

環境

  • NodeJS: v11.0.0
  • create-react-app: 2.1.1
  • Docker: 18.06.1-ce, build e68fc7a
  • AWS CLI: aws-cli/1.16.40 Python/3.7.0 Darwin/18.2.0 botocore/1.12.30
The following two tabs change content below.
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。