Lançar sua loja virtual

Este guia descreve como lançar uma nova loja (virtual) do PWA Kit e torná-la acessível do endereço web oficial público. Você tem duas opções para lançar sua loja virtual do PWA Kit e rotear tráfego para ela:

  1. Use uma CDN de terceiros, como CloudFlare ou Akamai.
  2. Use a CDN fornecida pelo Managed Runtime.

Usamos ao longo deste guia uma loja (virtual) de exemplo com os seguintes atributos:

  • URL de Production: https://www.example.com
  • ID do projeto: example
  • Ambientes: staging e production

A palavra “Mobify” aparece algumas vezes neste guia. Mobify é o nome da empresa que desenvolveu originalmente a tecnologia que se tornou PWA Kit e Managed Runtime. A Salesforce adquiriu a Mobify e todas as suas tecnologias em 2020.

O processo de atualização da marca de Mobify para Salesforce ainda está em andamento. A marca Mobify ainda aparece no domínio mobify-storefront.com usado para hospedar sua loja (virtual) e no domínio cloud.mobify.com, usado para o Managed Runtime API. Embora novos domínios da Salesforce substituirão esses domínios da Mobify, os domínios da Mobify ainda contarão com suporte.

O Managed Runtime é compatível com o uso de uma CDN de terceiros em uma loja virtual do PWA Kit. Comece com a implantação de seu ambiente com as configurações-padrão. Em seguida, adicione sua loja virtual, {{project}}-{{environment}}.mobify-storefront.com, como a origem de sua CDN de terceiros. Verifique se a CDN está configurada para encaminhar o método de solicitação, o caminho (inclusive a string de consulta), os cabeçalhos e o corpo. Além disso, confira se ela está configurada para obedecer aos cabeçalhos de cache HTTP.

Considere incluir um manipulador que reflita as solicitações HTTP para verificar se a CDN está configurada corretamente:

Avalie também a possibilidade de incluir um proxy com httpbin.org/anything para verificar se a transmissão dos cabeçalhos aos proxies foi feita sem erros.

Abordamos o lançamento em três etapas: preparação, lançamento de um ambiente de Staging e lançamento do ambiente de Production.

Antes de começar

Este guia assume que você tem acesso ao aplicativo da web Runtime Admin e ao Managed Runtime API para executar tarefas administrativas. Para ter acesso a essas ferramentas, entre em contato com o administrador do Commerce Cloud e solicite que adicione uma das funções a seguir a sua conta usando o Account Manager: Managed Runtime User ou Managed Runtime Admin.

Para fazer solicitações ao Managed Runtime API, você deve incluir uma chave de API no cabeçalho de solicitação de HTTP Authorization com o valor Bearer {{api_key}}. Para todas as solicitações de amostra fornecidas, não se esqueça de substituir {{api_key}} por sua chave de API real.

Para encontrar a chave de API, faça logon em Runtime Admin e vá para a página Account Settings (Configurações de conta).

Importante: Trate sua chave de API como trataria a uma senha, pois ela permite executar operações em seu nome.

Etapa 1: Preparação

Você pode completar essas etapas em qualquer momento, mas recomendamos que você as realize assim que começar a usar o PWA Kit.

1. Criar um ambiente de Staging

