So verwenden Sie das Azure-CDN mit einem WebApp-Front-End-Projekt für Bilder

Question

Ich habe eine Azure WebApp (AngularJS + HTML) mit Bildern auf der gleichen App gehostet und mein Ziel ist es, alle Bilddateien auf dem Azure zu referenzieren CDN stattdessen.

Zuerst dachte ich, dieser Artikel war die Lösung: https://azure.microsoft.com/en-us/documentation/articles/cdn-websites-with-cdn/

Ich habe versucht, die gesamte App auf das CDN zu replizieren und das funktioniert, aber es scheint, als ob ich den Suchmaschinen sagen, müssen nicht den CDN Inhalt zu kriechen oder Ich werde doppelte SEO-Probleme bekommen. Ich kann jetzt zu der App auf dem CDN navigieren, was nicht ganz das ist, was ich möchte. Ich wollte nur die CDN-Bildstandorte in meinem JS- oder HTML-Code verwenden. Ich bin nicht sicher, ob ich jetzt die img src Verweise auf die CDN Bilder in der js/html ändern soll.

So scheint es auch, als ob für meine Anforderungen die Integration der Webapp mit dem CDN Overkill ist.

Daher meine Frage ist: Sollte ich einen Blob-Speicher einrichten und alle meine Bilder darauf setzen und dann dieses Speicherkonto mit dem CDN stattdessen integrieren (https://azure.microsoft.com/en-us/documentation/articles/cdn-create-a-storage-account-with-cdn/) oder habe ich etwas Grundlegendes verpasst?

Alle CDN/WebApp Azure-Artikel sprechen über die Änderung von MVC-Code und Bündelung, aber mein Frontend ist reines HTML/JS.

Jeder Ratschlag geschätzt ... danke.

Answer 1

Sie können ein Blob-Speicherkonto erstellen und es wie im Artikel Integrate a Storage Account with CDN gezeigt dem Azure-CDN konfigurieren und einige Änderungen in Ihrer Angular-Anwendung vornehmen, um Ihre Bild-URLs dem Azure-CDN zuzuordnen.

Wenn Sie Ihre statischen Assets nach Azure Blob Storage migrieren, können Sie die Verzeichnisstruktur im Blobspeicher beibehalten. E.G, Ihre Bilder befinden sich alle im Pfad images/ Ordner in Ihrem Anwendungsverzeichnis. Sie können einen Container mit dem Namen images erstellen und die Image-Dateien in diesen Container migrieren.

Anschließend können Sie eine benutzerdefinierte Funktion zum Konvertieren der Bild-URLs in Azure CDN festlegen und das Attribut ngSrc des Tags img festlegen. Hier ist mein Test Code-Schnipsel:

<div> 
     <img ng-src="{{parseUrl('images/test.jpg')}}" /> 
    </div> 
    <script> 
     var cdnUrl = 'http://<your_cdn_name>.azureedge.net'; 
     var app = angular.module("app",[]); 
     app.run(function($rootScope){ 
      $rootScope.parseUrl=function(imgpath){ 
       return cdnUrl+"/"+imgpath; 
      } 
     }) 
    </script> 

aktualisieren, konfigurieren Sie eine Azure CDN mit Web-App-Typ.

In meinem Test, ein angular SPA zu Azure CDN mit Web-App-Typ zu konfigurieren, ist einfach, und es gibt keinen zusätzlichen Schritt, wie https://azure.microsoft.com/en-us/documentation/articles/cdn-websites-with-cdn/ zeigt.

Klicken Sie auf den Endpoint Button im Azure CDN-Portal, geben Sie den Namen des CDN-Dienstes, wählen Sie die Herkunft Typen als web app, einen Web-App in Ihrem Azure-Abonnement auswählen. Warten Sie bis zu 90 Minuten, damit sich die Registrierung im CDN-Netzwerk ausbreiten kann.