Next.js SSH 中的热模块替换问题，

Question

我目前正在通过 SSH 连接处理 Next.js 项目（由于 api 请求的 cookie 问题，我需要在 SSH 中工作）。

我还使用 Docker 为 React 和 Web 服务构建图像，因为我使用的是 nginx 服务器。因此，当我启用我的服务时，应用程序会加载，我可以访问该应用程序，并且当我进行更改时，它会起作用。但是我必须重新加载浏览器选项卡才能看到更改。显然我的网络服务不喜欢 webpack 的 hmr，我从中得到了这个日志：

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"

这是我的 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

这是我的服务网站配置文件：

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;
}

提前感谢您的时间。

Answer 1

我已经弄明白了，这是一个 next/webpack_hmr 配置问题，与 docker 或 ngnix 配置无关...

使用中间件刷新模块解决了我的问题。

Next.js SSH 中的热模块替换问题，

Next.js Hot Module Remplacement issue in SSH,

ssh

nginx

docker

webpack-hmr

next.js