rsnext/examples/with-docker-compose/README.md
Kévin Dunglas 43a4a8e6a6
chore: upgrade example to Docker Compose v2 (#39372)
Upgrade the README to use Docker Compose v2, which is faster and shipped by default with Docker Desktop since April.

## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
2022-08-06 20:17:44 +00:00

3.4 KiB

With Docker Compose

This example contains everything needed to get a Next.js development and production environment up and running with Docker Compose.

Benefits of Docker Compose

  • Develop locally without Node.js or TypeScript installed
  • Easy to run, consistent development environment across Mac, Windows, and Linux teams
  • Run multiple Next.js apps, databases, and other microservices in a single deployment
  • Multistage builds combined with Output Standalone outputs up to 85% smaller apps (Approximately 110 MB compared to 1 GB with create-next-app)
  • BuildKit engine builds multiple Docker images in parallel
  • Easy configuration with YAML files

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-docker-compose with-docker-compose-app
yarn create next-app --example with-docker-compose with-docker-compose-app
pnpm create next-app --example with-docker-compose with-docker-compose-app

Prerequisites

Install Docker Desktop for Mac, Windows, or Linux. Docker Desktop includes Docker Compose as part of the installation.

Development

First, run the development server:

# Create a network, which allows containers to communicate
# with each other, by using their container name as a hostname
docker network create my_network

# Build dev using new BuildKit engine
docker compose -f docker-compose.dev.yml build

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

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Production

Multistage builds are highly recommended in production. Combined with the Next 12 Output Standalone feature, only node_modules files required for production are copied into the final Docker image.

First, run the production server (Final image approximately 110 MB).

# Create a network, which allows containers to communicate
# with each other, by using their container name as a hostname
docker network create my_network

# Build prod using new BuildKit engine
docker compose -f docker-compose.prod.yml build

# Up prod in detached mode
docker compose -f docker-compose.prod.yml up -d

Alternatively, run the production server without without multistage builds (Final image approximately 1 GB).

# Create a network, which allows containers to communicate
# with each other, by using their container name as a hostname
docker network create my_network

# Build prod without multistage using new BuildKit engine
docker compose -f docker-compose.prod-without-multistage.yml build

# Up prod without multistage in detached mode
docker compose -f docker-compose.prod-without-multistage.yml up -d

Open http://localhost:3000.

Useful commands

# Stop all running containers
docker kill $(docker ps -q) && docker rm $(docker ps -a -q)

# Free space
docker system prune -af --volumes