So verwenden Sie den Nginx-Proxy, um statischen Ressourcenzugriff zu erreichen

1. Ziel:

Um statische Ressourcen (CSS, Bilder usw.) über Nginx anzufordern und eine Vorschau der Seite über den Nginx-Proxy anzuzeigen.

2. Implementierungseffekt:

Geben Sie die Nginx-Proxy-Adresse über den Browser ein, um auf die lokale HTML-Datei zuzugreifen. Sie können auch auf die Proxy-Routing-Zugriffsschnittstelle zugreifen, um die Seitenvorschaufunktion zu erreichen in der lokalen Windows-Entwicklungsumgebung Konfiguration unter

3. Nginx konfiguriert den lokalen statischen Engineering-Agenten

Suchen Sie die Nginx-Konfigurationsdatei nginx.conf und konfigurieren Sie den Nginx-Agenten

server{
listen       80;

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

Anweisungen:

D:/workspace /sc-multipl-static-web -project/ ist Ihr Front-End-Projektdateipfad

Speichern Sie die Konfigurationsdatei und starten Sie nginx neu. Geben Sie localhost:80 in den Browser ein, um zu überprüfen

2. Win10 konfiguriert den zu erreichenden lokalen Domänennamen Zugriff auf Domänennamen

Der Zugriff auf Domänennamen erfolgt tatsächlich über die entsprechende IP-Adresse. Um über IP auf den Dienst zuzugreifen und keinen Internet-Domänennamen zu öffnen, können wir den Zugriff auf Domänennamen simulieren, indem wir die Zuordnung lokaler Domänennamen konfigurieren (nur gültig). auf diesem Computer)

Öffnen Sie C:WindowsSystem32driversetc, suchen Sie die Hosts-Datei. Wenn nicht, fügen Sie selbst eine zur Verwaltung hinzu. Öffnen Sie den Editor als Mitglied, geben Sie

127.0.0.1 www.chen123.com

ein und öffnen Sie dann den Nginx Konfigurationsdatei

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;
    }
    
   }

Speichern Sie die Konfigurationsdatei und starten Sie Nginx neu, geben Sie localhost:chen123 in den Browser ein, um zu überprüfen

Vorschau der 3.nginx-Konfigurationsseite Routing

Zunächst müssen Sie eine Seitenvorschau-Schnittstelle implementieren, das Rückgabeformat ist String-Typ, der Inhalt ist eigentlich der Textinhalt von HTML ,

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/;
    }
    
   }
}

Speichern Sie die Konfigurationsdatei und starten Sie Nginx neu. Geben Sie zur Überprüfung http://cms_server_pool/cms/preview in den Browser ein

Meine lokale Nginx-Konfiguration lautet wie folgt

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Nginx-Proxy, um statischen Ressourcenzugriff zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!