Casual Developers Note

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

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / AWS ECRとECSの入門(Fargate編) ~ ECSのFargate版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~

2018年12月24日 By KD コメントを書く

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

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

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

見出し

  • 1 はじめに
  • 2 前提
  • 3 下準備
    • 3.1 ReactのDockerアプリケーションを作成し、ECRにPushする
    • 3.2 ECRのリポジトリの確認
    • 3.3 ECSのクラスターの確認
    • 3.4 ALBの確認
  • 4 ECS FargateによるDockerの運用
    • 4.1 ECS Fargateタスクの作成
    • 4.2 ECS Fargateサービスの作成
    • 4.3 アプリケーションの稼働確認
  • 5 最後に
  • 6 環境
    • 6.1 関連記事

はじめに

AWS上でReactのDockerアプリケーションを稼働せさせる方法としてて、以前の記事「AWS ECRとECSの入門(EC2編)」では、ECRとECSのEC2版を紹介しました。

ECSでEC2インスタンスをそのまま使う場合、当然EC2の管理を行う必要が生じます。一方で、ECSのFargateを使う場合は、EC2インスタンスの事を考える必要がなくなり、完全にDockerイメージとコンテナの管理のみに集中できるようになります。これは大きなメリットです。

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

前提

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

  • Dockerがインストールされていること
  • AWS CLIがインストールされ、適切なIAMのユーザが作成済みで、プロファイルに設定されていること
  • テスト用にVPCとパブリックなサブネットが構築済みであること

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

下準備

ReactのDockerアプリケーションを作成し、ECRにPushする

以前の記事「AWS ECRとECSの入門(EC2編)」から以下の章を実施してください。

  • ReactのDockerアプリケーションの作成
  • ECRのリポジトリ作成とDockerイメージの管理
  • ECSクラスターの作成
  • ALBによるロードバランシングの設定

ECRのリポジトリの確認

「ECS」の画面から、「Repositories」をクリックします。

NewImage

上記のようにReactのDockerアプリケーションのイメージ「sample-react-ecs-app」のPushに成功していればOKです。

ECSのクラスターの確認

「ECS」の画面から、「Clusters」をクリックします。

NewImage

上記のようにクラスター「sample-react-ecs-app-cluster」が作成され、ACTIVEになっていればOKです。サービスやタスクは何も無い状態です。

ALBの確認

「EC2」の画面から、「Load Balancers」をクリックします。以下のように今回用のALB「sample-react-ecs-app-alb」が作成済みであればOKです。

NewImage

ターゲットグループは「Target type」をインスタンスではなくIPで作成する必要があり、後でサービス作成の際に一緒に新しく作成します。

これで下準備は整いました。

ECS FargateによるDockerの運用

それではいよいよFargateでECSのタスクとサービスを作成していきましょう。

ECS Fargateタスクの作成

「ECS」画面から「Task Definition」を選択し、「Create new Task Definition」をクリックします。

NewImage

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

NewImage

以下を設定します。今回は最小のサイズを選択しています。

  • Task Definition Name: sample-react-ecs-app-fargate-task
  • Task memory (GB): 0.5 GB
  • Task CPU (vCPU): 0.25 vCPU

そして「Add container」をクリックしてDockerコンテナ情報を追加します。

NewImage

コンテナ情報は以下を設定し、「Add」をクリックします。

  • Container name: sample-react-ecs-app
  • Image: (ECRの対象リポジトリのRepository URI)
  • Memory Limit: Soft limit 128
    = Port mappings: 80 tcp

NewImage

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

NewImage

タスクの作成が成功したら「View task definition」をクリックします。

NewImage

作成したタスクを確認できました。

NewImage

ECS Fargateサービスの作成

「ECS」画面から「Clusters」内の対象のクラスターを選択し、「Create」をクリックします。

