Mehrere Methoden zum Bereitstellen mehrerer Front-End-Projekte mit nginx

Ich habe 3 Methoden zusammengefasst, um mehrere Front-End-Projekte mit nginx auf einem Server bereitzustellen.

• Domänennamenbasierte Konfiguration
• Portbasierte Konfiguration
• Basierend auf der Standortkonfiguration

Bevor wir beginnen, werfen wir einen Blick auf die Standardkonfigurationsdatei für die nginx-Installation: /etc/nginx/nginx.conf-Datei

Sie können in der Abbildung sehen: include /usr/nginx/modules/*.conf . Der Zweck dieses Satzes besteht darin, beim Start von nginx alle *.conf-Dateien im Verzeichnis /usr/nginx/modules/ zu laden. Daher können wir zur einfacheren Verwaltung unsere eigene xx.conf-Datei in diesem Verzeichnis definieren. Beachten Sie jedoch, dass es mit .conf enden muss.

Lassen Sie uns nach Abschluss der Einführung über die am häufigsten verwendete Methode sprechen, die viele Unternehmen online verwenden.

Domänennamenbasierte Konfiguration

Basierend auf der Domänennamenkonfiguration wird davon ausgegangen, dass zuerst die Domänennamenauflösung konfiguriert wurde. Sie haben beispielsweise einen Domänennamen gekauft: www.fly.com. Anschließend haben Sie im Hintergrund zwei seiner Second-Level-Domänennamen konfiguriert: a.fly.com und b.fly.com.

Die Konfigurationsdateien lauten wie folgt:

Konfigurieren Sie die Konfigurationsdatei von a.fly.com:

vim /usr/nginx/modules/a.conf

Server {
        hören Sie 80;
        Servername a.fly.com;
        
        Standort / { 
                Stammverzeichnis /data/web-a/dist;
                Index Index.html;
        }
}

Konfigurieren Sie die Konfigurationsdatei von b.fly.com:

vim /usr/nginx/modules/b.conf

Server {
        hören Sie 80;
        Servername b.fly.com;
        
        Standort / { 
                Wurzel /Daten/Web-B/Dist;
                Index Index.html;
        }
}

Der Vorteil dieser Methode ist, dass der Host nur Port 80 öffnen muss. Anschließend können Sie darauf zugreifen, indem Sie direkt auf den Domänennamen der zweiten Ebene zugreifen.

Portbasierte Konfiguration

Die Konfigurationsdateien lauten wie folgt:

Konfigurieren Sie die Konfigurationsdatei von a.fly.com:

vim /usr/nginx/modules/a.conf

Server {
        hör zu 8000;
        
        Standort / { 
                Stammverzeichnis /data/web-a/dist;
                Index Index.html;
        }
}

# nginx-Port 80-Konfiguration (hört auf den sekundären Domänennamen a)
Server {
        hören Sie 80;
        Servername a.fly.com;
        
        Standort / {
                proxy_pass http://localhost:8000; #Weiter}
}

Konfigurieren Sie die Konfigurationsdatei von b.fly.com:

vim /usr/nginx/modules/b.conf

Server {
        hören Sie 8001;
        
        Standort / { 
                Wurzel /Daten/Web-B/Dist;
                Index Index.html;
        }
}

# nginx-Port 80-Konfiguration (hört auf den sekundären Domänennamen b)
Server {
        hören Sie 80;
        Servername b.fly.com;
        
        Standort / {
                proxy_pass http://localhost:8001; #Weiter}
}

Wie Sie sehen, werden mit dieser Methode insgesamt vier Server gestartet. Außerdem ist die Konfiguration weit weniger einfach als bei der ersten Methode. Daher wird sie nicht empfohlen.

Basierend auf der Standortkonfiguration

Die Konfigurationsdateien lauten wie folgt:

Konfigurieren Sie die Konfigurationsdatei von a.fly.com:

vim /usr/nginx/modules/ab.conf

Server {
        hören Sie 80;
        
        Standort / { 
                Stammverzeichnis /data/web-a/dist;
                Index Index.html;
        }
        
        Standort /web-b { 
                Alias ​​/data/web-b/dist;
                Index Index.html;
        }
}

Hinweis: Bei dieser Konfiguration ist der Speicherort/das Verzeichnis das Stammverzeichnis und die anderen müssen Aliase verwenden.

Wie Sie sehen, besteht der Vorteil dieser Methode darin, dass wir nur einen Server haben und keinen sekundären Domänennamen konfigurieren müssen. Und二級目錄sollte im Frontend-Projekt konfiguriert werden

Informationen zur React-Konfiguration finden Sie unter: https://blog.csdn.net/mollerlala/article/details/96427751

Informationen zur Vue-Konfiguration finden Sie unter: https://blog.csdn.net/weixin_33868027/article/details/92139392

Damit ist dieser Artikel über verschiedene Methoden zum Bereitstellen mehrerer Front-End-Projekte mit nginx abgeschlossen. Weitere Informationen zum Bereitstellen mehrerer Front-End-Projekte mit 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!