Skip to content

Latest commit

 

History

History
127 lines (97 loc) · 6.92 KB

SETUP.pt-BR.md

File metadata and controls

127 lines (97 loc) · 6.92 KB

Store

Cloud Commerce: template para nova loja

🇺🇸 English version

Começando

  1. Comece criando um novo projeto no Firebase console:

    • Insira um bom nome (ID) para o projeto e lembre-se dele;
    • Desative (recomendado) Google Analytics for Firebase, não será utilizado por padrão;

  2. Com o projeto criado, vá para Criação > Firestore Database (menu lateral) e clique em Criar banco de dados:

    • Pule com o modo e as regras de produção padrão;
    • Selecione a região us-east4 (recomendado);

  3. Vá para Criação > Storage e clique Vamos começar:

    • Pule com o modo de produção padrão e a mesma região (pré-selecinada);

  4. Vá para Criação > Authentication e clique em Vamos começar:

    • Clique em Provedores nativos > E-mail/senha e ative Link do e-mail (login sem senha);
    • Vá para as configurações do Authentication e adicione o domínio(s) da sua loja na lista de autorizados;
    • Opcionalmente, adicione outros fornecedores por Smartphone (SMS, gera custos adicionais) e/ou redes sociais;

  5. Vá para ⚙️ > Configurações do projeto e edite:

    • Local padrão dos recursos do GCP: mesma região do Firestore (us-east4);
    • Configurações públicas > Nome exibido ao público: O nome da sua loja;
    • Configurações públicas > E-mail para suporte (opcional);
    • Em Seus aplicativos crie um app Web:
      • Insira novamente o nome da loja e ativa Firebase Hosting para o novo app;
      • Copie apenas o valor do objeto firebaseConfig e substitua em functions/ssr/src/scripts/InlineScripts.astro;
      • Apenas clique em prosseguir nos próximos passos até confirmar e voltar para o console;

  6. O plano gratuito do Firebase não é compatível com o envio de solicitações HTTP externas, portanto você precisará fazer upgrade para o plano Blaze (sob demanda) no canto inferior esquerdo do console do Firebase;

  7. Use esse template para gerar um novo repositório para sua loja;

Primeiro deploy em CLI

  1. Setup e primeiro deploy pelo terminal com Firebase CLI:
# Install `firebase-tools` and login
npm install -g firebase-tools && firebase login
# Clone your new store repository
git clone [email protected]:{gh-user}/{new-store}.git
cd {new-store}
npm i
Com gcloud CLI (opcional) instalado 
# Run project configuration and deploy on GitHub Actions
FIREBASE_PROJECT_ID={project-id} npm run setup

A chave de conta é criada automaticamente apenas com as permissões necessárias usando gcloud CLI (pule as etapas 8 e 9).

Sem gcloud CLI 
# Run project configuration and first deploy
FIREBASE_PROJECT_ID={project-id} npm run setup -- --no-gcloud
npm run deploy

  1. Crie uma conta de serviço para seu projeto do Firebase diretamente no Google Cloud Platform:

    • Nomeie Cloud Commerce GH Actions (YOUR REPOSITORY);
    • Descreva como A service account with permission to deploy Cloud Commerce from the GitHub repository to Firebase;
    • Continue e selecione as seguintes permissões:
      1. Administrador do Firebase
      2. Leitor de chaves de API
      3. Leitor do Cloud Run
      4. Administrador do Cloud Functions
      5. Administrador do Artifact Registry
      6. Criador do App Engine
      7. Administrador do App Engine
      8. Administrador do Cloud Scheduler
      9. Usuário da conta de serviço

  2. De volta na lista de contas de serviço, clique nos 3 pontos (ações) and selecione Gerenciar chaves, crie e faça o download de uma nova chave JSON para a conta recém criada;

  1. Configure os seguintes secrets no seu repositório do GitHub (Settings > Secrets > Actions):
    • FIREBASE_SERVICE_ACCOUNT: Cole o JSON da chave do Google Cloud gerada
    • ECOM_AUTHENTICATION_ID: Pegue no output do setup no CLI
    • ECOM_API_KEY: Pegue no output do setup no CLI

🏁 🏁 🏁 Tudo pronto, boa!

Práticas recomendadas de produção

O CDN do Firebase Hosting é rápido, mas não suporta Stale-While-Revalidate (contexto e feature request) e Hosting proxy + Cloud Functions (mesmo sem cold starts) nunca leva menos que 1s (TTFB provavelmente vai bater ~2s). Nós gostamos de respostas "instantâneas" mas queremos manter views dinâmicas renderizadas em servidor (por menos client-side JS), então stale caching é necessário e portanto precisamos de outra camada de CDN em produção (quando o domínio próprio for apontado).

  • Forma recomemdada usando bunny.net CDN com Perma Cache e Edge Rules para ISR:

    • Obtenha sua chave de API em account details no painel do bunny.net;
    • Salve em um secret chamado BUNNYNET_API_KEY no seu repositório do GitHub;
    • Edite .github/build-and-deploy (some 1) e confirme com a mensagem [run:bunny-setup].

  • OU usando bunny.net CDN com Stale Cache para SWR:

    • Pull zone com seu domínio https://project.web.app do Firebase Hosting como URL de origem;
    • SSL + Force SSL habilitados (previne redirecionar http://* para o domínio de origem);
    • Smart Cache desabilitado (cache para tudo respeitando os cabeçalhos da resposta);
    • Caching Query String Sort habilitado (ótimo para transformações de imagens);
    • Caching Strip Response Cookies habilitado;
    • Stale Cache while origin offline e while updating habilitados;
    • Outras configurações de origem e cache podem ser mantidas desabilitadas;
    • Você pode querer desabilitar algumas zonas na configuração de routing dependendo do target da loja.

  • OU usando Cloudflare Worker para ISR/SWR:

Note

Você pode querer remover ou editar a licença padrão (arquivo LICENSE) antes de publicar o conteúdo da sua loja.