So konfigurieren Sie denselben Domänennamen für das Front- und Backend von Nginx

So konfigurieren Sie denselben Domänennamen für das Front- und Backend von Nginx

In diesem Artikel wird hauptsächlich die Methode zum Konfigurieren desselben Domänennamens für das Front-End und das Back-End von nginx vorgestellt und mit Ihnen geteilt. Die Einzelheiten lauten wie folgt:

Upstream-DFCT {
#ip_hash;
 Server 121.41.19.236:8192;
}
 
Server {
 Servername ct.aeert.com;
 
 Standort / {
  Stammverzeichnis /opt/web;
  Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
  Fehlerseite 405 =200 http://$host$request_uri;
 }
 
 Standort ^~/web/ {
  Proxy_Set_Header Host $Proxy_Host;
# Proxy_Set_Header Host $host;
  Proxy_Set_Header X-Real-IP $Remote_Addr;
  proxy_set_header X-Weitergeleitet-Für $proxy_add_x_forwarded_for;
  Proxy-Passwort http://121.41.19.236:8192/;
 }
 
 
 listen 443 ssl; # verwaltet von Certbot
 ssl_certificate /etc/letsencrypt/live/ct.aeert.com/fullchain.pem; # verwaltet von Certbot
 ssl_certificate_key /etc/letsencrypt/live/ct.aeert.com/privkey.pem; # verwaltet von Certbot
 include /etc/letsencrypt/options-ssl-nginx.conf; # verwaltet von Certbot
 ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # verwaltet von Certbot
 
}
 
 
Server {
 wenn ($host = ct.aeert.com) {
  gibt 301 https://$host$request_uri zurück;
 } # verwaltet von Certbot
 
 
 hören Sie 80;
 Servername ct.aeert.com;
 return 404; # verwaltet von Certbot
 
 
}

Ergänzung: Drei Möglichkeiten zum Bereitstellen von Projekten mit getrenntem Front-End und Back-End mithilfe von nginx

Bei Projekten mit getrenntem Front-End und Back-End können Front-End und Back-End unterschiedliche oder denselben Domänennamen verwenden.

Folgendes ist der Fall, wenn Frontend und Backend denselben Domänennamen verwenden:

1. Das Frontend verwendet www.xxx.com und das Backend verwendet api.xxx.com

Server {
Servername www.xxx.com;

Standort / {
 Wurzel /tmp/dist;
 Index Index.html;
 Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
  }
 }

Server {
Servername api.xxx.com;
Standort / {
uwsgi_pass 127.0.0.1:8000;
/etc/nginx/uwsgi_params einschließen;
 }
}

2. Das Frontend verwendet www.xxx.com und das Backend verwendet www.xxx.com/api/

1. Wenn uwsgi http verwendet, kann es wie folgt konfiguriert werden

Server {
Servername www.xxx.com;

Standort / {
 Wurzel /tmp/dist;
 Index Index.html;
 Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
 }

Standort ^~ /api/ {
 Proxy-Passwort http://127.0.0.1:8000/;
 }
}

2. Wenn uwsgi die Socket-Methode verwendet, muss es wie folgt konfiguriert werden

Server {
Servername www.xxx.com;
Standort / {
 Wurzel /tmp/dist;
 Index Index.html;
 Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
}

Standort ^~ /api/ {
 Proxy-Passwort http://127.0.0.1:8080/;
 }
}
Server {
hören Sie 8080;
Standort / {
uwsgi_pass 127.0.0.1:8000;
/etc/nginx/uwsgi_params einschließen;
 }
}

Dies ist das Ende dieses Artikels zum Konfigurieren desselben Domänennamens für das Front-End und Back-End von nginx. Weitere Informationen zum Konfigurieren desselben Domänennamens für das Front-End und Back-End von nginx finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • So konfigurieren Sie Nginx, um zwischen dem PC- oder Mobiltelefonzugriff auf verschiedene Domänennamen zu unterscheiden

<<:  Beispielcode zum Erstellen eines minimierten Header-Effekts nur mit CSS

>>:  TinyEditor ist ein einfacher und benutzerfreundlicher HTML-WYSIWYG-Editor

Artikel    

Artikel empfehlen

So legen Sie Hintergrundfarbe und Transparenz in Vue fest

Einstellungen für Hintergrundfarbe und Transparen...

So gestalten Sie Ihre JavaScript-Funktionen eleganter

Inhaltsverzeichnis Objektparameter durch Destrukt...

Einführung in den Aufbau eines DNS-Servers unter centos7

Inhaltsverzeichnis 1. Projektumgebung: 2: DNS-Ser...

Vue3 (V) Details zur Integration der HTTP-Bibliothek axios

Inhaltsverzeichnis 1. Installieren Sie axios 2. V...

So verwenden Sie Node zum Implementieren des statischen Datei-Cachings

Inhaltsverzeichnis Cache Klassifizierung des Cach...

So verwenden Sie html2canvas, um HTML-Code in Bilder umzuwandeln

Konvertieren Sie Code in ein Bild mit html2canvas...

Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm

Um die Anforderungen effizient zu erfüllen und au...

Grundsätze und Nutzungsdetails für MySQL 8.0-Benutzer- und Rollenverwaltung

Dieser Artikel beschreibt die Benutzer- und Rolle...

CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

Manchmal ist es schön, ein paar nette Scrollbar-E...

So verwenden Sie die JSZip-Komprimierung in CocosCreator

CocosCreator-Version: 2.4.2 Praktische Projektanw...

Ausführliche Erklärung des Maximalwerts von int in MySQL

Einführung Ich werde ausführlich über das Problem...