我有一个在 localhost:8080 本地运行的 Hello World 前端/vuejs 应用程序
我还使用以下配置在本地运行 nginx：
/etc/nginx/conf.d/default.conf
server {
listen 8089;
listen [::]:8089;
server_name localhost;
location / {
proxy_pass http://localhost:8080/;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
}
}
正如预期的那样，我还可以在 localhost:8089 处通过 nginx 访问我的前端应用程序：
现在我想在 localhost:8089/frontend 下访问它，并查看了 nginx 重写规则：
https://www.nginx.com/blog/creating-nginx-rewrite-rules/
我已经更新：/etc/nginx/conf.d/default.conf：
server {
listen 8089;
listen [::]:8089;
server_name localhost;
location /frontend {
rewrite /frontend(.*) /$1 break;
proxy_pass http://localhost:8080/;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Port $server_port;
}
}
但是当我使用上面的新配置重新启动 nginx 时，我只会在浏览器中看到空白页面：http://localhost:8089/frontend:
所以我的重写有些不正确。
我也尝试使用 curl，它通过 nginx 和不使用 nginx 都提供 200：
curl -v http://localhost:8080/frontend（没有nginx）
$ curl -v http://localhost:8080/frontend
* Trying 127.0.0.1:8080...
* Connected to localhost (127.0.0.1) port 8080 (#0)
> GET /frontend HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.74.0
> accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< X-Powered-By: Express
< accept-Ranges: bytes
< Content-Type: text/html; charset=UTF-8
< Content-Length: 778
< etag: W/"30a-73T3k5LDbAo8lePJzzKFsycD26w"
< Date: Tue,03 Aug 2021 08:10:22 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
<
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico">
<title>my-app-vuejs</title>
<link href="js/app.js" rel="preload" as="script"><link href="js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but my-app-vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="js/chunk-vendors.js"></script><script type="text/javascript" src="js/app.js"></script></body>
</html>
* Connection #0 to host localhost left intact
curl -v http://localhost:8089/frontend（使用 nginx）
$ curl -v http://localhost:8089/frontend
* Trying 127.0.0.1:8089...
* Connected to localhost (127.0.0.1) port 8089 (#0)
> GET /frontend HTTP/1.1
> Host: localhost:8089
> User-Agent: curl/7.74.0
> accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Server: nginx/1.21.1
< Date: Tue,03 Aug 2021 08:10:32 GMT
< Content-Type: text/html; charset=UTF-8
< Content-Length: 778
< Connection: keep-alive
< X-Powered-By: Express
< accept-Ranges: bytes
< etag: W/"30a-73T3k5LDbAo8lePJzzKFsycD26w"
<
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico">
<title>my-app-vuejs</title>
<link href="js/app.js" rel="preload" as="script"><link href="js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but my-app-vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="js/chunk-vendors.js"></script><script type="text/javascript" src="js/app.js"></script></body>
</html>
* Connection #0 to host localhost left intact
所以不太确定如何调试。有什么建议吗？