Nginx manages the location configuration of static files and the problem of nginx forwarding to nodejs

  1. nginx manages static pages, and then forwards requests for data pages to nodejs, why you can only get index.html?
  2. how should the page data request be forwarded to the nodejs--8080 port? there should be no need for a firewall to open it
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;
        }


        -sharp location / {
        -sharp     proxy_pass http://127.0.0.1:8080/;
        -sharp }

        error_page 404    /404.html;

        error_page 500 502 503 504  /50x.html;

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

browser error ()

/: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

File structure

.
|-- 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
Mar.04,2021

  1. if it is a new https, it is recommended to use 302 jump instead of 301 at the beginning, because 302 is a temporary transfer and 301 is permanent, and the latter is usually cached by the browser. Even if the configuration is modified, it will jump by default, and once there is a problem with the configuration, it will always be inaccessible (of course, clear cache can be solved), affecting the judgment of the location of the error.
  2. 30x jump does not need to be so complicated to write, just directly return 301 https:// domain name $request_uri; .
  3. see that the root in several location blocks is duplicated and can be shared.
  4. you can add a pid instruction, and it will be more convenient to restart smoothly during modification (you don't have to find pid).
  5. A try_files instruction may be added to location / .
  6. sometimes you can use NginxConfig to generate

try:


1statichtmllocation ^~ /static/ {;<br>2vue-routerlocation /try_files $uri $uri/ /index.html last;;

:

-sharp FrontEnd
location / {
    root   html;
    index  index.html;
    try_files $uri $uri/ /index.html last;
}
-sharp statichtml
location /static {
    alias   /path/static/; -sharp  alias  root
}
-sharp Node API
location /api/ {
    proxy_pass http://127.0.0.1:3000;
}
Menu