I've encountered issues trying to configure hot reload with Docker and NextJS. When I make changes and save a file, the server does not reload.
Below is the contents of the docker-compose.yml:
version: '3'
services:
mainapp:
build: ./mainapp
restart: always
volumes:
- ./mainapp:/mainapp
subapp:
build: ./apps/subapp
restart: always
volumes:
- ./apps/subapp:/subapp
mainappdb:
image: postgres:alpine
restart: always
environment:
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=...
ports:
- 5432:5432
volumes:
- mainappdb:/var/lib/postgres/mainappdb
nginx:
build: ./nginx
ports:
- 80:80
volumes:
mainappdb:
driver: local
This is the Dockerfile for mainapp:
FROM node:alpine
WORKDIR /usr/app
COPY ./ ./
EXPOSE 3000
CMD ["npm", "run", "dev"]
This is the Dockerfile for subapp:
FROM node:alpine
WORKDIR /usr/app
COPY ./ ./
EXPOSE 3000
CMD ["npm", "run", "dev"]
This is next.config.js for mainapp:
/** @type {import('next').NextConfig} */
const nextConfig = {
webpackDevMiddleware: config => {
config.watchOptions = {
poll: 1000,
aggregateTimeout: 300,
}
return config
},
experimental: {
outputStandalone: true,
},
reactStrictMode: true,
swcMinify: false,
images: {
domains: [...],
},
}
module.exports = nextConfig
This is next.config.js for subapp:
/** @type {import('next').NextConfig} */
const nextConfig = {
basePath: '/subapp',
webpack: (config, context) => {
config.watchOptions = {
poll: 1000,
aggregateTimeout: 300
}
return config
},
experimental: {
outputStandalone: true,
},
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig
The directory structure is as follows:
/myapplication/apps/subapp
|
|--> Dockerfile
|
|--> (all the nextjs code)
/myapplication/mainapp
|
|--> Dockerfile
|
|--> (all the nextjs code)
/myapplication/nginx
|
|--> Dockerfile
|
|--> default.conf
/myapplication/docker-compose.yml
Could the issue be related to my use of the WORKDIR instruction in the Dockerfile?