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:
- Verwenden Sie ein externes CDN wie CloudFlare oder Akamai.
- 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
undproduction
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.
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 können diese Schritte jederzeit durchführen, aber wir empfehlen, dass Sie gleich zu Beginn Ihrer Verwendung des PWA Kits damit anfangen.
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.
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.
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:
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.
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:
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:
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! 🥳
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
(ohnewww
-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:
- Ändern Sie den DNS Ihres lokalen Computers so, dass Ihre benutzerdefinierte Domain in
127.0.0.1
(localhost) aufgelöst wird. - Bearbeiten Sie
ssr.js
. - Legen Sie in den an
runtime.createHandler
übergebenenoptions
den Port auf80
fest. - Führen Sie
EXTERNAL_DOMAIN_NAME=www.example.com npm start
aus, wobei Sie den Wert vonexample.com
durch Ihre benutzerdefinierte Domain ersetzen. Für die Ausführung des Servers auf Port80
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! 😊