So verwenden Sie Docker-Compsoe zum Bereitstellen eines Projekts mit Front-End- und Back-End-Trennung

Sag es im Voraus

Wir alle wissen, dass Docker eine sehr einfache Bereitstellungsumgebung erreichen kann. Jetzt haben wir ein Projekt mit getrenntem Frontend und Backend. Das Frontend wird auf Basis von Vue entwickelt und mit Webpakc in einen Dist-Ordner gepackt. Das Backend ist ein Node.js-Dienst, der eine API-Schnittstelle bereitstellt. Frontend und Backend sind getrennt. Wir müssen also einen Container für das Front-End-Projekt und einen Container für das Back-End-Projekt haben. Wenn es sich dann um eine Produktionsumgebung handelt, treten domänenübergreifende Probleme auf. Die Front-End-Anforderung muss per Reverse-Proxy an das Back-End weitergeleitet werden. Das Erste, was mir in den Sinn kommt, ist, Nginx zum Festlegen von Proxy_Pass zu verwenden. Ja, das stimmt. Wir hatten also diese Ideen. Wie machen wir das mit Docker-Compose?

Erste Schritte

Tatsächlich habe ich gerade erst angefangen, Docker zu verstehen. Es gibt also viele Dinge, die nicht verstanden werden. Beispielsweise wird in Docker ein Container durch ein Image generiert, sodass dieser Container als unabhängiges System betrachtet werden kann und dieses System auch über einen eigenen unabhängigen Port verfügt. Nehmen wir also wie bei unserer vorherigen Anforderung an, dass unser Front-End Port 80 in Container1 verfügbar macht und ihn Port 80 des Hostcomputers zuordnet, und dass das Back-End Port 3000 in Container2 verfügbar macht und ihn Port 3000 des Hostcomputers zuordnet. Wenn wir also die Anforderung per Reverse-Proxy übermitteln, erfolgt dies über den Hostcomputer oder über den Container? Ich habe im Internet viele Artikel von anderen großen Jungs konsultiert und gelernt, ebenso wie die Dokumente auf der offiziellen Website. Es zeigt sich, dass diese Anforderung direkt durch den Container erreicht werden kann. Warum? Da Docker-Compose alle Container im selben Netzwerk erstellt, müssen wir, wenn wir andere Container finden möchten, diese nur über den Dienstnamen in Docker-Compose finden. Werfen wir einen Blick in unseren Katalog:

Musikvideo
 ├─ .git
 ├─ .gitignore
 ├─ LIZENZ
 ├─ README.md
 ├─ babel.config.js
 ├─ Abstand
 ├─ docker-compose.yml
 ├─ Dokumente
 ├─ nginx.conf
 ├─ Paket-Lock.json
 ├─ Paket.json
 ├─ öffentlich
 ├─ Server
 ├─ Quelle
 └─ vue.config.js

„dist“ ist unser Front-End-Projekt und „server“ ist unser Back-End-Projekt. Werfen wir einen Blick auf unsere docker-compose.yml:

Version: '3'
 Leistungen:
 music-web: #Dienstname des Front-End-Projekts
   container_name: 'music-web-container' #Containernameimage: nginx #Geben Sie das Image anrestart: always
   Häfen:
   - 80:80
   Bände: 
   - ./nginx.conf:/etc/nginx/nginx.conf #Nginx-Konfiguration mounten - ./dist:/usr/share/nginx/html/ #Projekt mounten depends_on:
   - Musikserver
 music-server: #Der Dienstname des Backend-Projekts
   Containername: „Musikserver-Container“
   build: ./server #Erstellen Sie das Image basierend auf der Docker-Datei im Serververzeichnis restart: always
   exponieren:
   - 3000

Wie Sie sehen, verwenden wir die Volumes-Eigenschaft, um die Datei nginx.conf des Hosts in die Nginx-Konfigurationsdatei im Container einzubinden, um die ursprüngliche Konfigurationsdatei zu überschreiben, und um auch „dist“ in den Container einzubinden. Wir stellen den Container des Front-End-Projekts bereit und ordnen ihn Port 80 des Hostcomputers zu, und wir stellen den Container des Back-End-Projekts Port 3000 bereit. Wo implementieren wir also die Reverse-Proxy-Anfrage? Bitte siehe nginx.conf:

#Benutzer niemand;
 Arbeiterprozesse 1;
 Ereignisse {
   Arbeiterverbindungen 1024;
 }
 http {
   mime.types einschließen;
   Standardtyp Anwendung/Oktett-Stream;
   sendfile an;
   #tcp_nopush ein;
   #keepalive_timeout 0;
   KeepAlive-Timeout 65;
   #gzip ein;
   gzip an;
   gzip_min_länge 5k;
   gzip_puffer 4 16k;
   #gzip_http_version 1.0;
   gzip_comp_level 3;
   gzip_types Text/einfache Anwendung/Javascript-Anwendung/x-Javascript-Text/CSS-Anwendung/Xml-Text/Javascript-Anwendung/x-httpd-php-Bild/JPEG-Bild/GIF-Bild/PNG;
   gzip_vary ein;
   Server {
     hören Sie 80;
     Servername www.xieyezi.com;
     #Musik-App-Projektstandort / {
     index index.html index.htm; #Attribute hinzufügen. 
     root /usr/share/nginx/html; #Site-Verzeichnis}
     # Musik-App-Projekteinstellungen Proxy-Weiterleitungsort /api/ {
     Proxy-Passwort http://Musikserver:3000/;
     }
     Fehlerseite 500 502 503 504 /50x.html;
     Standort = /50x.html {
       root /usr/share/nginx/html;
     }
   }
 }

Den Proxy-Pass können Sie oben unter http://music-server:3000/; sehen. Music-server ist der Servicename unseres Backend-Projektes. Über den Servicenamen finden wir den Container und realisieren so den Reverse-Proxy.

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.