ServBay

Português

English
简体中文
繁體中文
Español
العربية
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Português

English
简体中文
繁體中文
Español
العربية
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Adicionando um Site de Arquivos Estáticos ​

O ServBay é uma poderosa ferramenta de ambiente de desenvolvimento web local, compatível com várias linguagens e bancos de dados. Além de sites dinâmicos, o ServBay é ideal para hospedar e testar sites de arquivos estáticos, como páginas simples ou aplicações front-end construídas com HTML, CSS e JavaScript.

Neste artigo, você aprenderá como adicionar e configurar um site de arquivos estáticos no ServBay.

Visão Geral ​

Um site de arquivos estáticos é composto por arquivos servidos diretamente pelo servidor web, sem execução de scripts do lado do servidor (como PHP, Node.js, Python, etc.). Esses sites geralmente incluem páginas HTML, folhas de estilo CSS, arquivos JavaScript, imagens, fontes e outros recursos.

Usar o ServBay para hospedar um site estático localmente facilita o desenvolvimento, depuração e testes — especialmente ao simular acesso via domínio, conexões HTTPS ou testar recursos como CORS (Compartilhamento de Recursos de Origem Cruzada).

Casos de Uso ​

  • Desenvolvimento e teste de projetos puramente front-end (HTML/CSS/JS)
  • Hospedagem de sites de documentação estática ou blogs
  • Teste do comportamento de diferentes servidores web (Caddy/Nginx) ao servir arquivos estáticos
  • Simulação local de domínios e acesso HTTPS, como em ambientes de produção
  • Teste de builds de frameworks front-end como React, Vue ou Angular

Pré-requisitos ​

  • ServBay devidamente instalado e funcionando no macOS
  • Seus arquivos do site estático prontos para o deploy

Passo a Passo ​

Siga os passos abaixo para adicionar seu site de arquivos estáticos ao ServBay:

Passo 1: Prepare os Arquivos do Seu Site ​

Primeiro, certifique-se de que todos os arquivos do seu site estático (ex: index.html, style.css, script.js, etc.) estejam em uma pasta dedicada.

É recomendável criar o diretório do site dentro do diretório padrão do ServBay: /Applications/ServBay/www. Isso facilita a organização dos seus arquivos. Por exemplo, para criar um site chamado meu-site-estatico, crie uma pasta com esse nome dentro de /Applications/ServBay/www/ e coloque todos os arquivos do site lá.

bash
# Criando diretório de exemplo via terminal
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Criando um arquivo index.html simples
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Site Estático ServBay</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>Parabéns! A configuração do site estático ServBay foi um sucesso!</h1>
    <p>Você está acessando esta página estática localmente via ServBay.</p>
</body>
</html>' > index.html

# Sua estrutura de arquivos deve ser parecida com:
# /Applications/ServBay/www/servbay-static-demo/index.html

Passo 2: Adicionando o Site no ServBay ​

  1. Abra o aplicativo ServBay.
  2. Na barra lateral à esquerda, clique em Sites (nota: em versões antigas pode aparecer como "Hosts"; nas versões mais recentes o nome é "Sites").
  3. Na parte inferior da lista de sites, clique no botão Adicionar. Uma janela de configuração será exibida.

Passo 3: Configurando o Site ​

