初心者がNext.jsをECSで動かすまで

Last updated at 2024-03-11Posted at 2024-03-08

はじめに

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

プッシュできた！