找不到nginx反向代理静态资产404

时间:2019-05-05 14:19:47

标签: apache docker nginx

我正在使用nginx和反向代理,还有docker容器。

我有两个Docker容器。

319f103c82e5        web_client_web_client   "nginx -g 'daemon of…"   6 minutes ago       Up 5 minutes        0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp      web_client
7636ddaeae99        admin_web_admin         "nginx -g 'daemon of…"   2 hours ago         Up 2 hours          0.0.0.0:6500->80/tcp, 0.0.0.0:7000->443/tcp   web_admin

这是我的两个容器。当我输入http://website.com时,它将转到web_client_web_client容器。当我输入http://website.com:6500时,它将转到admin_web_admin容器。这就是现在的流程。

我想要的是我不希望管理员用户键入http://website.com:6500进入管理员页面。我希望他们键入http://website.com/admin。因此,我决定使用proxy_pass,这意味着在访问http://website.com/admin时,它应该proxy_pass到https://website.com:7000

现在,我要为web_client_web_client发布一个nginx配置,因为它是处理端口80和433请求的配置。

这里是:

server {
    listen 80 default_server;
    server_name website.com;
    location / {
        rewrite ^ https://$host$request_uri? permanent;
    }
    location /admin {
        proxy_pass https://website.com:7000/;
    }

    # I also tried
    #location /admin/ {
    #   proxy_pass https://website.com:7000/;
    #}

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
}
server {
    listen 443 ssl;
    server_name website.com;

    gzip on;
    gzip_min_length 1000;
    gzip_types text/plain text/xml application/javascript text/css;

    ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/website.com/privkey.pem;

    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    root /usr/share/nginx/html;

    location / {
        add_header Cache-Control "no-store";
        try_files $uri $uri/index.html /index.html;
    }

    location ~ \.(?!html) {
        add_header Cache-Control "public, max-age=2678400";
        try_files $uri =404;
    }
}

现在,发生的是静态文件(未加载cs和js文件),当从chrome检查时,请求以https://website.com/static/css/app.597efb9d44f82f809fff1f026af2b728.css而不是https://website.com:7000/static/css/app.597efb9d44f82f809fff1f026af2b728.css的形式发出。因此它说404未找到。我为此花费了很长的时间,但我似乎很愚蠢,不了解这种简单的事情。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您的主要问题不是真正的nginx,而是两个应用程序的设置方式。我没有您的代码,但这是我可以从您的帖子中得出的结论:

在页面中,您使用绝对路径加载静态内容:/ static / css / ... 因此,即使您使用/ admin开头的页面,它们仍会尝试从/ static /

加载静态内容

一种解决方案是为您的静态内容使用相对路径。根据您的应用程序的复杂程度,这可能需要一些工作...您需要将静态文件的路径更改为“ ./static/css / ...”之类的文件,并确保您的文件仍然可以工作。然后您在nginx中的设置将起作用,因为管理页面将尝试加载'/ admin / static / ...'

另一种解决方案是将管理应用程序中的“静态”文件夹重命名为其他名称,然后在您的nginx配置中将该新路径代理传递。

最后一件事,您的帖子提到了2个端口:6500和7000。我认为这是一个错误,因此您可以更正吗?还是我理解错了?