DockerでNext.jsの環境を構築してみる（Mac/docker-composeなし）

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

1. DockerでNext.jsアプリを作成してみる
2. ECRにリポジトリを作成してみる
3. ECRにコンテナのイメージをプッシュしてみる
4. VPCを作成してみる（ECSを動かすため用）
5. セキュリティグループを作成してみる（ECSを動かすため用）
6. ECSでNext.jsのアプリを動かしてみる
7. セキュリティグループを作成してみる（ALBを動かすため用）
8. ALBを作成してターゲットグループにECSを指定してみる
9. CloudFrontでALB（ECS）を配信してみる
10. XServerで取得した独自ドメインをCloudFrontに設定してみる
11. WAF/ACLを使ってアクセス元をIPアドレスで制限してみる
12. CloudFrontで独自ドメイン以外へのアクセスを制限してみる

開発環境

• OS:Mac
• Docker Desktopインストール済み
• VSCodeインストール済み

Dockerファイルを作成

touch Dockerfile

touch Dockerfile

作成されたDockerfileを下記の内容で編集。

FROM node:20-alpine

WORKDIR /app

COPY nextjs-docker/package*.json ./
RUN npm install

COPY nextjs-docker .

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

FROM node:20-alpine

WORKDIR /app

COPY nextjs-docker/package*.json ./
RUN npm install

COPY nextjs-docker .

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

アプリを作成

npx create-next-app@latest nextjs-docker

npx create-next-app@latest nextjs-docker

途中で設定を聞かれるので、一番上のrecommended（推奨）を選択。

成功するとNext.jsのアプリ用のフォルダ・ファイルが作成されます。

アプリを起動

まずはディレクトリを移動。

cd nextjs-docker

cd nextjs-docker

アプリを起動。

npm run dev

npm run dev

環境が構築できたか確認

下記のURLを開いて、Next.jsのウェルカムページが表示されていたらOK。
http://localhost:3000/

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