Next.js × AWS CDK の統合環境構築：Docker でローカル開発から本番デプロイまで

mkdir nextjs-ecs-cdk
cd nextjs-ecs-cdk
mkdir apps
mkdir cdk

cd apps
npx create-next-app@14.2.0 .

# 開発環境用
FROM node:20-alpine

WORKDIR /app

# package.json と package-lock.json をコピー
COPY package.json package-lock.json ./

RUN npm install

EXPOSE 3000

CMD ["npm", "run", "dev"]

services:
  nextjs-dev:
    build:
      context: .
      dockerfile: dev.Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
    stdin_open: true
    tty: true

services:
  nextjs-dev:

    build:
      context: .
      dockerfile: dev.Dockerfile

    ports:
      - "3000:3000"

    volumes:
      - .:/app
      - /app/node_modules

    stdin_open: true
    tty: true

docker-compose -f docker-compose.dev.yml up

export const dynamic = "force-dynamic"

export default async function Home() {
  const now = new Date().toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" })

  return (
    <main>
      <h1>現在の時刻（JST）:</h1>
      <p>{now}</p>
    </main>
  );
}

# 本番環境用
FROM node:20-alpine AS builder

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .

RUN npm run build

# 実行用のコンテナを用意（軽量化のためマルチステージビルド）
FROM node:20-alpine

WORKDIR /app

COPY --from=builder /app ./

EXPOSE 3000

CMD ["npm", "run", "start"]

cd apps 
docker build -t nextjs-app-production .

docker run -d -p 3000:3000 --name nextjs-container-production nextjs-app-production

npm install -g aws-cdk

cd cdk
cdk init app --language=typescript

npm i cdk-docker-image-deployment

import {Stack, StackProps, RemovalPolicy } from 'aws-cdk-lib';
import { Repository } from 'aws-cdk-lib/aws-ecr';
import * as imagedeploy from 'cdk-docker-image-deployment';
import { Construct } from 'constructs';
import * as path from 'path';

export class DockerImageDeploymentStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    //**************************************************** */
    // ECR
    //**************************************************** */
    const repository = new Repository(this, 'NextjsEcrRepo', {
      repositoryName: 'nextjs-app',
      removalPolicy: RemovalPolicy.RETAIN,
    });

    new imagedeploy.DockerImageDeployment(this, "DeployDockerImage", {
      source: imagedeploy.Source.directory(
        path.join(__dirname, '../../', 'apps')
      ),
      destination: imagedeploy.Destination.ecr(repository, {
        tag: 'latest',
      }),
    });
  }
}

const repository = new Repository(this, 'NextjsEcrRepo', {
  repositoryName: 'nextjs-app',
  removalPolicy: RemovalPolicy.RETAIN,
});

new imagedeploy.DockerImageDeployment(this, "DeployDockerImage", {
  source: imagedeploy.Source.directory(
    path.join(__dirname, '../../', 'apps')
  ),
  destination: imagedeploy.Destination.ecr(repository, {
    tag: 'latest',
  }),
});

#!/usr/bin/env node
import * as cdk from 'aws-cdk-lib';
import { DockerImageDeploymentStack } from '../lib/docker-image-deployment';

const app = new cdk.App();
new DockerImageDeploymentStack(app, 'DockerImageDeploymentStack');

tree -I node_modules -I .git -I .next --dirsfirst -a

.
├── apps
│   ├── app
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── public
│   │   ├── next.svg
│   │   └── vercel.svg
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── Dockerfile
│   ├── README.md
│   ├── dev.Dockerfile
│   ├── docker-compose.dev.yml
│   ├── next-env.d.ts
│   ├── next.config.mjs
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.mjs
│   ├── tailwind.config.ts
│   └── tsconfig.json
└── cdk
    ├── bin
    │   └── cdk.ts
    ├── lib
    │   └── docker-image-deployment.ts
    ├── test
    │   └── cdk.test.ts
    ├── .gitignore
    ├── .npmignore
    ├── README.md
    ├── cdk.json
    ├── jest.config.js
    ├── package-lock.json
    ├── package.json
    └── tsconfig.json

cdk bootstrap

cdk deploy

import {
  Stack, 
  StackProps, 
  RemovalPolicy,
  aws_ec2 as ec2,
  aws_ecs as ecs,
  aws_logs as logs,
  aws_iam as iam,
  aws_elasticloadbalancingv2 as elbv2,
  Duration,
} from 'aws-cdk-lib';
import { Repository } from 'aws-cdk-lib/aws-ecr';
import * as imagedeploy from 'cdk-docker-image-deployment';
import { Construct } from 'constructs';
import * as path from 'path';

