Detaillierte Erläuterung der für das Front-End erforderlichen Nginx-Konfiguration

Nginx (Engine x) ist ein leichter, leistungsstarker HTTP- und Reverse-Proxyserver sowie ein allgemeiner Proxyserver (TCP/UDP/IMAP/POP3/SMTP), der ursprünglich vom Russen Igor Sysoev geschrieben wurde.

Grundlegende Befehle

nginx -t prüft die Konfigurationsdatei auf Syntaxfehler
nginx -s reload hot reload, lädt die Konfigurationsdatei neu
nginx -s stop Schnelles Herunterfahren
nginx -s quit Warten Sie, bis der Arbeitsprozess abgeschlossen ist, und fahren Sie dann herunter

Nachdem wir den Nginx-Server eingerichtet und gestartet haben, schauen wir uns zunächst die Standardkonfiguration von Nginx an und stellen dann nacheinander verschiedene Verwendungsszenarien vor.

Standardkonfiguration

Im Nginx-Installationsverzeichnis kopieren wir eine Kopie von `nginx.conf` nach `nginx.conf.default` als Backup der Konfigurationsdatei und ändern dann `nginx.conf`

# Die Anzahl der Arbeitsprozesse worker_processes 1;
Ereignisse {
  worker_connections 1024; #Anzahl der Verbindungen pro Arbeitsprozess}

http {
  mime.types einschließen;
  Standardtyp Anwendung/Oktett-Stream;

  # Protokollformat log_format Zugriff '$remote_addr - $remote_user [$time_local] $host "$request" '
         '$status $body_bytes_sent "$http_referer" '
         '"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
  access_log /srv/log/nginx/access.log Zugriff; # Protokollausgabeverzeichnis gzip on;
  sendfile an;

  # Link-Timeout, automatische Trennung keepalive_timeout 60;

  # Virtueller Hostserver {
    hören Sie 8080;
    Servername Localhost; # Browserzugriff Domänenname Zeichensatz UTF-8;
    access_log logs/localhost.access.log Zugriff;

    # Routenstandort / {
      root www; # Zugriff auf das Stammverzeichnis index index.html index.htm; # Eintragsdatei}
  }

  #Andere Konfigurationsdateien einführen, einschließlich Server/*;
}

Erstellen einer Site

Fügen Sie im Verzeichnis der anderen Konfigurationsdateien „Server“ eine neue Site-Konfigurationsdatei xx.conf hinzu.

Fügen Sie den virtuellen Host 127.0.0.1 xx_domian# zur Hosts-Datei des Computers hinzu

Server {
  hören Sie 8080;
  Servername xx_Domäne; #Browserzugriff Domänenname Zeichensatz UTF-8;
  access_log logs/xx_domian.access.log Zugriff;

  # Routenstandort / {
    root www; # Zugriff auf das Stammverzeichnis index index.html index.htm; # Eintragsdatei}
}

Führen Sie den Befehl nginx -s reload aus. Wenn der Befehl erfolgreich war, können Sie Ihre Seite sehen, indem Sie xx_domian im Browser aufrufen.

Ablaufzeit je nach Dateityp festlegen

Standort ~.*\.css$ {
  läuft in 1 Tag ab;
  brechen;
}
Standort ~.*\.js$ {
  läuft in 1 Tag ab;
  brechen;
}

Standort ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
  Zugriff_Abmeldung;
  läuft in 15 Tagen ab; #15 Tage lang speichernPause;
}

# curl -x127.0.0.1:80 upload/2022/web/logo.png -I #teste das maximale Alter des Bildes

Deaktivieren des Datei-Cachings

Der Code wird häufig in der Entwicklungsumgebung geändert und der Browser-Cache muss aktualisiert werden, um die Auswirkungen sichtbar zu machen. So können wir den Browser-Caching deaktivieren, um die Effizienz zu verbessern

Standort ~* \.(js|css|png|jpg|gif)$ {
  add_header Cache-Control kein Speichern;
}

