15-04-2024, 05:47
Wenn du eine Angular-, React- oder Vue.js-Anwendung auf IIS hosten möchtest, ist es eigentlich ein ziemlich einfacher Prozess. Ich habe es schon viele Male gemacht und finde mich oft dabei, Freunden mit demselben Problem zu helfen. Lass uns das gemeinsam durchgehen.
Zuerst musst du sicherstellen, dass deine Anwendung gebaut und bereit ist. Wenn du den Build-Befehl für deine Angular-, React- oder Vue.js-App ausführst, generiert es normalerweise eine Menge statischer Dateien in einem Build- oder Dist-Verzeichnis. Du wirst HTML, CSS, JavaScript und vielleicht einige Bilder oder Schriftarten finden. Stelle sicher, dass du weißt, wo sich dieser Ausgabeordner befindet, denn von dort wird IIS die Dateien bereitstellen.
Bevor du irgendetwas tust, musst du sicherstellen, dass IIS auf deinem Computer installiert ist. Wenn du Windows nutzt, kannst du dieses Feature ganz einfach über die Systemsteuerung oder die Windows-Einstellungen hinzufügen. Suche einfach nach "Windows-Funktionen ein- oder ausschalten", finde Internetinformationsdienste in der Liste und aktiviere alle notwendigen Kästchen. Möglicherweise hast du es bereits installiert, aber es ist gut, das zu bestätigen, falls du dich nicht erinnerst. Nachdem du dies überprüft hast, starte deinen Computer neu, um sicherzustellen, dass alles in Ordnung ist.
Danach öffne den IIS-Manager. Du kannst ihn schnell finden, indem du "IIS" in dein Startmenü eingibst. Wenn er geöffnet ist, siehst du deine lokale Maschine im linken Panel aufgelistet. Klicke mit der rechten Maustaste darauf und wähle "Neue Website erstellen". Hier wirst du alles für deine App konfigurieren.
Du musst deiner neuen Website einen Namen geben. Es kann alles sein, was du möchtest, aber ich wähle normalerweise etwas Erkennbares, wie den Namen der App, die ich hoste. Dann musst du den physischen Pfad angeben. Hier zeigst du IIS auf den Build- oder Dist-Ordner, über den wir vorher gesprochen haben. Durchsuche diesen Ordner und wähle ihn aus.
Nachdem du den Site-Namen und den physischen Pfad festgelegt hast, musst du einen Port wählen. Standardmäßig läuft HTTP auf Port 80, aber wenn du dort etwas anderes betreibst, kannst du einen anderen Port wählen, wie z.B. 8080 oder so. Denke nur daran, diese Wahl zu merken, denn du wirst sie benötigen, um später auf deine Anwendung zuzugreifen.
Sobald du das eingerichtet hast, klicke auf OK, und deine Website sollte erstellt werden. Jetzt ist sie fast live. Aber warte, wir haben noch ein paar Schritte zu bewältigen, um sicherzustellen, dass alles richtig funktioniert.
Beim Hosting von Single-Page-Anwendungen wie denjenigen, die mit Angular, React oder Vue erstellt wurden, kannst du auf Probleme mit der Routenführung stoßen. Da diese Frameworks die HTML5 History API nutzen, könnte es sein, dass IIS die Datei nicht findet, wenn du versuchst, direkt zu einer Route zu navigieren. Um das zu beheben, möchtest du eine web.config-Datei im Stammverzeichnis deines Build-Ordners konfigurieren.
Wenn du noch keine web.config-Datei hast, erstelle eine und öffne sie in einem Texteditor. Hier ist, was ich normalerweise dort einfüge:
xml
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Was dies tut, ist, IIS zu sagen: "Hey, wenn er eine spezifische Datei oder ein Verzeichnis nicht finden kann, wenn jemand eine URL anfordert, dann diene stattdessen die index.html-Datei aus." So kann deine Single-Page-App ihre eigene Routenführung verwalten. Stelle nur sicher, dass das Rewrite-Modul ebenfalls in IIS installiert ist, was normalerweise der Fall ist. Es scheint ein kleiner Schritt zu sein, aber es verhindert wirklich viel Kopfzerbrechen, wenn jemand versucht, direkt auf yourapp.com/some-route zuzugreifen.
Als nächstes, wenn deine Anwendung irgendeine Art von BrowserSync verwendet oder wenn du auf einen anderen Port für die Entwicklung angewiesen bist, solltest du deine CORS-Einstellungen überprüfen, falls du mit APIs interagieren möchtest. Manchmal blockieren Entwicklungsumgebungen Anforderungen basierend auf dem Ursprung, wenn du von einer API abrufst. Dies gilt nicht für deine lokale Entwicklung, wenn du nur Dateien direkt bereitstellst, aber es ist für Produktionsbereitstellungen wert, darüber nachzudenken.
Jetzt lass uns über Sicherheit sprechen. Du möchtest sicherstellen, dass deine Anwendung sicher ist. Während du statische Dateien hostest, benötigst du wahrscheinlich kein komplexes Setup, aber du solltest trotzdem darüber nachdenken, HTTPS anstelle von HTTP zu verwenden, wenn deine Anwendung mit Benutzerdaten interagiert. Du kannst dies über den IIS-Manager einrichten, indem du ein SSL-Zertifikat erstellst oder importierst. Vertrau mir, es ist nur eine weitere Schutzschicht, und es ist heutzutage wirklich der Standard.
Du solltest auch sicherstellen, dass deine Anwendung optimiert ist. Das Minimieren von JavaScript- und CSS-Dateien sowie das Aktivieren von Caching kann die Ladezeiten erheblich verbessern. Die meisten Build-Tools können dies handhaben, aber manchmal ist es wert, zu überprüfen, ob du alle Vorteile erhältst. Angular und React bieten beispielsweise Optionen zum Minimieren und Bündeln deiner Dateien direkt in ihrer Konfiguration an.
Sobald alles eingerichtet ist und auf deinem lokalen Computer gut aussieht, ist es Zeit, es auszuprobieren. Öffne deinen Webbrowser und gib die Adresse deines Servers zusammen mit der Portnummer ein, die du vorher gewählt hast. Wenn du Port 80 verwendest, reicht der Name der Website aus. Wenn du auf einem anderen Port bist, musst du es so eingeben: http://localhost:8080/.
Wenn alles gut geht, solltest du sehen, wie deine App genau so geladen wird wie in deiner Entwicklungsumgebung. Überprüfe auch die Routen. Versuch, zu verschiedenen Teilen deiner Anwendung zu navigieren. Wenn es ein Problem mit der Routenführung gibt, könnte es gut sein, die web.config-Datei erneut zu überprüfen und zu sicherzustellen, dass die Rewrite-Regeln korrekt eingerichtet sind.
Wenn du auf Probleme stößt, keine Panik. Schau dir die IIS-Protokolle im Verzeichnis C:\inetpub logs\LogFiles an. Hier kannst du alle Fehler zurückverfolgen, die möglicherweise auftauchen. In der Regel musst du nur einen Pfad korrigieren oder sicherstellen, dass nichts in der Routenführung übersehen wird.
Manchmal musst du einige Berechtigungseinstellungen anpassen, insbesondere wenn deine App Dateien schreiben oder spezifische Ressourcen nutzen muss. Klicke mit der rechten Maustaste auf deinen Anwendungsordner und gehe zu den Eigenschaften. Von dort aus kannst du die Sicherheitseinstellungen verwalten und deiner IIS_IUSRS-Gruppe die erforderlichen Berechtigungen erteilen, um auf deine Dateien zuzugreifen.
Denk daran, das Hosten einer Angular-, React- oder Vue.js-App auf IIS kann seine Eigenheiten haben, aber sobald du den Dreh raus hast, wird es wirklich ein einfacher Prozess. Jede App benötigt möglicherweise einige individuelle Anpassungen, aber was ich geteilt habe, sollte die Grundlagen abdecken.
Wenn du jemals möchtest, dass dein Server mehr tut, wie einen Backend-Dienst auszuführen oder sich mit einer Datenbank zu verbinden, ist das eine weitere Schicht, die wir erkunden können. Aber für jetzt genieße die Zufriedenheit, dass deine statischen Dateien korrekt bereitgestellt werden, und zögere nicht, dich zu melden, wenn du unterwegs auf Probleme stößt!
Ich hoffe, du fandest meinen Beitrag nützlich. Übrigens, hast du eine gute Backup-Lösung für Windows Server im Einsatz? In diesem Beitrag erkläre ich, wie man Windows Server richtig sichert.
Zuerst musst du sicherstellen, dass deine Anwendung gebaut und bereit ist. Wenn du den Build-Befehl für deine Angular-, React- oder Vue.js-App ausführst, generiert es normalerweise eine Menge statischer Dateien in einem Build- oder Dist-Verzeichnis. Du wirst HTML, CSS, JavaScript und vielleicht einige Bilder oder Schriftarten finden. Stelle sicher, dass du weißt, wo sich dieser Ausgabeordner befindet, denn von dort wird IIS die Dateien bereitstellen.
Bevor du irgendetwas tust, musst du sicherstellen, dass IIS auf deinem Computer installiert ist. Wenn du Windows nutzt, kannst du dieses Feature ganz einfach über die Systemsteuerung oder die Windows-Einstellungen hinzufügen. Suche einfach nach "Windows-Funktionen ein- oder ausschalten", finde Internetinformationsdienste in der Liste und aktiviere alle notwendigen Kästchen. Möglicherweise hast du es bereits installiert, aber es ist gut, das zu bestätigen, falls du dich nicht erinnerst. Nachdem du dies überprüft hast, starte deinen Computer neu, um sicherzustellen, dass alles in Ordnung ist.
Danach öffne den IIS-Manager. Du kannst ihn schnell finden, indem du "IIS" in dein Startmenü eingibst. Wenn er geöffnet ist, siehst du deine lokale Maschine im linken Panel aufgelistet. Klicke mit der rechten Maustaste darauf und wähle "Neue Website erstellen". Hier wirst du alles für deine App konfigurieren.
Du musst deiner neuen Website einen Namen geben. Es kann alles sein, was du möchtest, aber ich wähle normalerweise etwas Erkennbares, wie den Namen der App, die ich hoste. Dann musst du den physischen Pfad angeben. Hier zeigst du IIS auf den Build- oder Dist-Ordner, über den wir vorher gesprochen haben. Durchsuche diesen Ordner und wähle ihn aus.
Nachdem du den Site-Namen und den physischen Pfad festgelegt hast, musst du einen Port wählen. Standardmäßig läuft HTTP auf Port 80, aber wenn du dort etwas anderes betreibst, kannst du einen anderen Port wählen, wie z.B. 8080 oder so. Denke nur daran, diese Wahl zu merken, denn du wirst sie benötigen, um später auf deine Anwendung zuzugreifen.
Sobald du das eingerichtet hast, klicke auf OK, und deine Website sollte erstellt werden. Jetzt ist sie fast live. Aber warte, wir haben noch ein paar Schritte zu bewältigen, um sicherzustellen, dass alles richtig funktioniert.
Beim Hosting von Single-Page-Anwendungen wie denjenigen, die mit Angular, React oder Vue erstellt wurden, kannst du auf Probleme mit der Routenführung stoßen. Da diese Frameworks die HTML5 History API nutzen, könnte es sein, dass IIS die Datei nicht findet, wenn du versuchst, direkt zu einer Route zu navigieren. Um das zu beheben, möchtest du eine web.config-Datei im Stammverzeichnis deines Build-Ordners konfigurieren.
Wenn du noch keine web.config-Datei hast, erstelle eine und öffne sie in einem Texteditor. Hier ist, was ich normalerweise dort einfüge:
xml
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Was dies tut, ist, IIS zu sagen: "Hey, wenn er eine spezifische Datei oder ein Verzeichnis nicht finden kann, wenn jemand eine URL anfordert, dann diene stattdessen die index.html-Datei aus." So kann deine Single-Page-App ihre eigene Routenführung verwalten. Stelle nur sicher, dass das Rewrite-Modul ebenfalls in IIS installiert ist, was normalerweise der Fall ist. Es scheint ein kleiner Schritt zu sein, aber es verhindert wirklich viel Kopfzerbrechen, wenn jemand versucht, direkt auf yourapp.com/some-route zuzugreifen.
Als nächstes, wenn deine Anwendung irgendeine Art von BrowserSync verwendet oder wenn du auf einen anderen Port für die Entwicklung angewiesen bist, solltest du deine CORS-Einstellungen überprüfen, falls du mit APIs interagieren möchtest. Manchmal blockieren Entwicklungsumgebungen Anforderungen basierend auf dem Ursprung, wenn du von einer API abrufst. Dies gilt nicht für deine lokale Entwicklung, wenn du nur Dateien direkt bereitstellst, aber es ist für Produktionsbereitstellungen wert, darüber nachzudenken.
Jetzt lass uns über Sicherheit sprechen. Du möchtest sicherstellen, dass deine Anwendung sicher ist. Während du statische Dateien hostest, benötigst du wahrscheinlich kein komplexes Setup, aber du solltest trotzdem darüber nachdenken, HTTPS anstelle von HTTP zu verwenden, wenn deine Anwendung mit Benutzerdaten interagiert. Du kannst dies über den IIS-Manager einrichten, indem du ein SSL-Zertifikat erstellst oder importierst. Vertrau mir, es ist nur eine weitere Schutzschicht, und es ist heutzutage wirklich der Standard.
Du solltest auch sicherstellen, dass deine Anwendung optimiert ist. Das Minimieren von JavaScript- und CSS-Dateien sowie das Aktivieren von Caching kann die Ladezeiten erheblich verbessern. Die meisten Build-Tools können dies handhaben, aber manchmal ist es wert, zu überprüfen, ob du alle Vorteile erhältst. Angular und React bieten beispielsweise Optionen zum Minimieren und Bündeln deiner Dateien direkt in ihrer Konfiguration an.
Sobald alles eingerichtet ist und auf deinem lokalen Computer gut aussieht, ist es Zeit, es auszuprobieren. Öffne deinen Webbrowser und gib die Adresse deines Servers zusammen mit der Portnummer ein, die du vorher gewählt hast. Wenn du Port 80 verwendest, reicht der Name der Website aus. Wenn du auf einem anderen Port bist, musst du es so eingeben: http://localhost:8080/.
Wenn alles gut geht, solltest du sehen, wie deine App genau so geladen wird wie in deiner Entwicklungsumgebung. Überprüfe auch die Routen. Versuch, zu verschiedenen Teilen deiner Anwendung zu navigieren. Wenn es ein Problem mit der Routenführung gibt, könnte es gut sein, die web.config-Datei erneut zu überprüfen und zu sicherzustellen, dass die Rewrite-Regeln korrekt eingerichtet sind.
Wenn du auf Probleme stößt, keine Panik. Schau dir die IIS-Protokolle im Verzeichnis C:\inetpub logs\LogFiles an. Hier kannst du alle Fehler zurückverfolgen, die möglicherweise auftauchen. In der Regel musst du nur einen Pfad korrigieren oder sicherstellen, dass nichts in der Routenführung übersehen wird.
Manchmal musst du einige Berechtigungseinstellungen anpassen, insbesondere wenn deine App Dateien schreiben oder spezifische Ressourcen nutzen muss. Klicke mit der rechten Maustaste auf deinen Anwendungsordner und gehe zu den Eigenschaften. Von dort aus kannst du die Sicherheitseinstellungen verwalten und deiner IIS_IUSRS-Gruppe die erforderlichen Berechtigungen erteilen, um auf deine Dateien zuzugreifen.
Denk daran, das Hosten einer Angular-, React- oder Vue.js-App auf IIS kann seine Eigenheiten haben, aber sobald du den Dreh raus hast, wird es wirklich ein einfacher Prozess. Jede App benötigt möglicherweise einige individuelle Anpassungen, aber was ich geteilt habe, sollte die Grundlagen abdecken.
Wenn du jemals möchtest, dass dein Server mehr tut, wie einen Backend-Dienst auszuführen oder sich mit einer Datenbank zu verbinden, ist das eine weitere Schicht, die wir erkunden können. Aber für jetzt genieße die Zufriedenheit, dass deine statischen Dateien korrekt bereitgestellt werden, und zögere nicht, dich zu melden, wenn du unterwegs auf Probleme stößt!
Ich hoffe, du fandest meinen Beitrag nützlich. Übrigens, hast du eine gute Backup-Lösung für Windows Server im Einsatz? In diesem Beitrag erkläre ich, wie man Windows Server richtig sichert.