export class DockerImageDeploymentStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    //**************************************************** */
    // ECR
    //**************************************************** */
    const repository = new Repository(this, 'NextjsEcrRepo', {
      repositoryName: 'nextjs-app',
      removalPolicy: RemovalPolicy.RETAIN,
    });

    new imagedeploy.DockerImageDeployment(this, "DeployDockerImage", {
      source: imagedeploy.Source.directory(
        path.join(__dirname, '../../', 'apps')
      ),
      destination: imagedeploy.Destination.ecr(repository, {
        tag: 'latest',
      }),
    });

    //**************************************************** */
    // VPC
    //**************************************************** */
    const vpc = new ec2.Vpc(this, 'NextjsVpc', {
      maxAzs: 2,
    });

    //**************************************************** */
    // ECS
    //**************************************************** */
    const cluster = new ecs.Cluster(this, 'NextjsCluster', { 
      vpc,
      clusterName: 'nextjs-cluster',
    });

    const logGroup = new logs.LogGroup(this, "LogGroup", {
      logGroupName: '/aws/ecs/nextjs-cluster',
      removalPolicy: RemovalPolicy.DESTROY,
    });

    //**************************************************** */
    // ALB（Application Load Balancer）
    //**************************************************** */
    const albSecurityGroup = new ec2.SecurityGroup(this, "AlbSecurityGroup", {
      vpc,
      allowAllOutbound: true,
    });

    albSecurityGroup.addIngressRule(
      ec2.Peer.anyIpv4(), // 外部からの HTTP アクセスを許可
      ec2.Port.tcp(80),
      "Allow HTTP traffic from the internet"
    );

    const alb = new elbv2.ApplicationLoadBalancer(this, 'alb', {
      internetFacing: true, //インターネットからのアクセスを許可するかどうか指定
      loadBalancerName: 'nextjs-alb',
      securityGroup: albSecurityGroup, //作成したセキュリティグループを割り当てる
      vpc   
    });

    const listener = alb.addListener('Listener', {
      port: 80,
      open: true,
    });

    //**************************************************** */
    // Fargate Service
    //**************************************************** */
    const serviceSecurityGroup = new ec2.SecurityGroup(this, "ServiceSecurityGroup", {
      vpc,
      allowAllOutbound: true,
    });

    serviceSecurityGroup.addIngressRule(
      albSecurityGroup,
      ec2.Port.tcp(3000),
      "Allow traffic from ALB"
    );

    const taskDefinition = new ecs.FargateTaskDefinition(this, "TaskDef", {
      cpu: 256,
      memoryLimitMiB: 512,
      family: 'nextjs-task-family', 
      taskRole: new iam.Role(this, 'TaskRole', { 
        assumedBy: new iam.ServicePrincipal('ecs-tasks.amazonaws.com') 
      }), 
    });

    taskDefinition.addContainer("NextjsContainer", {
      containerName: 'nextjs-container',
      image: ecs.ContainerImage.fromEcrRepository(repository, "latest"),
      portMappings: [{ containerPort: 3000 }],
      logging: ecs.LogDrivers.awsLogs({
        streamPrefix: `container`,
        logGroup,
      }),
      command: ["npm", "run", "start"],
    });

    const service = new ecs.FargateService(this, "FargateService", {
      cluster,
      serviceName: 'nextjs-service',
      taskDefinition: taskDefinition,
      desiredCount: 2,
      assignPublicIp: true,
      securityGroups: [serviceSecurityGroup],
    });

    listener.addTargets('EcsTargetGroup', {
      port: 3000,
      protocol: elbv2.ApplicationProtocol.HTTP,
      targets: [service],
      healthCheck: {
        path: "/",
        interval: Duration.seconds(30),
      },
    });
  }
}

const vpc = new ec2.Vpc(this, 'NextjsVpc', {
  maxAzs: 2,
});

const cluster = new ecs.Cluster(this, 'NextjsCluster', { 
  vpc,
  clusterName: 'nextjs-cluster',
});

const logGroup = new logs.LogGroup(this, "LogGroup", {
  logGroupName: '/aws/ecs/nextjs-cluster',
  removalPolicy: RemovalPolicy.DESTROY,
});

const albSecurityGroup = new ec2.SecurityGroup(this, "AlbSecurityGroup", {
  vpc,
  allowAllOutbound: true,
});

albSecurityGroup.addIngressRule(
  ec2.Peer.anyIpv4(),
  ec2.Port.tcp(80),
  "Allow HTTP traffic from the internet"
);

const alb = new elbv2.ApplicationLoadBalancer(this, 'alb', {
  internetFacing: true,
  loadBalancerName: 'nextjs-alb',
  securityGroup: albSecurityGroup,
  vpc   
});

const listener = alb.addListener('Listener', {
  port: 80,
  open: true,
});

const serviceSecurityGroup = new ec2.SecurityGroup(this, "ServiceSecurityGroup", {
  vpc,
  allowAllOutbound: true,
});

serviceSecurityGroup.addIngressRule(
  albSecurityGroup,
  ec2.Port.tcp(3000),
  "Allow traffic from ALB"
);

const taskDefinition = new ecs.FargateTaskDefinition(this, "TaskDef", {
  cpu: 256,
  memoryLimitMiB: 512,
  family: 'nextjs-task-family',
  taskRole: new iam.Role(this, 'TaskRole', { 
    assumedBy: new iam.ServicePrincipal('ecs-tasks.amazonaws.com') 
  }),
});

taskDefinition.addContainer("NextjsContainer", {
  containerName: 'nextjs-container',
  image: ecs.ContainerImage.fromEcrRepository(repository, "latest"),
  portMappings: [{ containerPort: 3000 }],
  logging: ecs.LogDrivers.awsLogs({
    streamPrefix: `container`,
    logGroup,
  }),
  command: ["npm", "run", "start"],
});

const service = new ecs.FargateService(this, "FargateService", {
  cluster,
  serviceName: 'nextjs-service',
  taskDefinition: taskDefinition,
  desiredCount: 2,
  assignPublicIp: true,
  securityGroups: [serviceSecurityGroup],
});

listener.addTargets('EcsTargetGroup', {
  port: 3000,
  protocol: elbv2.ApplicationProtocol.HTTP,
  targets: [service],
  healthCheck: {
    path: "/",
    interval: Duration.seconds(30),
  },
});