Chapter 10

AWS ECS(フロントエンド編)

それでは、ECR に登録した image を元に ECS(Fargate) を用いてデプロイします。

まずは ECS を用いたフローは以下の通りです。

  1. タスクの定義
  2. (初回のみ)クラスターの作成
    1. で定義したタスクを基にサービスを作成

1. タスクの定義

サイドメニューより [タスク定義] をクリックします。

続けて、 [新しいタスク定義の作成] をクリックします。

起動タイプの互換性の選択では [FARGATE] を選択し、

タスクとコンテナの定義の設定画面に進みます。

タスクとコンテナの定義の設定では、以下の項目に値を入力・選択します。

項目
タスク定義名* zenn-app-task-front
タスクロール ecsTaskExecutionRole(デフォルト)
タスク実行ロール ecsTaskExecutionRole(デフォルト)
タスクメモリ (GB) 0.5GB
タスクCPU(vCPU) 0.25 vCPU

画面中央に、 「コンテナの定義」 のセクションがあるので、 [コンテナの追加] ボタンをクリックします。

「スタンダード」 のセクションには以下の値を入力します。

項目
コンテナ名* zenn-app-container-front
イメージ* #{YOUR_AWS_ACCOUNT_CODE}.dkr.ecr.ap-northeast-1.amazonaws.com/zenn-app-frontend

イメージ* に入力する値は、ECR 画面の以下の値です。

「詳細コンテナ設定」 のセクションはデフォルトのまま(何も入力しないまま)で OK です。
[追加] ボタンをクリックし、タスクとコンテナの定義の設定画面に戻り、 [作成] ボタンをクリックします。
以下のようにグリーンのメッセージが表示されれば成功です。

2. クラスターの作成

次に、クラスターを作成します。

[クラスター作成] ボタンをクリックし、クラスターテンプレートの選択画面に進みます。

[ネットワーキングのみ] を選択し、次のステップに進みます。

クラスターの設定画面で、「クラスター名*」を入力し、 [作成] ボタンをクリックします。

グリーンのメッセージが表示されれば正常にクラスターが作成されました。

3. サービスの作成

それではいよいよサービスを作成し、デプロイします。

[作成] ボタンをクリックし、サービスの設定画面に進みます。

サービスの設定画面では以下の項目に値をセットします。
その他の値についてはデフォルトのままで大丈夫です。

項目
起動タイプ FARGATE
タスク定義(ファミリー) zenn-app-task-frontend
タスク定義(リビジョン) latest
サービス名 zenn-app-service-frontend
タスクの数 1

次に、ネットワーク構成の画面に進みます。
クラスターVPC/サブネットについてはデフォルトで用意されているものを選択します。
もちろん自身で作成されたものを選んでも OK です。

セキュリティグループについては、 [編集] ボタンをクリックし、新しいグループを作成します。

以下の設定で、新しいセキュリティグループを作成したら、 AutoScaling の画面に進みます。

項目
セキュリティグループ名 zenn-app-security-group-frontend
インバウンドルール カスタムTCP/3000/あらゆる場所

AutoScaling の設定はデフォルトのままで大丈夫です。

そして、確認画面に進み、 [サービスの作成] ボタンをクリックします。

グリーンのメッセージが表示されれば成功です。

サービスのトップ画面に戻り、サービスが起動していることを確認します。

ステータスが 【RUNNING】 に変わったら、タスクIDをクリックし、タスクの詳細画面に進みます。

パブリック IP を確認し、 http://#{パブリックIP}:3000 にアクセスします。

開発環境で表示されていたトップ画面が表示されれば OK です。