agentic

OpenClaw: Como publicar um site com segurança14 min read

Reading Time: 9 minutesCrie e publique um site com OpenClaw: defina o escopo das permissões do agente, teste os arquivos, implante por meio de um host ou artefato compartilhado e verifique a URL pública.

OpenClaw publishing a website cover

OpenClaw: Como publicar um site com segurança14 min read

Reading Time: 9 minutes

OpenClaw pode ajudar a construir um site, mas não é o host do site. Peça ao agente para criar os arquivos de origem, executar o site localmente e corrigir o que o navegador revela. Em seguida, implante por meio de uma plataforma de hospedagem que você controla ou coloque o projeto em um artefato AgentGrid.io revisável e publique somente após aprovação humana. Uma captura de tela de bate-papo, porta local ou URL de artefato privado não é o URL de inicialização voltado para o cliente.

Este guia é para um construtor que usa um agente OpenClaw com ferramentas de arquivo e comando. Sua decisão mais importante é o limite da permissão: o agente pode elaborar e testar sem possuir credenciais de produção. Se uma equipe precisar inspecionar uma versão compartilhada antes do lançamento, iniciar um espaço de trabalho AgentGrid.io e continuar publicando como uma ação aprovada separada.

Como dar a um site construído com OpenClaw um lar estável

Prepare AgentGrid.io primeiro, depois conceda acesso limitado a OpenClaw e verifique seu resultado fora do chat.

Etapa 1: Escolha o espaço de trabalho AgentGrid.io

Faça login em app.agentgrid.io e selecione a equipe e o espaço de trabalho deste site. Use um espaço de trabalho restrito se o rascunho contiver material do cliente. Planeje quem irá revisá-lo antes da implantação pública.

Espaço de trabalho AgentGrid.io com Convidar um agente em destaque
Em um espaço de trabalho AgentGrid.io, Convidar um agente inicia uma conexão suportada.

Etapa 2: Conecte este agente OpenClaw com uma concessão limitada

Na conversa OpenClaw, diga: Use agentgrid.io for this website. If you can run shell commands, run npx @animaapp/cli@latest login and return the verification URL and code. Do not ask for my password or publish anything. Aprove você mesmo a verificação com o espaço de trabalho pretendido e leia e escreva. Deixe Compartilhar e Publicar desativado, a menos que seja necessário. Peça ao OpenClaw para executar npx @animaapp/cli@latest workspaces e confirme se o espaço de trabalho pretendido está listado. Para um agente autônomo, use Administração de agente → Convidar um agente. Desmarque os recursos padrão de compartilhamento e publicação, escolha o espaço de trabalho e forneça seu link único de forma privada. Criar o convite por si só não o conecta. Se a execução do shell estiver desabilitada, use uma importação manual em vez de alegar que ela tem acesso direto.

Etapa 3: construir e inspecionar o artefato, não apenas o log

Dê ao OpenClaw uma tarefa contida: Crie um microsite de evento responsivo com programação, cartões de palestrantes e um link de inscrição. Use a cópia e os ativos aprovados, verifique a página localmente e coloque o projeto em AgentGrid.io como um aplicativo no espaço de trabalho que selecionamos. Não publique. Faça com que ele use o comando de importação CLI npx @animaapp/cli@latest create -t import --from ./project --artifact-type app --workspace <workspace-id> com sua pasta real e ID do espaço de trabalho descoberto. Abra o URL do artefato retornado e verifique os arquivos e visualize-os. Um site precisa de um ponto de entrada como index.html; evite enviar segredos, node_modulesou criar saída. Se o OpenClaw não conseguiu se conectar, pegue a pasta do projeto gerado ou ZIP e importe-o através do menu Novo do AgentGrid.io. Esse é um novo artefato, não um espelho vivo. Para trabalhos recorrentes, forneça ao agente o URL do artefato existente e peça para ele atualizar esse artefato e, em seguida, verifique o Histórico para confirmar qual identidade o alterou.

Artefato do site de demonstração White Lotus em AgentGrid.io
Exemplo de artefato de site em AgentGrid.io: a demonstração do White Lotus é privada enquanto sua versão é revisada.

Etapa 4: aprovar a publicação e verificar o URL ativo

Revise as reivindicações, os princípios básicos de acessibilidade, o comportamento móvel e os links de destino. Somente então use Publicar em AgentGrid.io ou forneça ao OpenClaw uma instrução de publicação explícita se você concedeu deliberadamente esse recurso. Abra o URL público em um navegador desconectado e confirme se a versão atual está lá. Links privados não funcionam para visitantes anônimos; publicar cada atualização aprovada. Caso o agente automatizado pare de mudar de site, remova seu acesso na administração do Agente; seu trabalho anterior permanece atribuído na História.

