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

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

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

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;"]

Erstellen des Docker-Images

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

docker build -t my-app-img:prod .

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

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

1. Führen Sie den Container aus:

docker run -itd -p 80:80 --name my-app my-app-img

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

Dann starten Sie den Container:

docker-compose up -d

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!