How to use nginx proxy to access static resources

1. Goal:

In order to request static resources (css, pictures, etc.) through nginx, page preview is performed through the nginx proxy.

2. Implementation effect:

Enter the nginx proxy address through the browser to access the local html file by opening the page, or you can also achieve the page preview function by accessing the proxy routing access interface.
Note : What I demonstrate is the configuration in the local windows development environment

3. Specific configuration

1. nginx configures the local static engineering agent

Find the nginx configuration file nginx.conf , configure nginx proxy

server{
listen       80;

#前端门户工程
location / {
    alias   D:/workspace/sc-multipl-static-web-project/;
    index  index.html;
}

Instructions:
D:/workspace/sc-multipl-static-web-project/ is your front-end project file path

Save the configuration file and restart nginx , enter localhost:80 in the browser to verify

2. Win10 configures the local domain name to achieve domain name access

Domain name access actually accesses the service through the corresponding IP address, and then accesses the service through the IP. If we have not activated Internet domain name, you can simulate domain name access by configuring local domain name mapping (only valid on this machine)
Open C:\Windows\System32\drivers\etc, find the hosts file, if not, add one yourself, as administrator Open the editor as identity, enter

127.0.0.1 www.chen123.com

and then open the nginx configuration file

server{
    listen       80;
    server_name  www.chen123.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    
   }

Save the configuration file and restart nginx, Browser input localhost:chen123 Verification

3.nginx configure page preview routing

First, you need to implement a page preview interface, the return format is String type, the content is actually the text content of html
Open the nginx configuration file again

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    #cms页面预览路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #页面预览
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
    
   }
}

http://cms_server_pool/cms/preview/ is the page preview interface you want to implement, and jump to the real address by configuring routing,

    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
        #如果有多个服务器,可以写在下面,例如
        #server 127.0.0.1:31002 weight=10;
    }

Save the configuration file and restart nginx, enter http://cms_server_pool/cms/preview in the browser to verify

My local nginx configuration is as follows

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    #gzip  on;
    #cms页面预览路由
    upstream cms_server_pool {
        server 127.0.0.1:31001 weight=10;
    }

    server{
    listen       80;
    server_name  www.xuecheng.com;
    ssi on;
    ssi_silent_errors on;
    #前端门户工程
    location / {
        alias   D:/workspace/sc-multipl-static-web-project/;
        index  index.html;
    }
    #页面预览
    location /cms/preview/ {
        proxy_pass http://cms_server_pool/cms/preview/;
    }
   }
}

The above is the detailed content of How to use nginx proxy to access static resources. For more information, please follow other related articles on the PHP Chinese website!