nginx管理静态文件的location配置问题,nginx转发到nodejs的问题

Question

1. nginx 管理静态页面，然后将数据页面的请求转发到nodejs，为什么只能拿到index.html？
2. 页面数据请求该如何转发到nodejs--8080端口应该不需要防火墙开放吧

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include            mime.types;
    default_type       application/octet-stream;
    sendfile           on;
    keepalive_timeout  65;
    gzip  on;

    server {
        listen        80;
        rewrite ^(.*)$  https://$host$1 permanent;
    }

    server {
        listen       443 ssl;
        server_name  ljwzz.xyz;

        ssl_certificate      1.crt;
        ssl_certificate_key  1.key;

        ssl_protocols        TLSv1 TLSv1.1 TLSv1.2;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers          ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers  on;



        location  / {
            root   html;
            index  index.html;
           }

        location /favicon.ico {
            root   html;
        }

        location ^~ /static/ {
            root    html/static;
        }


        # location / {
        #     proxy_pass http://127.0.0.1:8080/;
        # }

        error_page 404    /404.html;

        error_page 500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }
    }
}

浏览器错误（）

网址/:1 GET https://网址/static/css/app.788ade4b8ad34482e3f85e0ee52745fb.css net::ERR_ABORTED
网址/:1 GET https://网址/static/js/manifest.2ae2e69a05c33dfc65f8.js net::ERR_ABORTED
网址/:1 GET https://网址/static/js/app.fba152483a9d7ae39f17.js net::ERR_ABORTED
网址/:1 GET https://网址/static/js/vendor.65142fefac425d6e5f53.js net::ERR_ABORTED
网址/:1 GET https://网址/static/js/app.fba152483a9d7ae39f17.js net::ERR_ABORTED

文件结构

.
|-- 50x.html
|-- index.html
`-- static
    |-- css
    |   |-- app.788ade4b8ad34482e3f85e0ee52745fb.css
    |   `-- app.788ade4b8ad34482e3f85e0ee52745fb.css.map
    |-- fonts
    |   `-- element-icons.6f0a763.ttf
    `-- js
        |-- app.fba152483a9d7ae39f17.js
        |-- app.fba152483a9d7ae39f17.js.map
        |-- manifest.2ae2e69a05c33dfc65f8.js
        |-- manifest.2ae2e69a05c33dfc65f8.js.map
        |-- vendor.65142fefac425d6e5f53.js
        `-- vendor.65142fefac425d6e5f53.js.map

Answer 1

1. 如果是新配https，建议一开始先用302跳转而不是301，因为302是临时转移而301是永久，而后者通常会被浏览器缓存，即便变配的话默认也会跳转，而一旦配置有问题的话就会一直无法访问（当然清缓存能解决），影响对出错位置的判断。
2. 30x跳转不用写那么复杂，直接return 301 https://域名$request_uri;就行。
3. 看到几个location块里的root是重复的，可以提出来共享。
4. 可以加条pid指令，变配时平滑重启会比较方便（省得去找pid了）。
5. location /里可能要加个try_files指令。
6. 有时候懒得手写可以用NginxConfig生成，顺便还把缩进啥的做好了……

试试：

worker_processes  1;
pid logs/nginx.pid;

events {
    worker_connections  1024;
    multi_accept on;
}
http {
    charset            utf-8;
    include            mime.types;
    default_type       application/octet-stream;
    sendfile           on;
    tcp_nopush         on;
    tcp_nodelay        on;
    keepalive_timeout  65;
    
    gzip  on;
    
    access_log logs/access.log;
    error_log logs/error.log warn;

    server {
        listen         443 ssl;
        server_name    ljwzz.xyz;
        root           html;
        index          index.html

        ssl_certificate      1.crt;
        ssl_certificate_key  1.key;

        ssl_protocols        TLSv1 TLSv1.1 TLSv1.2;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers          ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers  on;

        location  / {
            index       index.html;
            try_files   $uri $uri/ /index.html;
        }

        location ~ /\. {
            deny all;
        }

        error_page 404   /404.html;
        error_page 500 502 503 504  /50x.html;
    }
    server {
        listen 80;
        server_name *.ljwzz.xyz;
        return 302 https://www.ljwzz.xyz$request_uri;
    }
}

Answer 2

我想知道你的443端口是不是允许访问的

Answer 3

1、static既然已包含在html目录中，那么location ^~ /static/ {的配置可以删掉了；
2、如果使用了vue-router，那么location /配置中还需要添加try_files $uri $uri/ /index.html last;，来保证路由页面刷新可访问；

参考配置：

# FrontEnd
location / {
    root   html;
    index  index.html;
    try_files $uri $uri/ /index.html last;
}
# 可选配置，如果static不包含在html目录或在其他路径
location /static {
    alias   /path/static/; # 注意使用 alias 而非 root
}
# Node API
location /api/ {
    proxy_pass http://127.0.0.1:3000;
}