Start Ihrer Storefront

Diese Anleitung beschreibt, wie Sie eine PWA Kit-Storefront starten und über ihre offizielle öffentliche Webadresse zugänglich machen. Sie haben drei Möglichkeiten, Ihr PWA Kit-Storefront zu starten und Traffic dorthin zu leiten:

  1. Verwenden Sie ein externes CDN wie CloudFlare oder Akamai.
  2. Verwenden Sie das von Salesforce Commerce Cloud bereitgestellte Embedded CDN (eCDN). Weitere Informationen zum Traffic-Routing an Managed Runtime mithilfe von eCDN finden Sie in der Anleitung.
  3. Verwenden Sie das Managed Runtime CDN.

Im Rahmen dieser Anleitung verwenden wir eine Beispiel-Storefront mit den folgenden Attributen:

  • Production-URL: https://www.example.com
  • Projekt-ID: example
  • Umgebungs-IDs: staging und production

Das Aufsetzen eines CDN eines Drittanbieters auf Managed Runtime ist optional. Kunden können sich aus den folgenden Gründen für das CDN eines Drittanbieters entscheiden:

  • Eine bereits bestehende Beziehung zum CDN-Anbieter Ihrer Wahl, dessen interne Teams in der Konfiguration und Verwaltung eines CDN geschult sind.
  • Notwendigkeit zusätzlicher Kontrolle über CDN-Funktionen, die über das hinausgeht, was Managed Runtime bietet, zum Beispiel benutzerdefinierte WAF-Regeln, zusätzliche Leistungsheader und zusätzliche Integrationen von Drittanbieter-Produkten.

Kunden, die niedrige "Cost to Serve" (CTS) und eine schnelle Markteinführung wünschen und nur begrenzte CDN-Anforderungen haben, können entweder eCDN oder das integrierte Managed Runtime CDN verwenden.

In dieser Anleitung wird davon ausgegangen, dass Sie für die Durchführung administrativer Aufgaben auf die Runtime Admin-Webanwendung und die Managed Runtime API zugreifen können. Um Zugriff auf diese Tools zu erhalten, bitten Sie Ihren Commerce Cloud-Administrator, Ihrem Konto eine der beiden folgenden Rollen im Account Manager hinzuzufügen: Managed Runtime User oder Managed Runtime Admin.

Um Anfragen an die Managed Runtime API zu senden, müssen Sie im Header Authorization der HTTP-Anfrage einen API-Schlüssel mit dem Wert Bearer $API_KEY einfügen. Vergessen Sie bei allen Beispielanfragen nicht, $API_KEY mit Ihrem tatsächlichen API-Schlüssel zu ersetzen.

Um Ihren API-Schlüssel zu finden, melden Sie sich bei Runtime Admin an und rufen Sie die Seite Kontoeinstellungen auf.

Wichtig: Behandeln Sie Ihren API-Schlüssel wie ein Passwort, denn damit können Skripte Vorgänge in Ihrem Namen ausführen.

Sie benötigen Zugang zu Ihrem DNS-Anbieter, um CNAME-Datensätze zu erstellen und zu aktualisieren, und gegebenenfalls auch Zugang zu Ihrem CDN-Drittanbieter.

In dieser Anleitung werden Sie gelegentlich auf den Namen Mobify stoßen. Mobify ist der Name des Unternehmens, das ursprünglich die Technologie entwickelt hat, die PWA Kit und Managed Runtime als Grundlage dient. Im Jahr 2020 hat Salesforce Mobify zusammen mit der gesamten Technologie des Unternehmens übernommen.

Der Markenname Mobify wird in der Domain mobify-storefront.com, die als Host Ihrer Storefront dient, sowie in der von der Managed Runtime API genutzten Domain cloud.mobify.com verwendet.

Wenn Sie eine bedingte Logik hinzufügen müssen, die das Verhalten Ihrer Website in Abhängigkeit von der verwendeten Domain ändert, ist es einfacher, diese Logik zu testen, wenn Ihr lokaler Entwicklungsserver eine benutzerdefinierte Domain verwenden kann. Warum sollten Sie diese Art von Logik hinzufügen müssen? Beispielsweise kann es notwendig sein, je nach Domain eine andere SLAS-Client-ID zu ermitteln.

