Преминете към основното съдържание

Docker: Development Mode vs Production Mode

Visual Overview​

Comparison Table​

FeatureDevelopment ModeProduction Mode
Docker FileDockerfile.devDockerfile
Docker Composedocker-compose.dev.ymldocker-compose.build.yml
Environment Variables.env.dev.docker.env.docker
Container Namewebapp-devwebapp
Image Nameever-teams-webapp:devever-teams-webapp:latest
Hot Reload✅ Yes❌ No
Image Size~1 GB~200 MB
Next.js Build❌ No (dev server)✅ Yes (optimized)
Mounted Volumes✅ Yes (source code)❌ No
DevDependencies✅ Installed❌ Removed
Multi-stage Build❌ No (1 stage)✅ Yes (2 stages)
Start Commandyarn dev:webnode server.js
Port30303030
Rebuild Required❌ No✅ Yes (on each change)
UsageLocal DevelopmentDeployment / Production

Development Mode - How It Works​

Architecture​

Workflow​

  1. You edit a file in apps/web/src/components/MyComponent.tsx
  2. Docker volume syncs the change to the container
  3. Next.js detects the change (thanks to CHOKIDAR_USEPOLLING=true)
  4. Next.js recompiles only the modified module
  5. Browser refreshes automatically (Hot Module Replacement)
  6. You see the result in a few seconds!

Advantages​

  • No rebuild: No need to rebuild the Docker image
  • Fast feedback: See changes in seconds
  • Isolated environment: Same environment as production
  • No pollution: No need to install Node.js on your computer

Disadvantages​

  • ⚠️ Larger image: ~1 GB (contains all dev tools)
  • ⚠️ Performance: Slightly slower than native dev server
  • ⚠️ Polling: Uses more CPU to detect changes

Production Mode - How It Works​

Architecture​

Workflow​

  1. Build the image: docker-compose build

    • Copy source code
    • Install dependencies
    • Compile application (yarn build:web)
    • Remove devDependencies
    • Create optimized image

  2. Start the container: docker-compose up

    • Start Next.js server in production mode
    • Serve compiled files

  3. Code modification:

    • ❌ No hot reload
    • ✅ Rebuild required: docker-compose build
    • ✅ Restart required: docker-compose up

Advantages​

  • Lightweight image: ~200 MB (only compiled code)
  • Maximum performance: Optimized and minified code
  • Security: No source code in the image
  • Production ready: Identical to deployment

Disadvantages​

  • ⚠️ No hot reload: Rebuild required on each change
  • ⚠️ Slow build: 5-10 minutes for each rebuild
  • ⚠️ Slow feedback: Not suitable for development

When to Use Which Mode?​

Use Development Mode if​

  • You are coding and testing features
  • You want to see changes in real-time
  • You want fast feedback
  • You are developing React components, pages, styles
  • You are debugging an issue

Use Production Mode if​

  • You want to test the final version before deployment
  • You want to check the application performance
  • You want to test the optimized build
  • You want to simulate the production environment
  • You want to create an image for deployment

For daily development​

# 1. Build the dev image (once)
./docker-run.sh dev:build

# 2. Start in dev mode
./docker-run.sh dev

# 3. Code, test, iterate...
# Changes reload automatically!

# 4. Stop when done
./docker-run.sh stop

Before commit / push​

# 1. Test in production mode
./docker-run.sh build
./docker-run.sh start

# 2. Verify everything works
# Open http://localhost:3030

# 3. Stop
./docker-run.sh stop

# 4. Commit and push
git add .
git commit -m "feat: new feature"
git push

Tips​

Switch from dev mode to prod mode​

# Stop dev
./docker-run.sh stop

# Start prod
./docker-run.sh build
./docker-run.sh start

Switch from prod mode to dev mode​

# Stop prod
./docker-run.sh stop

# Start dev
./docker-run.sh dev

Clean everything​

# Stop all containers
./docker-run.sh stop

# Remove images
./docker-run.sh clean

Common Issues​

Hot reload doesn't work​

Solution: Check that polling variables are enabled in .env.dev.docker:

CHOKIDAR_USEPOLLING=true
WATCHPACK_POLLING=true

Dev image is too large​

This is normal! The dev image contains all development tools. Use production mode for a lightweight image.

Production build is too slow​

This is normal! Next.js compiles and optimizes all the code. That's why we use dev mode for coding.