Next.js热模块改造问题，

Question

我目前正在处理一个来自SSH连接的Next.js项目(我需要在SSH中工作，因为我的api请求存在cookie问题)。

我还使用Docker构建了一个用于react的映像和一个web服务，因为我使用的是nginx服务器。因此，当我启用我的服务，应用程序加载，我可以访问应用程序，当我作出改变，它的工作。但我必须重新加载浏览器选项卡才能看到更改。显然，我的web服务不喜欢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"

这是我的船坞-复合。Here：

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

我已经知道了，这是下一个/webpack_hmr配置问题，与码头或ngnix配置无关.

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