nginx和expressjs没有找到我其他三个应用程序的css文件

Question

第一次使用nginx。

我所拥有的：
我有三个应用程序在运行。

1. 公共应用程序：http://localhost:8080
2. 管理应用程序：http://localhost:1000
3. Infra应用程序：http://localhost:3000

我想做的是：
我希望每个应用程序都使用各自的资源(css、js等(。

我已经在做的事情：
在每个应用程序中，我已经在提供各自的静态文件
因此，我在Public和Admin应用程序中分别有以下代码行：

this.express.use('/css',express.static(path.resolve(__dirname, 'css')));

当直接访问每个应用程序(使用其各自的门(时，例如(http://localhost:8080)它们各自的资源正在被发现和使用。

出了什么问题：温通过web服务器访问和应用程序，公共应用程序(门8080(的异常他们各自的资源没有加载。

我试图做的事情：为基础设施应用程序设置两个额外的位置，但我不知道这是否是正确的做法。

nginx配置文件:

worker_processes  1;
events {
worker_connections  1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name  localhost;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
proxy_http_version 1.1;
# PUBLIC
location / {
proxy_pass http://localhost:8080;
}
# ADMIN
location /admin {
proxy_pass http://localhost:1000;
}
# INFRA
location /api {
proxy_pass http://localhost:3000/api;
}
location /images {
proxy_pass http://localhost:3000/images;
}
location /fonts {
proxy_pass http://localhost:3000/fonts;
}
# ErrorPage
error_page   500 502 503 504  /50x.html;
location = /50x.html {
root   html;
}
}
}

Answer 1

修改管理应用程序以在/admin/css和/admin/js路径上为静态文件提供服务器。对infra应用程序执行同样的操作，其静态文件将在/infra/css和/infra/js路径上提供。

管理员应用程序：

this.express.use('/admin/css',express.static(path.resolve(__dirname, 'css')));
this.express.use('/admin/js',express.static(path.resolve(__dirname, 'js')));

Infra应用程序：

this.express.use('/infra/css',express.static(path.resolve(__dirname, 'css')));
this.express.use('/infra/js',express.static(path.resolve(__dirname, 'js')));

修改nginx文件，使所有以/admin开头的路径都将转到您的管理应用程序，所有以/infra开头的路径将转到基础应用程序。

# PUBLIC
location / {
proxy_pass http://localhost:8080/;     #note the trailing slash
}
# ADMIN
location /admin/ {                         #note the trailing slash
proxy_pass http://localhost:1000/;     #note the trailing slash
}
# INFRA
location /infra/ {                         #note the trailing slash
proxy_pass http://localhost:3000/;     #note the trailing slash
}

假设你在默认端口上运行nginx，即80http://localhost/css现在将加载公共应用程序的css，http://localhost/infra/css将加载基础应用程序的css，http://localhost/admin/css将为管理应用程序加载相同的内容。