So führen Sie Ihren lokalen Entwicklungsserver mit einer benutzerdefinierten Domain aus:

  1. Ändern Sie den DNS Ihres lokalen Computers so, dass Ihre benutzerdefinierte Domain in 127.0.0.1 (localhost) aufgelöst wird.
  2. Bearbeiten Sie ssr.js.
  3. Legen Sie in den an runtime.createHandler übergebenen options den Port auf 80 fest.
  4. Führen Sie EXTERNAL_DOMAIN_NAME=www.example.com npm start aus, wobei Sie den Wert von example.com durch Ihre benutzerdefinierte Domain ersetzen. Für die Ausführung des Servers auf Port 80 sind in manchen Fällen Administratorrechte erforderlich.

Anfragen Ihres Browsers an die benutzerdefinierte Domain werden nun aufgelöst und an Ihren lokalen Entwicklungsserver weitergeleitet!

Der Startprozess ist identisch für Staging- und Production-Umgebungen; die einzigen Unterschiede sind der Domain-Name und die verwendete Managed Runtime-Umgebung.

Es wird dringend empfohlen, den Startprozess zuerst in einer Staging-Umgebung zu durchlaufen, bevor Sie ihn in einer Production-Umgebung wiederholen.

Gehen wir im Rahmen der bereitgestellten Anweisungen davon aus, dass Sie eine Storefront auf staging.example.com starten, Ihre Projekt-ID in Managed Runtime example lautet und Ihr Bündel in einer Umgebung namens staging bereitgestellt wird.

Sie können diese Schritte jederzeit durchführen, aber wir empfehlen, dass Sie gleich zu Beginn Ihrer Verwendung des PWA Kits damit anfangen.

Erstellen Sie mit der Runtime API Webanwendung oder der Managed Runtime API eine Umgebung (auch als Ziel bezeichnet) namens staging, um den Start der Storefront auszuprobieren.

Im Folgenden finden Sie eine Beispielanfrage, die unter Verwendung des Endpunkts projects_target_create der Managed Runtime API eine Umgebung erstellt. Ersetzen Sie example in der Anfrage durch Ihre tatsächliche Projekt-ID-Zeichenfolge und $API_KEY durch Ihren tatsächlichen API-Schlüssel.

Anweisungen für die Erstellung einer Umgebung mit Runtime Admin finden Sie in unserer Anleitung Managed Runtime Administration.

Die meisten PWA Kit-Implementierungen richten Anfragen an OCAPI und an von B2C Commerce bereitgestellte Controller.

Um diese Anfragen stellen zu können, müssen Sie sicherstellen, dass Managed Runtime die mit Ihrer B2C Commerce-Instanz verknüpfte Domain erreichen kann.

Zur Gewährleistung der Erreichbarkeit der Domain muss eCDN in der Regel so konfiguriert werden, dass Ihre B2C Commerce-Instanz unter einer Subdomain wie ecom.example.com verfügbar ist. Weitere Informationen finden Sie in der Dokumentation zu Setup und Konfiguration von eCDN.

Aktualisieren Sie nach der Konfiguration Ihrer B2C Commerce eCDN-Domain die Proxy-Einstellungen Ihrer Umgebung, damit der neue API-Speicherort verwendet wird. Näheres hierzu finden Sie in unserer Anleitung zu Proxy-Anfragen.

Wenn Sie den Traffic direkt an das CDN von Managed Runtime weiterleiten, erstellt und verwaltet Managed Runtime TLS-Zertifikate für Sie.

Dieser Schritt ist nicht erforderlich, wenn Sie ein CDN oder eCDN eines Drittanbieters verwenden. Ziehen Sie für die Konfiguration von TLS-Zertifikaten die Dokumentation Ihres CDN-Anbieters zurate.

Um Managed Runtime die Ausstellung eines TLS-Zertifikats zu ermöglichen, müssen Sie einen CNAME-Datensatz erstellen. Wenden Sie sich an den Salesforce-Kundenservice und geben Sie die gewünschten Zertifikatsdomains an. Salesforce stellt Ihnen dann die Details zur Validierung der CNAME-Datensätze für Ihr Zertifikat bereit. Platzhalter-Zertifikate wie *.example.com werden unterstützt.

Der Start mit benutzerdefinierten Domains wird für Staging- und Production-Umgebungen unterstützt. Alle anderen Umgebungen wie beispielsweise Entwicklungsumgebungen sind derzeit auf die Verwendung der mobify-storefront.com-Standarddomains beschränkt.

Sie müssen den bereitgestellten Validierungs-DNS-CNAME-Datensatz innerhalb von 24 Stunden nach Erhalt der Details erstellen. Er sieht folgendermaßen aus:

Dieser Schritt ist nicht erforderlich, wenn Sie ein CDN eines Drittanbieters verwenden.

Reduzieren Sie die Zeit bis zur Live-Schaltung (TTL) für staging.example.com auf 1 Minute. Die Reduzierung der TTL beschleunigt den DNS-Wechsel, und falls etwas schief läuft, können Sie den Prozess schnell wieder rückgängig machen.

Mit dem Befehl dig können Sie die TTL verifizieren:

Dieser Schritt ist nicht erforderlich, wenn Sie ein CDN eines Drittanbieters verwenden.

Konfigurieren Sie die Umgebung für den Empfang von Traffic vom Host staging.example.com.

Aktualisieren Sie die Einstellungen ssr_external_domain und ssr_external_hostname der Umgebung mithilfe der Managed Runtime API:

Nach diesem Schritt ist die Umgebung nicht länger unter ihrer Domain mobify-storefront.com zugänglich.

Verifizieren Sie, dass die neuen Einstellungen aktiv sind. Verwenden Sie dazu einen cURL-Befehl, der eine Anfrage mittels DNS-Spoofing durchführt:

Bei Verwendung eines CDNs eines Drittanbieters und des Managed Runtime CDNs ist der Wechselprozess anders.

Bei dieser Option müssen Sie Ihr CDN so konfigurieren, dass es auf den Managed Runtime-Ursprung statt auf den Ursprung des vorhandenen CDNs zeigt. Eine ausführliche Anleitung finden Sie in der Dokumentation Ihres CDN-Anbieters.

Fügen Sie den externen Host-Namen ({{project}}-{{environment}}.mobify-storefront.com) in Ihrem Drittanbieter-CDN als Ursprung hinzu. Stellen Sie sicher, dass das CDN so konfiguriert ist, dass es:

  • den Host-Header entsprechend dem Ursprung {{project}}-{{environment}}.mobify-storefront.com festlegt;
  • die Anfragemethode weiterleitet;
  • den Pfad (einschließlich der Abfrage-String) weiterleitet;
  • die Header weiterleitet;
  • den Textkörper weiterleitet;
  • die HTTP-Caching-Header befolgt.

Sie sollten einen Handler hinzuzufügen, der HTTP-Anfragen verarbeitet, um zu überprüfen, ob das CDN korrekt konfiguriert ist:

Ziehen Sie auch das Hinzufügen eines Proxys mit httpbin.org/anything in Betracht, um zu überprüfen, ob die an Proxys übergebenen Header ordnungsgemäß gesendet werden.

Bei dieser Option müssen Sie einen DNS-Wechsel durchführen, damit Ihre Domain aus alten Ursprung auf das Managed Runtime CDN zeigt.

Der Salesforce Support stellt Ihnen eine stabile Domain gemäß der Konvention {{project}}-{{environment}}-cdn.mobify-storefront.com bereit, wobei {{project}} Ihrer Projekt-ID und {{environment}} Ihrer Umgebungs-ID entspricht.

Ändern Sie den DNS CNAME-Datensatz für staging.example.com zu example-staging-cdn.mobify-storefront.com.

Öffnen Sie Ihren Webbrowser und rufen Sie staging.example.com auf.

Herzlichen Glückwunsch! Sie haben Ihren Start abgeschlossen! 🥳

Nachdem Sie diese Anweisungen für eine Staging-Website ausgeführt haben, können Sie den gleichen Prozess mit der Production-Domain und der Production-Umgebung wiederholen.

Ab diesem Zeitpunkt unterstützt Sie die Customer Success Group beim Monitoring des Website-Traffics, um sicherzustellen, dass der Start erfolgreich war. Ziel ist es, sicherzustellen, dass alles während des Starts wie erwartet über die Bühne geht!

Nach dem Start können Kunden mit einem Signature Success Plan von einem proaktiven Website-Monitoring profitieren. Um die Vorteile dieses erweiterten Monitoring-Dienstes zu nutzen, müssen Sie Ihre Umgebung als production-Umgebung kennzeichnen. Näheres hierzu finden Sie im Abschnitt zu Umgebungen in der Übersicht über Managed Runtime.

  • Die Zieleinstellung ssr_external_hostname steuert, über welchen Host die Umgebung Traffic erhält. Wenn der HTTP-Host-Header einer Anfrage nicht mit diesem Wert übereinstimmt, schlägt die Anfrage mit einem 403-Fehler fehl.
  • Derzeit unterstützt Salesforce keine Storefront-URLs mit einer Stammdomain wie example.com (ohne www-Subdomain). Um eine Stamm-Domain zu verwenden, müssen Sie einen Server so einrichten, dass er Anfragen von der Stamm-Domain an Ihren CNAME umleitet.