61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
102 lines
3.7 KiB
Markdown
102 lines
3.7 KiB
Markdown
# 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 macOS, Windows, and Linux teams
|
|
- Run multiple Next.js apps, databases, and other microservices in a single deployment
|
|
- Multistage builds combined with [Output Standalone](https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files) outputs up to 85% smaller apps (Approximately 110 MB compared to 1 GB with create-next-app)
|
|
- Easy configuration with YAML files
|
|
|
|
## How to use
|
|
|
|
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
|
|
|
```bash
|
|
npx create-next-app --example with-docker-compose with-docker-compose-app
|
|
```
|
|
|
|
```bash
|
|
yarn create next-app --example with-docker-compose with-docker-compose-app
|
|
```
|
|
|
|
```bash
|
|
pnpm create next-app --example with-docker-compose with-docker-compose-app
|
|
```
|
|
|
|
Optionally, after the installation is complete:
|
|
|
|
- Run `cd next-app`, then run `npm install` or `yarn install` or `pnpm install` to generate a lockfile.
|
|
|
|
It is recommended to commit a lockfile to version control. Although the example will work without one, build errors are more likely to occur when using the latest version of all dependencies. This way, we're always using a known good configuration to develop and run in production.
|
|
|
|
## Prerequisites
|
|
|
|
Install [Docker Desktop](https://docs.docker.com/get-docker) for Mac, Windows, or Linux. Docker Desktop includes Docker Compose as part of the installation.
|
|
|
|
## Development
|
|
|
|
First, run the development server:
|
|
|
|
```bash
|
|
# 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
|
|
docker compose -f compose.dev.yaml build
|
|
|
|
# Up dev
|
|
docker compose -f compose.dev.yaml up
|
|
```
|
|
|
|
Open [http://localhost:3000](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 [Output Standalone](https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files) 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).
|
|
|
|
```bash
|
|
# 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
|
|
docker compose -f compose.prod.yaml build
|
|
|
|
# Up prod in detached mode
|
|
docker compose -f compose.prod.yaml up -d
|
|
```
|
|
|
|
Alternatively, run the production server without multistage builds (Final image approximately 1 GB).
|
|
|
|
```bash
|
|
# 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
|
|
docker compose -f compose.prod-without-multistage.yaml build
|
|
|
|
# Up prod without multistage in detached mode
|
|
docker compose -f compose.prod-without-multistage.yaml up -d
|
|
```
|
|
|
|
Open [http://localhost:3000](http://localhost:3000).
|
|
|
|
## Useful commands
|
|
|
|
```bash
|
|
# Stop all running containers
|
|
docker kill $(docker ps -aq) && docker rm $(docker ps -aq)
|
|
|
|
# Free space
|
|
docker system prune -af --volumes
|
|
```
|