Menu Compartilhar AgentGrid.io atualizado mostrando a opção Publicar
O menu Compartilhar atualizado inclui Publicar, que transforma um artefato aprovado em um site ativo.

O que OpenClaw faz e o que não faz

OpenClaw documentação de primeiros passos descreve um agente acessado através de seu Gateway e canais configurados. Suas ferramentas podem funcionar com arquivos e comandos quando habilitadas. Sua ferramenta de navegador ajuda a inspecionar páginas, mas um painel do Gateway ou uma sessão de navegador não é uma implantação de site público. OpenClaw aprovações executivas e as configurações de sandbox são importantes porque um agente com capacidade de comando pode modificar arquivos ou invocar a CLI de implantação de um host. Dê a ele apenas o acesso necessário para o estágio atual.

Etapa 1: crie uma tarefa de site restrita

Confirme se o agente possui um espaço de trabalho de projeto e as ferramentas de arquivo e execução necessárias. Escolha uma pasta ou repositório limpo, não todo o seu diretório inicial. Forneça logotipo, fotos, cópias e fatos comerciais aprovados. Não forneça tokens de implantação ou dados do cliente para a construção inicial da página de destino. Dê um nome à estrutura ou solicite um site estático se nenhuma função do lado do servidor for necessária.

Exemplo de solicitação: “Crie um site responsivo de uma página para uma oficina de conserto de bicicletas local na pasta bike-site. Inclua serviços, horários, área de serviço e uma chamada para ação de solicitação de orçamento. Use HTML semântico e CSS acessível. Marque endereços, preços e depoimentos não verificados como espaços reservados. Mantenha a fonte e os ativos públicos juntos. Diga-me como visualizá-lo e executar verificações disponíveis. Não implante, publique ou use credenciais.”

Peça ao OpenClaw para retornar o ponto de entrada, árvore de diretórios, dependências, comandos de instalação/construção e uma lista de arquivos alterados. Um aplicativo estático pode usar index.html; um aplicativo de estrutura precisa de seu manifesto e scripts. Solicite um README explicando a visualização local e a saída da compilação do host de destino. Confirme se os ativos usam URLs relativos ou públicos, e não um caminho disponível apenas na máquina do agente.

Passo 2: Teste no navegador e corrija defeitos reais

Execute o servidor local documentado do projeto ou o comando de desenvolvimento e, em seguida, abra você mesmo o site renderizado. Verifique larguras estreitas e largas, navegação pelo teclado, contraste, alternativas de imagem, ortografia, links e comportamento do número de telefone. Inspecione erros do console e imagens ausentes. Execute testes e uma compilação de produção quando o projeto os suportar. Uma captura de tela do agente é útil para orientação, mas não substitui a interação com formulários e menus.

Se a solicitação de orçamento for apenas um formulário estilizado, pergunte para onde vão os envios. Conecte um serviço de formulário revisado ou remova a alegação de que funciona. Teste com um envio inofensivo e verifique a entrega. Verifique o horário real da loja, a localização, as licenças para fotos e as palavras de privacidade com o proprietário. Peça ao agente correções específicas e compare a nova visualização com a antiga; evite solicitações de “melhorar” que substituem silenciosamente a cópia aprovada.

Solicitação de correção: “Em uma janela de visualização do tamanho de um telefone, mantenha os cartões de serviço legíveis e torne a navegação acessível pelo teclado. Substitua os detalhes de contato do espaço reservado apenas pelos fatos aprovados em brief.md. Relate cada arquivo alterado, resultado de teste e bloqueador restante. Não mexa na configuração de hospedagem nem publique.” Mantenha a versão aprovada no controle de origem sempre que possível.

Etapa 3: escolha um limite de implantação

  • Anfitrião existente: Confirme a fonte revisada, configure a estrutura e crie a saída em seu host e implemente por meio da integração de repositório ou CLI desse host. Seu serviço fornece a URL pública. Mantenha as chaves de API em segredos gerenciados pelo host, não no navegador JavaScript.
  • Artefato compartilhado AgentGrid.io: Conecte o agente com capacidade de comando somente com sua aprovação ou importe uma pasta/ZIP manualmente. Permita que os colaboradores revisem o artefato do aplicativo privado antes que alguém o publique. O histórico e a visualização do artefato ajudam a tornar a aprovação específica para uma versão.

Não descreva a UI de controle OpenClaw como um host de site. Uma porta encaminhada local pode expor um processo de desenvolvimento para visualização, mas não é um site público durável. Se você conceder ao agente uma CLI de implantação ou acesso de navegador a uma conta de hospedagem conectada, trate isso como acesso de produção e obtenha aprovação explícita para a ação.

Passo 4: Conecte ou importe o projeto revisado

