Angular 9 Universal 9-Bereitstellung auf IIS-Server mit web.config? Bereitstellen von Angular 9 Server-seitigem Rendering auf einem IIS-Server

Sep 18 2020

Bereitstellen des Angular 9 Server-seitigen Renderns auf einem IIS-Server

Was wird web.configfür IIS sein

Antworten

2 JalpaPanchal Sep 21 2020 at 03:22

Im Folgenden finden Sie die Schritte zum Erstellen einer Beispiel-App und zum Bereitstellen in iis:

1) Installieren Sie die Angular 10 CLI und initialisieren Sie ein neues Projekt. (Sie können diesen Schritt überspringen, wenn Sie die App bereits erstellt und npm installiert haben.)

npm install -g @angular/cli
ng new angular-seo-app

2) Kehren Sie zu Ihrer Befehlszeilenschnittstelle zurück und navigieren Sie zunächst zum Ordner Ihres Projekts:

cd angular-seo-app

ng add @nguniversal/express-engine --clientProject angular-seo-app

Der Schaltplan fügt Ihrem Projekt automatisch die erforderlichen Konfigurationen und Pakete hinzu und fügt sogar einen Express-Server hinzu.

Der Express-Server rendert einen Teil Ihrer Angular-App und gibt HTML an den Browser zurück. Der Server wird standardmäßig auf dem 4000-Port ausgeführt

3) Gehen Sie zurück zu Ihrem Terminal und führen Sie die folgenden Befehle aus:

npm run build:ssr 
npm run serve:ssr

Dadurch wird Ihr Projekt mit SSR-Unterstützung erstellt und der Express-Server von der Adresse http: // localhost: 4000 gestartet.

Sie sehen den dist-Ordner in Ihrem Projektordner.

4) Gehen Sie zu Ihrem Windows-Server (C: \ inetpub \ wwwroot) und erstellen Sie einen leeren Ordner (nennen Sie ihn beispielsweise ng-ssr).

5) In dist-Ordner in ng-ssr kopieren

6) Öffnen Sie den Ordner C: \ inetpub \ wwwroot \ ng-ssr \ dist \ angle-seo-app \ server. Sie finden die Datei main.js

7) Kopieren Sie main.js und fügen Sie es direkt in den Ordner ng-ssr ein

8) Erstellen Sie die Datei web.conifg in Ihrem Ordner ng-ssr und fügen Sie den folgenden Code hinzu:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>        
      <handlers>
        <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
      </handlers>
      <rewrite>
        <rules>
            <rule name="DynamicContent">
                 <match url="/*" />
                 <action type="Rewrite" url="main.js"/>
            </rule>
            <rule name="StaticContent" stopProcessing="true">  
                  <match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg))" />
                  <action type="None" />
            </rule>  
       </rules>
      </rewrite>
        <staticContent>
          <clientCache cacheControlMode="UseMaxAge" />
          <remove fileExtension=".svg" />
          <remove fileExtension=".eot" />
          <remove fileExtension=".ttf" />
          <remove fileExtension=".woff" />
          <remove fileExtension=".woff2" />
          <remove fileExtension=".otf" />
          <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
          <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
          <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
          <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
          <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
          <mimeMap fileExtension=".otf" mimeType="application/otf" />
         </staticContent>      
    </system.webServer>
  </configuration>

Eine IIS-Datei web.config ist eine XML-Datei, die Regeln für eine bestimmte Site (oder ein bestimmtes Verzeichnis) auf Ihrem Webserver enthält. Es ähnelt einer .htaccess-Datei in Apache. Diese Datei enthält möglicherweise Fehlerseiten für die Einstellung von Regeln 404, 403 usw. für Ihre Site sowie Umleitungsregeln für ältere URLs.