NextjsをFargateで起動するまで

前置き

• 一回やっただけだと頭からすぐ抜けていきそうなので、作業ログっぽい形で残す
• どうせGUIは変更が入るのでコマンドとテキストメインで

Nextjsの準備

割愛。

イメージの作成とローカルで確認

こっからちゃんと書く。
Dockerfileの準備。

Dockerfile

FROM node:14-alpine

WORKDIR /usr/src/app

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

COPY ./app/ ./

RUN yarn install && \
    yarn build
EXPOSE 3000

CMD ["yarn", "start"]

実際には管理しやすいようにイメージ名をECRのリポジトリ名にした。

// イメージの作成
$ docker build -t hoge .

// imageの確認
$ docker images

// 確認のためイメージの起動
$ docker run --rm -p 3000:3000 hoge

http://localhost:3000 で確認できる。

【追記】buildの際にplatformの設定をしないとfargateのタスクの起動・再起動が繰り返していた。以下で対応した。

$ docker build --platform linux/amd64 -t hoge .

ECRにpush

• Amazon Elastic Container Registryにアクセス
• リポジトリの作成(リポジトリ名が必須だった)
• 「プッシュコマンドの表示」で表示されるコマンド通り進めばpushできる

一応書いとく。

// 認証を行う
$ aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin xxxxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com

// イメージにタグつけ
$ docker tag hoge:latest xxxxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/hoge:latest

// リポジトリにイメージをpush
$ docker push xxxxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/hoge:latest

Fargateクラスターの作成・タスク定義

• その前にVPCの作成(割愛)
• 作業に入る前に言葉の意味の確認

タスク定義

• タスク定義とは、タスクを構成するコンテナ群の定義
• タスクとは、タスク定義に基づき実際に稼働するコンテナ群のこと

クラスター

• クラスターとは、コンテナを動かすための論理的なグループ

サービス

• サービスとは、コンテナを管理するための概念
• タスク実行数の定義
• ELBの設定、起動タイプの設定など

タスク定義

• Amazon Elastic Container Service にアクセス

• サイドバーからタスク定義に移動

• 新しいタスク定義の作成をクリック

• タスク定義ファミリー名

  • 管理しやすいように「xxxxx-task-difinition」とした

• コンテナの設定

  • イメージURIはECRにpushしたイメージのURI
  • xxxxxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/hoge:latest
  • ↑はECRのページからコピーできる
  • コンテナポートには3000番を追加しておく(nextjsを3000番指定したので)

クラスター

• 「クラスターの作成」から作成
• ネットワーキング
  • VPCは、事前に作成したVPCを使用
  • もちろんサブネットも指定

サービスとタスク作成

サービス

• クラスターの詳細からサービスの作成

• デプロイ設定

  • ファミリーを指定する箇所で、前項で設定したタスク定義を指定する
  • タスク定義を更新していくとリビションが増えていくので最新でデプロイ設定しておく
  • サービス名: 必須
  • 必要なタスク
    • 起動するタスク数の指定。
    • 本来ならロードバランサー設定するので2を指定したいところだが今回は簡略化のために1を指定

• ネットワーキング

  • VPCはクラスター作成の時に指定しているので変更を加えない
  • セキュリティグループ
    • 3000番を開けておく

• 最後に作成

  • デプロイに数分かかる
  • http://[public ip]:3000

デプロイに失敗したら

• タスクからログが観れるのでそこから修正すると早い
  • Next.jsが起動の確認
  • 起動できているのに繋がらない→ネットワーク、セキュリティグループ周りの設定見直し。

感想

• 事前にAWS公式のハンズオンやっていたのでスムーズだった
• コンテナさえ準備すればアプリケーションの開発に集中できるのすごい
• コード化したい