はじめに

AWS はすぐに画面が変わってしまい公式ページすらあてにならないので、初心者にはつらいです。
ここでは AWS 初心者の私が Next.js で作ったアプリケーションを ECS で動かしてインターネット上に公開するまでの手順をまとめました。

2024年3月時点の情報ですが、半年もすればまたAWSのUIが変わってしまうかと思うと……。

前提

AWS CLI を事前にインストールしておきます。インストール手順などは他のページを参照してください。
Next.js のアプリケーションの作成方法なども省略します。

ECRの設定

新規にECRのリポジトリを作成します。
ここでは next-app という名前にします。

ここで作成されたリポジトリの URI は Docker のイメージを作るときに使うので覚えておきます。

Docker イメージの作成

Next.js のアプリケーションは作成済みとします。

ここでは Dockerfile と docker-compose.yml の書き方だけ載せます。
好みで yarn を使っていますが、npm などに適宜書き替えてください。

Dockerfile

FROM node:20-bookworm AS build

WORKDIR /app
COPY package.json ./
RUN yarn --frozen-lockfile
COPY . .
RUN yarn build

FROM node:20-bookworm AS production

WORKDIR /app
COPY package.json ./
RUN yarn --frozen-lockfile --production=true
COPY --from=build /app/.next ./.next

EXPOSE 3000
USER node
CMD ["yarn", "start"]

docker-compose.yaml の image のところに先ほど作成した ECR のリポジトリの URI と好きなバージョン番号を記載します。
ここではバージョンを 0.0.1 にします。

docker-compose.yaml

version: '3'
services:
  web:
    build: .
    image: 111111111111.dkr.ecr.ap-northeast-1.amazonaws.com/dcm:0.0.1
    ports:
      - '3000:3000'
    tty: true

Docker イメージのビルド

$ docker compose build

Docker イメージのプッシュ

認証

アカウントに MFA の設定がしてあるので、まずは一時的なセキュリティ認証を取得します。
profile を使っていない場合には --profile のオプションは不要です。

$ aws sts get-session-token --serial-number arn:aws:iam::111111111111:mfa/user --profile your_profile --token-code 123456

{
    "Credentials": {
        "AccessKeyId": "KR4UV7JIAKMSJ2B5MZFN",
        "SecretAccessKey": "zj6k7+vSt1luf8SUd7VMWGsDWW7duIYx1xr4Gz/9",
        "SessionToken": "FwoGZXIvYXdzEOL//////////wEaDBlIhcmRuxNoUOUp5yKGAYkgNjrmAkfVodxlFH8rmRe3X+R7dD3fXy43pZ/9N41B724NSMbXbhe42nRELkuJOkYTH/tD/cBSZfW37DFzN2oB6TCeQ2DcQiemh8BmwyLJUfTrS4ymQMlIyHom+IDEuehQdDNmUCqp97nMKOC8qr0ASwCVqqhUQbW9zvETa8GMihkw37uUzc+7iWR8v87QGxi7UwXIZvZNOEXtkgkYfPtTEqaLmMgqq+/IL2zvsqgAM4vrHdxj",
        "Expiration": "2024-03-08T12:40:00+00:00"
    }
}

認証情報を環境変数にセットします。

$ export AWS_ACCESS_KEY_ID=KR4UV7JIAKMSJ2B5MZFN
$ export AWS_SECRET_ACCESS_KEY=zj6k7+vSt1luf8SUd7VMWGsDWW7duIYx1xr4Gz/9
$ export AWS_SESSION_TOKEN=FwoGZXIvYXdzEOL//////////wEaDBlIhcmRuxNoUOUp5yKGAYkgNjrmAkfVodxlFH8rmRe3X+R7dD3fXy43pZ/9N41B724NSMbXbhe42nRELkuJOkYTH/tD/cBSZfW37DFzN2oB6TCeQ2DcQiemh8BmwyLJUfTrS4ymQMlIyHom+IDEuehQdDNmUCqp97nMKOC8qr0ASwCVqqhUQbW9zvETa8GMihkw37uUzc+7iWR8v87QGxi7UwXIZvZNOEXtkgkYfPtTEqaLmMgqq+/IL2zvsqgAM4vrHdxj

ログインします。

$ aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin 111111111111.dkr.ecr.ap-northeast-1.amazonaws.com

Login Succeeded

プッシュ

$ docker push 111111111111.dkr.ecr.ap-northeast-1.amazonaws.com/next-app:0.0.1

The push refers to repository [111111111111.dkr.ecr.ap-northeast-1.amazonaws.com/next-app]
f707ff370f3c: Pushed
e53ec62c193e: Pushed
1e0297646ea8: Pushed
029e264e2411: Pushed
16e3df8e8194: Pushed
c963957a1227: Pushed
135d52801503: Pushed
2c2decbeb47f: Pushed
9fe4e8a1862c: Pushed
909275a3eaaa: Pushed
f3f47b3309ca: Pushed
1a5fc1184c48: Pushed
0.0.1: digest: sha256:216100c654b6739dee152bbdaa3bd95cf44e04aa788fb2ebc6c18ff62c1ad86b size: 2843

プッシュできた！

VPC の設定

「VPCを作成」ボタンを使います。

分かりやすい名前を付けてください。ここでは next-app にします。

作成出来たらVPCダッシュボードに戻って、左側にあるメニューの「VPCでフィルタリング」から先ほど作成したVPCを選択し、さらにセキュリティグループをクリックします。
右ペインに作成したVPCのセキュリティグループ(1つだけ)が表示されるので、クリックします。

「インバウンドのルールを編集」をクリックします。

「ルールを追加」をクリックします。
タイプにHTTPを選択し、ソースは許可したいIPアドレス等を指定します。
特に制限が必要ない場合には Anywhere-IPv4 を選べばよいのですが全世界に公開されるので気を付けてください。
最後に「ルールを保存」をクリックし、設定を保存します。

ECS の設定

クラスターの作成

タスクの定義

左ペインから「タスク定義」を選び、「新しいタスク定義の作成」をクリックします。

コンテナ - 1 のイメージ URI には ECR のリポジトリの URI とバージョンを入れます。
コンテナポートは Docker で EXPOSE しているポート番号を入力します。ここでは 3000 番ポートにしています。

タスクが定義出来た。

サービスの作成

デプロイからサービスの作成を選びます。

名前は分かりやすいものを適当に付けてください。
サブネットは全部が選択されていると思うので、パブリックのもののみ残します。

作成できたら、サービス(ここでは next-app-service)のリンクをクリックします。

「設定とネットワーク」のタブをクリックします。
DNS 名のところのアドレスがインターネット上に公開されているホスト名です。
「オープンアドレス」をクリックしてブラウザーで開けばOK。