Next.js Hot Module Remplacement issue in SSH, - docker

Question

I'm currently working on a Next.js project from an SSH connection (I need to work in SSH because of cookie issues with my the api requests).
I also use Docker to build an image for react and a web service because I'm using a nginx server. So when I enable my services, the app loads, I got access to the app, and when I make a change, it works. BUT I have to reload the browser tab to see the change. Apparently my web service don't like the hmr of webpack, I got this log from it :
web_1 | 192.168.10.1 - - [25/Mar/2022:08:45:03 +0000] "GET /_next/webpack-hmr HTTP/1.1" 404 936 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.82 Safari/537.36"
Here is my docker-compose.yml:
version: '3'
services:
web:
networks:
- webgateway
- default
build: ./docker/web
depends_on:
- react
volumes:
- $PWD/docker/web/etc/nginx.conf:/etc/nginx/nginx.conf
- $PWD/docker/web/etc/default.conf:/etc/nginx/conf.d/default.conf
labels:
traefik.enable: true
traefik.http.routers.test.tls: false
react:
networks:
- default
build: ./frontend
environment:
HOST_LOCAL: $HOST_LOCAL
COMPOSE_PROJECT_NAME: $COMPOSE_PROJECT_NAME
env_file:
- .local
volumes:
- ./frontend:/opt/services/react
networks:
webgateway:
external: true
Here is my conf for my service web:
docker/web/Dockerfile :
FROM nginx:1.13-alpine
RUN apk update && apk add bash
docker/web/etc/default.conf :
upstream app {
server react:3000;
}
server {
listen 80;
charset utf-8;
client_max_body_size 20M;
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
location / {
# checks for static file, if not found proxy to app
try_files $uri #proxy_to_app;
}
location /api/v {
# checks for static file, if not found proxy to app
try_files $uri #proxy_to_api;
}
location #proxy_to_app {
proxy_connect_timeout 600s;
proxy_read_timeout 600s;
proxy_send_timeout 600s;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://app;
}
}
docker/web/etc/default.conf :
user root;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
Thanks for your time in advance.

Answer 1

I've figured it out, it's a next/webpack_hmr configuration issue, nothing to do with docker or ngnix config...
Using a middleware for refreshing the modules fixed my issue.