So stellen Sie ein Angular-Projekt mit Docker bereit

So stellen Sie ein Angular-Projekt mit Docker bereit

Es gibt zwei Möglichkeiten, Angular-Projekte mit Docker bereitzustellen. Eine davon ist das serverseitige Rendering, das in der offiziellen Dokumentation beschrieben wird. Die andere besteht darin, das Knotenbild zu kompilieren und in den Webserver einzufügen. Da wir uns in der Knotenumgebung befinden, ist es am bequemsten, Express zu verwenden.

Erstellen Sie server.js

const express = erfordern('express');

const app = express();
const konfiguration = {
  Stammverzeichnis: __dirname + '/dist',
  Port: Prozess.Umgebung.PORT || 4200
};

//Statische Ressourcen app.use('/', express.static(config.root));

//Alle Routen führen zu index.html
app.all('*', Funktion (Anforderung, Res) {
  res.sendfile(config.root + '/index.html');
});
app.listen(config.port, () => {
  console.log("läuft……");
})

Dockerfile erstellen

VON Knoten:13.3.0-alpine3.10

ENV PORT=4200 \
  NODE_ENV=Produktion

# Installieren Sie Express und Angular/CLI
Führen Sie den Befehl npm install [email protected] -g \ aus.
  && npm install -g @angular/cli
# Erstellen Sie das App-Verzeichnis RUN mkdir -p /app
# Den Code in das App-Verzeichnis kopieren COPY ./app
ARBEITSVERZEICHNIS /app

# Abhängigkeiten installieren und das Programm erstellen. Da ich einen Reverse-Proxy in ein Unterverzeichnis benötige, füge ich den Parameter base-href hinzu: RUN npm install && ng build --base-href /manage/ --prod

${PORT} AUSSETZEN

EINSTIEGSPUNKT ["Knoten", "/app/server.js"]

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.

Das könnte Sie auch interessieren:
  • Detaillierte Schritte zum Bereitstellen von Tomcat- und Java-Anwendungen in Docker
  • Detaillierte Erläuterung der Verwendung von Docker zum Bereitstellen eines Webprojekts und zum Verpacken in eine Bilddatei
  • Detaillierte Schritte zum schnellen Bereitstellen von Node.js-Anwendungen auf Docker
  • Tutorial zum Bereitstellen des Flask-Frameworks von Python auf Docker
  • Docker-Lernhinweise zur K8S-Bereitstellungsmethode
  • Methoden zum Bereitstellen von MySQL-Diensten in Docker und die dabei auftretenden Fallstricke
  • Detaillierte Erläuterung der automatischen Docker-Bereitstellung von Tomcat
  • Detaillierte Erklärung zum Einrichten von Go und Bereitstellen von Anwendungen in Docker
  • So stellen Sie eine Nextcloud-Netzwerkfestplatte mit Docker bereit
  • Installation und Bereitstellung von Zabbix basierend auf Docker

<<:  Probleme beim Ändern des Passworts und beim Herstellen einer Verbindung zu Navicat bei der Installation und Verwendung von MySQL 8.0.16 unter Windows 7

>>:  Beispiel zum Einbetten von H5 in die Webansicht des WeChat-Applets

Artikel empfehlen

Zusammenfassung der Docker-Datenspeicherung

Bevor Sie diesen Artikel lesen, hoffe ich, dass S...

Vue+Websocket implementiert einfach die Chat-Funktion

In diesem Artikel wird der spezifische Code von V...

MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten

Dieser Artikel stellt vor, wie Sie IP-Adressdaten...

HTML-Tabellen-Tag-Tutorial (45): Tabellen-Body-Tag

Mit dem Tag <tbody> wird der Stil des Tabel...

Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs

Inhaltsverzeichnis 1. innodb_buffer_pool_size 2. ...

Beispielcode zur Implementierung einer QR-Code-Scanbox mit CSS

Normalerweise haben wir ein Scan-Feld, wenn wir d...

Zusammenfassung der Vue-Datenreaktionsfähigkeit

Bevor wir über die Datenreaktivität sprechen, müs...

Vue verwendet das Video-Tag, um die Videowiedergabe zu implementieren

In diesem Artikel wird der spezifische Code von V...

CSS Acht auffällige HOVER-Effekt-Beispielcodes

1. Effekt-HTML senden <div id="senden-btn...

Detaillierte Erklärung der Rolle des Schlüssels in React

Inhaltsverzeichnis Frage: Wird die Farbe des Bere...

Einige wichtige Punkte des visuellen Website-Designs

Vom Kunsthandwerksdesign über Grafikdesign bis hin...

Warum wird die MySQL-Paging-Funktion bei Verwendung von Limits immer langsamer?

Inhaltsverzeichnis 1. Testexperiment 2. Leistungs...