ECSでNext.jsのアプリを動かしてみる

当記事は「Next.jsをECS上で動かしてみる」の第6回「ECSでNext.jsのアプリを動かしてみる」になります。

1. DockerでNext.jsアプリを作成してみる
2. ECRにリポジトリを作成してみる
3. ECRにコンテナのイメージをプッシュしてみる
4. VPCを作成してみる（ECSを動かすため用）
5. セキュリティグループを作成してみる（ECSを動かすため用）
6. ECSでNext.jsのアプリを動かしてみる

クラスター作成

クラスター名はわかりやすいものを。
デフォルトで選択されているはずですが、インフラストラクチャでFargateのみを選択。

作成をクリック。

クラスターが作成されていればOK。

タスク作成事前作業：ECR

続けてECSのタスクを作成していきますが、その前に下記でECRに登録したコンテナの最新イメージのURIを取得します。

ECRにコンテナのイメージをプッシュしてみる（Mac）

ECRから作成したリポジトリをクリック。

latestをクリック。

URIをコピー。

タスク作成

タスク定義ファミリー名はわかるものを。
インフラストラクチャの起動タイプはAWS Fargateを選択。

お試し用なので、CPU、メモリは一番下の性能を選択。
タスクロールは「なし」を選択。

コンテナ名はわかるものを。
イメージURIに先ほどコピーしたURIを貼り付け。
コンテナポートは3000を指定。

作成をクリック。

作成されていればOK。

サービス作成

先ほど作成したクラスターをクリック。

サービスを作成していきます。

先ほど作成したタスク定義を選択。

VPC、サブネットは下記で作成したものを選択。

VPCを作成してみる（ECSを動かすため用）

セキュリティグループは下記で作成したものを選択。

セキュリティグループを作成してみる（ECSを動かすため用）

デフォルトでオンになっていると思いますが、パブリックIPをオンにすることも忘れずに。

作成をクリック。

サービスが作成されていればOK。

確認

タスクタブをクリック→タスクをクリック。

ネットワーキングタブをクリック→パブリックIPを確認。

パブリックIP:3000にブラウザでアクセス。
Next.jsのウェルカムページが表示されていればOKです。
パブリックIPに:3000を付けるのを忘れずに。

以上になります。
お読み頂き、ありがとうございました。