☰

nginx 保留代理 docker 后面的热重新加载站点（webpack-dev-server）

tag-icon • tag-icon nginx
nginx 保留代理 docker 后面的热重新加载站点（webpack-dev-server）

我尝试设置一个 nginx 容器作为在 webpack-dev-server 上运行的开发网站的代理。不幸的是，我在加载静态文件时遇到了问题（404 未找到）。

当请求到达代理服务器的index.html文件时，它会尝试在http://localhost:8081/static/js/bundle.js这不是实际位置。

这是我的index.html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
  <link rel="manifest" href="/manifest.json" />
  <title>PowerPlan</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>

</html>

这是我的 nginx 配置：

server {
listen       80;
server_name  localhost;
error_log  /var/log/nginx/nginx_error.log  warn;

location /power-plan/ {
    resolver 127.0.0.11 ipv6=off;
    proxy_pass  http://host.docker.internal:3000/;

    proxy_http_version  1.1;
    proxy_set_header    Host $host;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host  $host;
    proxy_set_header X-Forwarded-Port  $server_port;
    proxy_cache_bypass  $http_upgrade;
    proxy_set_header Upgrade           $http_upgrade;
    proxy_set_header Connection        "upgrade";
}

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm; 
}

error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}

}

相关内容