Na janela de configuração que for aberta, preencha e selecione:

  • Domínio (Domain): Digite o domínio local que usará para acessar o site. Recomenda-se o sufixo .servbay.demo, ex.: static.servbay.demo ou meu-site-estatico.servbay.demo. O ServBay configura automaticamente a resolução local para domínios terminados com .servbay.demo, sem necessidade de edição manual do arquivo hosts.
    • Explicação: Usar domínio .servbay.demo evita conflitos com domínios reais e garante, via DNS interno do ServBay, que o domínio aponte corretamente para o seu computador.
  • Caminho (Path): Clique no ícone da pasta à direita e selecione o diretório criado no Passo 1, por exemplo /Applications/ServBay/www/servbay-static-demo/.
    • Explicação: Caminho indica ao servidor (Caddy ou Nginx) qual é o diretório raiz (Document Root) do site. Quando acessar http://static.servbay.demo/, o servidor procurará arquivos como index.html nessa pasta. Certifique-se de selecionar a pasta do site, não um arquivo (como index.html) individualmente.
  • Porta (Port): Normalmente mantenha o valor padrão. HTTP usa a porta 80 e HTTPS usa 443. Se precisar usar outra porta, ajuste aqui.
  • Servidor Web (Web Server): Escolha o servidor web desejado. Para sites estáticos, Caddy e Nginx são excelentes opções.
    • Caddy: Simples de configurar, suporta HTTP/2 e configura HTTPS automaticamente (usando User CA do ServBay). É o padrão recomendado pelo ServBay.
    • Nginx: Alto desempenho, configuração flexível, muito utilizado em produção.
    • Escolha um deles apenas.
  • Versão do PHP: Para sites estáticos, não é necessário PHP. Selecione None.
  • Versão do Node.js: Para sites estáticos, não precisa Node.js. Selecione None.
  • Versão do Python: Para sites estáticos, não precisa Python. Selecione None.
  • Versão do Go: Para sites estáticos, não precisa Go. Selecione None.
  • Versão do Java: Para sites estáticos, não precisa Java. Selecione None.
  • SSL: Para acessar o site localmente via HTTPS, marque esta opção. O ServBay irá configurar automaticamente um certificado SSL confiável localmente usando sua User CA, tornando fácil testar funcionalidades HTTPS.
  • CORS: Se seu site precisa compartilhar recursos entre domínios (CORS) – tal como carregar fontes ou consumir APIs de outros domínios locais –, marque e configure conforme necessário. O ServBay permite configurar cabeçalhos CORS de forma personalizada.

Passo 4: Salvar e Aplicar as Alterações ​

  1. Depois de preencher todas as informações, clique no botão Salvar no fim da janela.
  2. Volte à tela de lista de sites. Você verá o novo site listado.
  3. Clique no botão Aplicar Alterações no topo da lista de sites.
    • Explicação: Ao clicar em Aplicar Alterações, o ServBay recarrega os arquivos de configuração do servidor web (Caddy ou Nginx) e ativa o novo site. Este passo é FUNDAMENTAL — caso contrário, o site recém-adicionado não ficará acessível.

Verificando a Configuração ​

Após configurar e aplicar as alterações, abra o navegador e digite o domínio configurado (ex: http://static.servbay.demo ou https://static.servbay.demo se ativou SSL).

Se tudo estiver corretamente configurado, você verá o conteúdo do seu site estático, como a página index.html criada no exemplo.

Observações Importantes ​

  • Verifique se o Caminho está correto e aponta para o diretório raiz do site
  • Sempre clique em Aplicar Alterações após adicionar, modificar ou remover um site, para que as alterações tenham efeito
  • Para sites estáticos, configurar as linguagens do servidor (PHP, Node.js etc.) como None é a melhor prática — evita consumo de recursos desnecessário e possíveis riscos de segurança
  • Se não conseguir acessar o site, verifique se o ServBay está em execução, o servidor (Caddy/Nginx) está ativo e se o domínio usado no navegador está exatamente igual ao configurado

Perguntas Frequentes (FAQ) ​

P: Ao tentar acessar o domínio configurado aparece “Não foi possível acessar o site” ou “Servidor não encontrado”. O que fazer?

R:

  1. Certifique-se de que o aplicativo ServBay está em execução
  2. Confirme que você clicou em Aplicar Alterações no ServBay
  3. Verifique se o domínio digitado no navegador corresponde exatamente ao configurado, incluindo o uso correto de http:// ou https://
  4. Assegure que o Caminho está correto e aponta para o diretório do site
  5. Consulte os logs do ServBay para obter detalhes do erro

P: Por que aparece a listagem de arquivos do diretório em vez da minha página index.html?

R: Isso normalmente indica que não foi localizado um arquivo de homepage padrão (como index.html) na raiz do site. Certifique-se de que o diretório do site contenha um arquivo chamado exatamente index.html (atenção à grafia e à extensão).

P: Posso ativar HTTPS para sites estáticos?

R: Sim, basta marcar a opção SSL ao configurar o site. O ServBay irá gerar e instalar automaticamente um certificado SSL confiável para domínios locais porque usa sua User CA interna, possibilitando testes em HTTPS no ambiente local.

Conclusão ​

Com ServBay, você gerencia facilmente sites de arquivos estáticos no seu ambiente local — de páginas HTML simples a builds de aplicações front-end complexas. Aproveite os recursos de gerenciamento de sites, resolução de domínios e suporte SSL locais do ServBay para acelerar o desenvolvimento e testes front-end.