Heim > Web-Frontend > js-Tutorial > Dockerisieren Sie Ihre Frontend-Anwendung mit Nginx für eine nahtlose Bereitstellung

Dockerisieren Sie Ihre Frontend-Anwendung mit Nginx für eine nahtlose Bereitstellung

Mary-Kate Olsen
Freigeben: 2024-12-28 12:40:10
Original
893 Leute haben es durchsucht

Einführung

In den meisten Fällen erfordert die Bereitstellung einer Frontend-Anwendung die Trennung der Bereitstellung statischer Assets von Backend-APIs. Ein guter Ansatz hierfür ist die Kopplung von Nginx als Reverse-Proxy und Webserver mit Docker zur Containerisierung. Dieser Leitfaden führt Sie durch den Prozess der Bereitstellung einer Frontend-Anwendung mit Nginx und Docker.

Voraussetzungen

So stellen Sie eine Frontend-Anwendung mit Nginx und Docker bereit
Einführung
Die effiziente Bereitstellung einer Frontend-Anwendung erfordert oft die Trennung der Bereitstellung statischer Assets von Backend-APIs. Ein leistungsstarker Ansatz ist die Kombination von Nginx als Reverse-Proxy und Webserver mit Docker zur Containerisierung. Dieser Leitfaden führt Sie durch den Prozess der Bereitstellung einer Frontend-Anwendung mit Nginx und Docker.

Voraussetzungen
Um dieser Anleitung zu folgen, sollten Sie Folgendes haben:

  • Grundkenntnisse von React (oder einem beliebigen Frontend-Framework).
  • Vertrautheit mit Docker und Nginx.

Einrichten der Anwendung

Eine klare Projektstruktur vereinfacht die Bereitstellung. Legen Sie alle erforderlichen Dateien in einem Ordner ab, um Ihr Docker-Image zu erstellen. Diese Dateien sollten Folgendes enthalten:

  • build/-Ordner (enthält die produktionsbereiten statischen Dateien).
  • Dockerfile(definiert, wie das Image erstellt wird).
  • nginx.conf (benutzerdefinierte Nginx-Konfiguration).
  • sites-enabled/ (optionale zusätzliche Nginx-Konfigurationen).

Eine ausführliche Erklärung der Nginx-Konfiguration finden Sie hier

Dockerizing Your Frontend Application with Nginx for Seamless Deployment

Elevating React: Die Kraft von Nginx für eine mühelose Bereitstellung freisetzen

Amit Kumar Rout ・ 9. Dez. '23

#javascript #tutorial #reagieren #nginx

Schritte:

  1. Erstellen Sie die Produktionsversion Ihrer Anwendung:
npm run build
Nach dem Login kopieren

Dieser Befehl erstellt ein Build/-Verzeichnis mit optimierten statischen Dateien.

  1. Erstellen Sie eine Docker-Datei: Schreiben Sie die folgende Docker-Datei, um den Container zu definieren:
FROM nginx:latest

# Clean the default HTML directory and remove default nginx.conf
RUN rm -rf /usr/share/nginx/html/*
RUN rm /etc/nginx/nginx.conf

# Copy custom Nginx configuration
COPY nginx.conf /etc/nginx/

# Copy the production build files into Nginx's HTML directory
COPY build/ /usr/share/nginx/html/

# Copy additional Nginx configurations (if any)
COPY ./sites-enabled/* /etc/nginx/sites-enabled/

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]
Nach dem Login kopieren

Erstellen des Docker-Images

Sobald Ihre Dateien fertig sind, erstellen Sie das Docker-Image:

docker build -t my-app-img:prod .
Nach dem Login kopieren

Bei der Bereitstellung auf einer anderen VM können Sie das Image als .tar-Datei packen:

docker save my-app-img > my-app-img.tar
Nach dem Login kopieren

Ausführen des Docker-Images

Option 1: Das Image direkt ausführen

  1. Laden Sie das Docker-Image aus einer .tar-Datei (bei Übertragung zwischen Systemen):
cat my-app-img.tar | docker load
Nach dem Login kopieren
  1. Führen Sie den Container aus:
docker run -itd -p 80:80 --name my-app my-app-img
Nach dem Login kopieren

Dadurch wird der Container gestartet und auf Port 80 verfügbar gemacht.

Option 2: Ausführen von Docker Compose

Erstellen einer docker-compose.yml-Datei:

version: "3"
services:
  web:
    container_name: my_app
    image: my-app-img
    ports:
      - "80:80"
    volumes:
      - ./template:/etc/nginx/templates/
    environment:
      NGINX_ENVSUBST_OUTPUT_DIR: /etc/nginx/sites-enabled
Nach dem Login kopieren

Dann starten Sie den Container:

docker-compose up -d
Nach dem Login kopieren

Abschluss

Die Verwendung von Nginx und Docker zur Bereitstellung einer Frontend-Anwendung bietet eine starke, skalierbare Lösung. Dies liegt daran, dass statische Assets von Backend-APIs getrennt werden und so die beste Leistung erzielt wird. Passen Sie Ihre Nginx-Konfiguration an Ihre Bedürfnisse an, z. B.:

  • SSL/TLS für HTTPS-Unterstützung hinzufügen.
  • Aktivieren Sie das Caching für eine hohe Leistung.

Dieses Setup sorgt dafür, dass Ihre Frontend-Anwendung in produktionsbereiten Umgebungen zuverlässig ist.

Wenn Sie Vorschläge zur Verbesserung des Prozesses haben, hinterlassen Sie diese bitte im Kommentarbereich. Wenn Sie diesen Beitrag hilfreich fanden, liken und teilen Sie ihn bitte.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonDockerisieren Sie Ihre Frontend-Anwendung mit Nginx für eine nahtlose Bereitstellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage