Start Ihrer Storefront

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

  1. Verwenden Sie ein externes CDN wie CloudFlare oder Akamai.
  2. Verwenden Sie das von Managed Runtime bereitgestellte CDN.

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

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

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 Markenwechsel von Mobify zu Salesforce ist noch nicht vollständig abgeschlossen. Der Markenname Mobify wird noch in der Domain mobify-storefront.com verwendet, die als Host Ihrer Storefront dient. Er wird ebenfalls in der Domain cloud.mobify.com verwendet, die von der Managed Runtime API genutzt wird. Obwohl die neuen Salesforce-Domains diese Mobify-Domains letztendlich ersetzen werden, werden die Mobify-Domains weiterhin unterstützt.

Managed Runtime unterstützt die Verwendung eines externen CDN vor einer PWA Kit-Storefront. Stellen Sie zunächst Ihre Umgebung mit den Standardeinstellungen bereit. Fügen Sie dann Ihre Storefront {{project}}-{{environment}}.mobify-storefront.com als Ursprung in Ihrem externen CDN hinzu. Vergewissern Sie sich, dass das CDN so konfiguriert ist, dass die folgenden Informationen weitergeleitet werden: Anfragemethode, Pfad (einschließlich Abfragezeichenfolge), Header und Textkörper. Stellen Sie außerdem sicher, dass das CDN so eingestellt ist, dass es HTTP-Caching-Header berücksichtigt.

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.

Wir erklären die drei Phasen von der Vorbereitung über den Start einer Staging-Umgebung bis hin zum Echtbetrieb Ihrer Storefront.

Vorbemerkungen

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.

Phase 1: Vorbereitung

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

1. Erstellen einer Staging-Umgebung

Verwenden Sie die Managed Runtime API oder die Runtime Admin-Webanwendung, um eine Umgebung (auch als Ziel bezeichnet) namens staging zu erstellen, um den Start der Storefront zu üben.

Im Folgenden finden Sie eine Beispielanfrage, die unter Verwendung des Endpunkts target 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.

2. Öffentliche Bereitstellung Ihrer APIs

Ihr Storefront-Code muss in der Lage sein, auf Ihre B2C Commerce Instanz zuzugreifen; deshalb müssen Ihre APIs öffentlich zugänglich sein.

Stellen Sie sich zur Verdeutlichung vor, dass www.example.com derzeit in eine B2C Commerce Instanz aufgelöst wird. Nach dem Start wird www.example.com in die Domain mobify-storefront.com aufgelöst. Ihr Storefront-Code muss die Möglichkeit haben, auf die mit Ihrer B2C Commerce Instanz assoziierten APIs zuzugreifen. Sie können Ihre APIs auf api.example.com zugänglich machen und die Proxy-Einstellungen Ihrer Umgebung so ändern, dass sie diese Domain verwenden. Näheres hierzu finden Sie in unserer Anleitung zu Proxy-Anfragen.

3. Ausstellung von TLS-Zertifikaten von Salesforce

Um Salesforce die Ausstellung eines TLS-Zertifikats für Ihre Domain zu gestatten, müssen Sie einen CNAME-Datensatz erstellen. Bitten Sie den Salesforce Kundenservice, Ihnen die für die Erstellung eines CNAME-Datensatzes für Ihre Storefront erforderlichen Details bereitzustellen.

Erstellen Sie den CNAME-Datensatz innerhalb von 24 Stunden nach Erhalt dieser Details. Ein CNAME-Datensatz sieht wie folgt aus:

Phase 2: Starten einer Staging-Umgebung

Testen Sie den Startprozess immer zuerst in einer Staging-Umgebung.

Stellen Sie sich zur Verdeutlichung vor, 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.

1. Reduzierung der Zeit bis Live-Schaltung für die DNS CNAME

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:

2. Konfiguration Ihrer Umgebung

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:

Wichtig: 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:

3. Durchführung des DNS-Wechsels

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 ersten Test-Start abgeschlossen! 🥳

Phase 3: Start der Production-Umgebung

Wenn Sie für den Start bereit sind, führen Sie die gleichen Schritte wie beim Test-Start durch, in diesem Fall jedoch mit Ihrer production-Umgebung und -Domain.

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 Überwachungsdienstes zu nutzen, müssen Sie Ihre Umgebung als Produktionsumgebung kennzeichnen. Näheres hierzu finden Sie im Abschnitt zu Umgebungen in der Übersicht über Managed Runtime.

  • Die Zieleinstellung ssr_external_domain steuert, über welchen Host das Ziel Traffic erhält. Wenn der HTTP-Host-Header einer Anfrage nicht mit diesem Wert übereinstimmt, schlägt die Anfrage 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.

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 möglicherweise Administratorrechte erforderlich.

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

Viel Spaß beim Debugging! 😊