Para a rota compartilhada, a conexão documentada do AgentGrid.io usa sua CLI e um fluxo de aprovação. Em um ambiente OpenClaw com capacidade de comando, o comando inicial é npx @animaapp/cli@login mais recente; aprove você mesmo o link de verificação e selecione o espaço de trabalho e os recursos pretendidos. Não forneça uma senha no chat nem conecte um agente com amplos direitos de publicação apenas para criar um rascunho. Se a conexão não estiver disponível, use o documento importação de pasta ou ZIP.

Prepare um pequeno pacote fonte: exclua node_modules, chaves privadas, arquivos de ambiente local e espaços de trabalho não relacionados. Inclua o ponto de entrada, os ativos e qualquer configuração necessária para construir. Em AgentGrid.io, escolha o espaço de trabalho de destino e crie ou importe um artefato de aplicativo. Inspecione seus arquivos e visualização renderizada. Um upload bem-sucedido não é prova de que uma rota de API, um processo de servidor ou uma integração de formulário foram transferidos corretamente.

Solicitação de transferência: “Depois de autorizar o acesso, crie um artefato de aplicativo não publicado do bike-site no espaço de trabalho AgentGrid.io especificado. Inclua apenas recursos de origem e públicos. Retorne seu URL privado, identifique recursos de tempo de execução ausentes e atualize o mesmo artefato para correções. Não convide outros agentes, publique ou escolha outro espaço de trabalho.” Se o espaço de trabalho não puder ser alcançado, pare em vez de alterar silenciosamente os destinos.

Etapa 5: revise e publique a versão aprovada

Peça a um colega de equipe para testar a visualização do artefato, especialmente o layout móvel, detalhes de contato, formulário de cotação e acesso ao teclado. Reconcilie o feedback no mesmo artefato ou repositório de origem e identifique a revisão aprovada para lançamento. Com um host convencional, implante o commit aprovado e revise seus detalhes de implantação. Com AgentGrid.io, uma pessoa com permissão de publicação usa seu Controle de publicação para criar um URL público. Um convite para um agente e o compartilhamento de um artefato privado não são a etapa de publicação.

Abra o endereço público enquanto estiver desconectado, inclusive em um telefone. Verifique HTTPS, metadados, links, imagens e entrega de formulários. Compare-o com a visualização aprovada. Se for diferente, investigue o commit implantado ou a versão do artefato, as configurações de compilação, os segredos e o cache antes de anunciá-lo. A edição de arquivos locais por si só não atualizará necessariamente um artefato publicado.

Por que separar a permissão de rascunho da publicação?

Ele permite que um agente itere o código enquanto uma pessoa controla o que os visitantes veem. A ferramenta e a configuração de aprovação do OpenClaw não substituem a revisão do conteúdo do site ou das permissões de implantação do host. Limite o escopo do sistema de arquivos do agente, verifique ferramentas de terceiros antes de instalá-las e não execute comandos não revisados ​​de uma página da Web ou projeto importado. Trate a revisão do controle de origem, a aprovação do artefato e a divulgação pública como três portas distintas.

Faça a próxima atualização deliberada

Registre a versão aprovada e o URL público. Novas edições são rascunhos até serem revisadas e publicadas novamente.

Perguntas frequentes

OpenClaw hospeda sites?

OpenClaw é o ambiente de agente e ferramenta, não o destino de hospedagem pública descrito aqui. Use um host da Web ou um artefato de aplicativo publicado separadamente para obter uma URL pública durável. Um painel do Gateway ou visualização local não é esse URL.

Posso publicar sem fornecer credenciais de produção ao agente?

Sim. Deixe-o rascunhar e testar em um espaço de trabalho restrito e, em seguida, peça a uma pessoa que use o fluxo de trabalho de implantação do provedor de hospedagem ou o controle de publicação do AgentGrid.io. Mesmo um agente que ajuda a preparar a implantação não deve receber segredos desnecessários.

E se o artefato importado parecer correto, mas sua forma falhar?

Verifique se o site original usou rotas de servidor, variáveis de ambiente ou um serviço de terceiros que não foi transferido. Teste um envio real no novo ambiente antes do lançamento. Não trate uma visualização visual como uma verificação funcional.

As alterações na minha pasta OpenClaw atualizarão o site ativo?

Não automaticamente no caso geral. A atualização depende do pipeline de construção e implantação do host ou de uma atualização explícita e republicação de um artefato separado. Registre qual versão de origem cada URL ativo representa.

Para uma comparação da transferência, consulte nosso guia para Passo a passo de publicação do site Muse. O Claude Guia de publicação de design cobre outro ponto de partida, enquanto o como os agentes exploram e publicam aplicativos com Anima mostra um artefato revisado sendo encaminhado para publicação. Esses são fluxos de trabalho diferentes, e não recursos de produtos intercambiáveis.

|

Co-founder & CEO