Anti-Hotlink

Aufruf von Dateien durch andere Webseiten verhindern

Standort ~* \.(gif|jpg|png)$ {
  # Erlauben Sie nur 192.168.0.1, Ressourcen anzufordern. valid_referers, keine blockiert 192.168.0.1;
  wenn ($ungültiger_Referrer) {
    neu schreiben ^/ http://$host/logo.png;
  }
}

Statische Dateikomprimierung

Server {
  # Gzip-Komprimierung aktivieren gzip on;
  # Legen Sie die für gzip erforderliche Mindestversion des HTTP-Protokolls fest (HTTP/1.1, HTTP/1.0).
  gzip_http_version 1.1;
  # Stellen Sie den Komprimierungsgrad ein. Je höher der Komprimierungsgrad, desto länger die Komprimierungszeit (1-9)
  gzip_comp_level 4;
  # Legen Sie die Mindestanzahl an Bytes für die Komprimierung fest und holen Sie sich gzip_min_length 1000 von der Seite Content-Length;
  # Legen Sie den komprimierten Dateityp fest (Text/HTML)
  gzip_types Text/einfache Anwendung/JavaScript-Text/CSS;
}

Führen Sie den Befehl nginx -s reload aus und greifen Sie nach Erfolg mit einem Browser darauf zu

Fehlerseite angeben

# Geben Sie gemäß dem Statuscode die entsprechende Fehlerseite zurück error_page 500 502 503 504 /50x.html;
Standort = /50x.html {
  Stammverzeichnis /Quelle/Fehlerseite;
}

Führen Sie den Befehl nginx -s reload aus und greifen Sie nach Erfolg mit einem Browser darauf zu

Domänenübergreifende Probleme

Definition von „Cross-Domain“

Die Same Origin Policy schränkt ein, wie Dokumente oder Skripts, die vom gleichen Ursprung geladen werden, mit Ressourcen eines anderen Ursprungs interagieren können. Dies ist ein wichtiger Sicherheitsmechanismus zum Isolieren potenziell schädlicher Dateien. Lesevorgänge zwischen verschiedenen Quellen sind grundsätzlich nicht zulässig.

Definition von Homolog

Zwei Seiten haben denselben Ursprung, wenn ihr Protokoll, ihr Port (sofern angegeben) und ihr Domänenname identisch sind. Das Prinzip von Nginx zur Lösung domänenübergreifender Probleme

Zum Beispiel:

• Der Domänenname des Front-End-Servers lautet: http://xx_domain
• Der Domänenname des Backend-Servers lautet: https://github.com

Wenn http://xx_domain jetzt eine Anfrage an https://github.com stellt, erfolgt eine domänenübergreifende Anfrage.

Sie müssen jedoch nur einen Nginx-Server starten, den Servernamen auf xx_domain festlegen und dann den entsprechenden Speicherort festlegen, um die vom Front-End benötigten domänenübergreifenden Anforderungen abzufangen und die Anforderungen schließlich per Proxy an github.com zurückzusenden. Wie in der folgenden Konfiguration gezeigt:

## Konfigurieren Sie den Reverse-Proxy-Parameterserver {
  hören Sie 8080;
  Servername xx_Domäne

  ## 1. Wenn ein Benutzer http://xx_domain besucht, geht der Reverse-Proxy zu https://github.com
  Standort / {
    Proxy_Pass https://github.com;
    Proxy_Redirect aus;
    proxy_set_header Host $host; # übergeben Sie den Domänennamen proxy_set_header X-Real-IP $remote_addr; # übergeben Sie die IP
    proxy_set_header X-Scheme $scheme; #Übertragungsprotokoll proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

Dadurch kann die Same-Origin-Policy des Browsers perfekt umgangen werden: Der Zugriff von github.com auf github.com von nginx ist ein Same-Origin-Zugriff, und die von nginx an den Server weitergeleitete Anfrage löst die Same-Origin-Policy des Browsers nicht aus.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.