Use a Managed Runtime API ou o aplicativo da web Runtime Admin para criar um ambiente (também conhecido como “destino” denominado staging para praticar o lançamento da sua loja (virtual).

Veja a seguir uma solicitação de amostra que usa o endpoint target da API do Managed Runtime para criar um ambiente. Substitua example na solicitação pela string real do ID do projeto e {{api_key}} por sua chave de API real.

Para instruções sobre como criar um ambiente com Runtime Admin, consulte nosso guia Administração do Managed Runtime.

2. Tornar suas APIs disponíveis de maneira pública

O código da sua loja (virtual) deve poder acessar sua instância do B2C Commerce, e para isso suas APIs devem estar publicamente disponíveis.

Imagine que www.example.com resolve para uma instância do B2C Commerce. Depois do lançamento, www.example.com resolverá para o domínio mobify-storefront.com. O código da sua loja (virtual) precisa ser capaz de lidar com as APIs associadas a sua instância do B2C Commerce. Você pode tornar suas APIs disponíveis em api.example.com e atualizar as configurações de proxy do seu ambiente para vê-las. Para obter mais informações, consulte, consulte nosso guia Solicitações de proxy.

3. Permitir que a Salesforce emita certificados TLS

Para permitir que a Salesforce emita um certificado TLS para seu domínio, você deve criar um registro CNAME. Entre em contato com o suporte ao cliente da Salesforce e solicite as informações necessárias para criar um registro CNAME para sua loja (virtual).

Crie o registro CNAME em até 24 horas após o recebimento das informações. Um registro CNAME tem essa aparência:

Etapa 2: Lançar um ambiente de staging

Sempre teste o processo de lançamento no ambiente de staging primeiro.

Suponha que você esteja lançando uma loja virtual em staging.example.com, o ID do seu projeto no Managed Runtime seja example e seu pacote seja implantado em um ambiente chamado staging.

1. Reduzir o tempo de vida do DNS CNAME

Reduza o tempo de vida do staging.example.com para um minuto. Reduzir o TTL acelera o processo de transição de DNS e, se algo sai errado, permite que você reverta a ação rapidamente.

Você pode verificar o TTL usando o comando dig:

2. Configurar seu ambiente

Configure o ambiente para receber tráfego do host de staging.example.com.

Atualize as configurações ssr_external_domain e ssr_external_hostname usando o Managed Runtime API:

Importante: Depois desta etapa, o ambiente já não estará acessível como o domínio de mobify-storefront.com.

Verifique se as novas configuração estão aplicadas usando um comando cURL que faz uma solicitação com spoofing de DNS:

3. Realizar a transição de DNS

O suporte da Salesforce fornece a você um domínio estável que segue a convenção {{project}}-{{environment}}-cdn.mobify-storefront.com, na qual {{project}} é o ID do projeto e {{environment}} é o ID do ambiente.

Atualize o registro DNS CNAME de staging.example.com para example-staging-cdn.mobify-storefront.com. Abra o navegador da web e vá para staging.example.com.

Parabéns, você concluiu o lançamento de teste! 🥳

Etapa 3: Lançar o ambiente de Production

Quando você estiver pronto para o lançamento, complete as mesmas etapas realizadas no lançamento de teste, mas com seu ambiente e domínio de production.

A partir daqui, o grupo de Sucesso do Cliente vai ajudar você a monitorar o tráfego do site para garantir que o lançamento aconteceu. O objetivo é garantir que tudo esteja acontecendo de acordo com o esperado durante o lançamento.

Depois do lançamento, o site dos clientes com Signature Success Plan são monitorados de maneira proativa. Para aproveitar esse serviço de monitoramento avançado, é preciso que seu ambiente esteja marcado como de produção. Para saber mais, consulte a seção sobreambientes na Visão geral do Managed Runtime.

  • A configuração ssr_external_domain de destino controla de qual host o destino recebe tráfego. Se o cabeçalho HTTP Host da solicitação não for igual a esse valor, a solicitação falhará.
  • Atualmente, a Salesforce não oferece suporte a URLs de lojas (virtuais) com um domínio simples como example.com (sem subdomínio www). Para usar um domínio simples, você deve configurar um servidor para redirecionar solicitações do domínio simples para seu CNAME.

Caso você precise incluir lógica condicional que altere o comportamento do site dependendo do domínio, fica mais fácil realizar testes se o servidor de desenvolvimento local puder usar um domínio personalizado. Você pode estar se preguntando por que seria preciso incluir esse tipo de lógica. Por exemplo, considere a necessidade de procurar diferentes IDs de cliente do SLAS dependendo do domínio.

Para executar seu servidor de desenvolvimento local usando um domínio personalizado, faça o seguinte:

  1. Modifique o DNS de seu computador local para resolver o domínio personalizado para 127.0.0.1 (localhost).
  2. Edite ssr.js.
  3. Nas options transmitidas para runtime.createHandler, defina a porta como 80.
  4. Execute EXTERNAL_DOMAIN_NAME=www.example.com npm start, substituindo o valor example.com por seu domínio personalizado. A execução do servidor na porta 80 talvez precise de privilégios administrativos.

As solicitações de seu navegador ao domínio personalizado serão agora resolvidas e encaminhadas para seu servidor de desenvolvimento local!

Que comece a depuração! 😊