NewImage

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

  • Launch type: FARGATE
  • Task Definition: sample-react-ecs-app-fargate-task
  • Cluster: sample-react-ecs-app-cluster
  • Service name: sample-react-ecs-app-fargate-service
  • Number of tasks: 2 (Dockerコンテナを2つ起動します)

NewImage

以下にVPCとパブリックなサブネットを設定し、新しくセキュリティグループを作るために「Security groups」の「Edit」をクリックします。

NewImage

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

  • Security group name: sample-react-ecs-sg-1
  • Inbound rules: HTTP Anywhere (デフォルト)

NewImage

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

  • Load Balancer: Application Load Balancer
  • Load balancer name: sample-react-ecs-app-alb
  • Listener port: 80:HTTP
  • Target group name: sample-react-ecs-app-group
  • Path pattern: 「/*」
  • Evaluation order: 1
  • Health check path: 「/index.html」

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 (今回はDockerコンテナを2つ起動します)
  • Maximum number of tasks: 4
  • Policy name: sampleReactEcsAppScalingPolicy

NewImage

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

NewImage

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

NewImage

「Tasks」タブを選択すると、2つのタスクが実行されていることが確認できます。

NewImage

「Clusters」を見ると、以下のようにサービスが1つ、タスクが2つ稼働していることが確認できます。

NewImage

これでサービスの作成が完了です。

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

最後にALB経由でECSで稼働しているDockerコンテナにアクセスしてみましょう。

「EC2」画面から、「Load Balancers」をクリックします。対象のALBを選択し、DNS名をコピーします。

NewImage

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

NewImage

これでECSのFargateを使って、ReactのDockerアプリケーションを稼働させることができました。

最後に

いかがでしたか?これでEC2インスタンスを自前で管理する手間から開放され、Fargateを使って気楽にAWS上にDockerアプリケーションを稼働させることができるようになったことでしょう。これで開発により専念できますね。それでは。

環境

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

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

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

    クラウド上でアプリケーションをDockerイメージとして管理し、Dockerコンテナとして運用する方法として、AWSのE…

  • AWS CLIにエイリアス(alias)を設定する方法

    AWS上のサービスを利用する場合、利便性の観点からもDevOpsの観点からもCLIを使いこなすことは有益です。今回はAW…

  • Elastic Beanstalkが作ったS3バケットが削除できなかった場合の対処法

    AWSのElastic Beanstalkは簡単にアプリケーションをAWSにデプロイするためのサービスですが、いろいろ自…

  • Docker SwarmでDockerコンテナのオーケストレーション入門

    アプリケーションをDockerコンテナとして、本番環境で稼働させるにはオーケストレーションツールは無くてはならないもので…

  • UXデザイン初学者のための基本用語まとめ

    UXという言葉はだいぶ前からデザインの考え方として流行っています。ただ、本気で学ぼうと思うとどうしても情報は英語になるた…

カテゴリ : 技術 Tips & Tutorials タグ : aws, ecr, ecs, far, fargate

コメントを残す コメントをキャンセル

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

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

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

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

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

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

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

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

    クラウド上でアプリケーションをDockerイメージとして管理し、Dockerコンテナとして運用する方法として、AWSのE…

  • AWS CLIにエイリアス(alias)を設定する方法

    AWS上のサービスを利用する場合、利便性の観点からもDevOpsの観点からもCLIを使いこなすことは有益です。今回はAW…

  • Elastic Beanstalkが作ったS3バケットが削除できなかった場合の対処法

    AWSのElastic Beanstalkは簡単にアプリケーションをAWSにデプロイするためのサービスですが、いろいろ自…

  • Docker SwarmでDockerコンテナのオーケストレーション入門

    アプリケーションをDockerコンテナとして、本番環境で稼働させるにはオーケストレーションツールは無くてはならないもので…

  • UXデザイン初学者のための基本用語まとめ

    UXという言葉はだいぶ前からデザインの考え方として流行っています。ただ、本気で学ぼうと思うとどうしても情報は英語になるた…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes