Issue

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.

Solution

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.

Answered By - Sylvain Bapst

Answer Checked By - Senaida (WPSolving Volunteer)

Thursday, April 14, 2022

[SOLVED] Next.js Hot Module Remplacement issue in SSH,

Issue

Solution