Object Storage Service:Static Website Hosting

Etapa 1: Configure a hospedagem de site estático

Defina uma página inicial padrão e uma página de erro para estabelecer as regras básicas de acesso.

1. Acesse a página Buckets, clique em no nome do bucket desejado e, no painel de navegação à esquerda, clique em Data Management > Static Page.

2. Clique em Settings e configure os seguintes parâmetros:

   • Default Homepage: Defina como index.html.

   • Subfolder Homepage: Escolha se deseja ativar uma página inicial separada para subpastas com base na estrutura do seu site.

     • Disabled (Default): Adequado para sites simples que não exigem páginas iniciais distintas para subpastas. Com essa opção, qualquer caminho de URL terminado em barra (/) retorna a página inicial padrão do diretório raiz.

     • Enabled: Recomendado para sites complexos com várias seções de conteúdo independentes, como /blog/ ou /docs/, em que cada seção possui sua própria página inicial. Quando ativado, configure também a Subfolder 404 Rule para definir a resposta do sistema quando um usuário solicita um arquivo inexistente:

       • Redirect (Default): Redireciona para a URL do diretório. Se o arquivo solicitado não existir, o sistema verifica se há uma página inicial no diretório correspondente. Caso exista, o sistema retorna uma resposta de redirecionamento 302 e a barra de endereços do navegador passa a exibir o caminho do diretório. Por exemplo, .../subdir muda para .../subdir/.

       • Index: Retorna o conteúdo da página inicial diretamente. Semelhante ao Redirect, mas se uma página inicial for encontrada, o sistema retorna seu conteúdo com um código de status 200. A barra de endereços do navegador permanece inalterada.

       • NoSuchKey: Retorna um erro 404 diretamente. Esta é a regra mais restritiva. Se o arquivo solicitado não existir, o sistema retorna um erro 404, independentemente da existência de uma página inicial no diretório correspondente.

         Regra 404 de subpasta

         Quando o recurso de página inicial de subpasta está ativado, esta regra define a resposta do sistema a solicitações de objetos inexistentes, garantindo o tratamento correto das rotas do site.

         Mecanismo central: Solicitações de objeto versus diretório

         O comportamento da regra depende da estrutura da URL, especificamente se ela termina com uma barra (/):

         • Solicitação de objeto: A URL não termina com /, como em .../subdir. O sistema interpreta isso como uma solicitação para um objeto chamado subdir.

         • Solicitação de diretório: A URL termina com /, como em .../subdir/. O sistema interpreta isso como uma solicitação para a página inicial padrão no diretório subdir.

         A regra 404 de subpasta é acionada apenas quando uma solicitação de objeto falha (ou seja, o objeto não existe).

         Comportamento da regra

         A tabela a seguir explica o comportamento de cada regra quando se solicita um objeto inexistente, como http://example.com/subdir.

         Regra	Comportamento principal	Fluxo de processamento	Resultado final (depende da existência de subdir/index.html)
         Redirect (Default)	Redireciona para a URL do diretório: O sistema verifica se há uma página inicial no diretório correspondente. Se encontrada, retorna uma resposta de redirecionamento 302.	O objeto subdir não é encontrado, o que aciona a regra. O sistema verifica se subdir/index.html existe. Se existir, o sistema retorna uma resposta 302 Found com o cabeçalho Location apontando para .../subdir/. Caso contrário, retorna uma resposta 404 Not Found.	Se existir: O conteúdo da página inicial é exibido e a barra de endereços do navegador passa a exibir .../subdir/. Se não existir: A página de erro 404 é exibida.
         Index	Retorna o conteúdo da página inicial diretamente: O sistema verifica se há uma página inicial no diretório correspondente. Se encontrada, retorna o conteúdo com um código de status 200.	O objeto subdir não é encontrado, o que aciona a regra. O sistema verifica se subdir/index.html existe. Se existir, o sistema retorna o conteúdo do arquivo e um status 200 OK. Caso contrário, retorna uma resposta 404 Not Found.	Se existir: O conteúdo da página inicial é exibido e a barra de endereços do navegador permanece .../subdir. Se não existir: A página de erro 404 é exibida.
         NoSuchKey	Retorna um erro 404 diretamente: O sistema não realiza nenhuma verificação adicional de diretório ou página inicial.	O objeto subdir não é encontrado, o que aciona a regra. O sistema retorna imediatamente uma resposta 404 Not Found.	Independentemente da existência: Sempre retorna uma página de erro 404.

   • Default 404 Page: Defina como error.html.

   • Error Page Status Code: Selecione 404.

   • Clique em Save.

   Etapa 2: Fazer upload dos arquivos do site

   Faça upload dos arquivos HTML preparados para o bucket a fim de fornecer conteúdo ao site.

   1. Baixe e extraia o arquivo de exemplo html.zip ou use seus próprios arquivos de projeto.

   2. No painel de navegação à esquerda, clique em Object Management > Objects.

   3. Arraste os arquivos de exemplo ou os arquivos existentes do seu projeto para a janela de upload. Após adicionar os arquivos à lista, clique em Upload Object.

      Nota

      Ao atualizar o conteúdo do site, fazer upload de um objeto com o mesmo nome substitui diretamente o objeto existente. Não é necessário excluir o objeto antigo primeiro. A substituição troca todo o objeto, e o conteúdo anterior deixa de ser retido. Se o versionamento estiver ativado para o bucket, a substituição mantém a versão anterior, que pode ser usada para reversão. Se o versionamento não estiver ativado, a substituição não poderá ser desfeita.

   Etapa 3: Definir permissões do bucket

   Configure permissões de leitura pública para tornar o conteúdo do site acessível aos usuários da internet.

   Importante

   A permissão de leitura pública torna todos os objetos no bucket acessíveis publicamente. Qualquer pessoa que conheça a URL de um objeto pode baixá-lo. Portanto, utilize este bucket apenas para recursos públicos, como HTML, CSS e JavaScript. Armazene dados confidenciais em um bucket separado com controles de acesso mais rigorosos.

   1. O recurso Block Public Access é ativado por padrão ao criar um bucket OSS. Esse recurso impede a definição da lista de controle de acesso (ACL) do bucket como public-read ou public-read-write. Desative esse recurso primeiro.

      1. No painel de navegação à esquerda, clique em Permission Control > Block Public Access.

      2. Clique em no botão alternar Block Public Access. Na caixa de diálogo exibida, insira I confirm that I want to disable Block Public Access e clique em OK.

   2. Defina as permissões de acesso do bucket como public-read.

      1. Acesse a aba Access Control List e clique em Set.

      2. Defina Bucket ACL como Public Read. Na caixa de diálogo exibida, clique em Continue.

      3. Clique em Save.

   Etapa 4: Verifique a configuração do site

   Teste o site para confirmar se o recurso de hospedagem de site estático funciona corretamente.

   • Verifique o acesso à página inicial: Em um navegador, acesse seu nome de domínio personalizado, por exemplo, http://example.com, para visualizar o resultado.

     Se a página exibir a página inicial padrão para hospedagem de sites estáticos do OSS, intitulada Welcome to OSS com o subtítulo This is a static homepage, e tiver três botões (Product Details, Product Console e Product Documentation) na parte inferior, sua configuração de hospedagem de site estático estará funcionando.

   • Verifique a página 404: Em um navegador, tente acessar um arquivo inexistente, por exemplo, http://example.com/missing-object.

     Se a página exibir o título Welcome to OSS e a mensagem This is a 404 page, sua página de erro 404 estará configurada corretamente.

   Aplicativo de página única (SPA)

   Hospede um aplicativo de página única (SPA) com suporte para roteamento no lado do cliente e atualizações de página.

   Por motivos de segurança, ao acessar um arquivo HTML pelo nome de domínio do bucket, os navegadores forçam o download em vez de exibir o arquivo online. Para permitir que os usuários visualizem o site (objetivo principal da hospedagem de sites estáticos), vincule um nome de domínio personalizado. Para obter mais informações, consulte Access OSS by using a custom domain name . Se o bucket estiver na China continental, um ICP filing é obrigatório para o nome de domínio personalizado.

   Etapa 1: Configure a hospedagem de SPA

   Configure os parâmetros de hospedagem para garantir o funcionamento correto do roteamento no lado do cliente.

   1. Acesse a página Buckets, clique em no nome do bucket desejado e, no painel de navegação à esquerda, clique em Data Management > Static Page.

   2. Clique em Settings e configure os seguintes parâmetros:

      • Default Homepage: Defina como index.html.

      • Subfolder Homepage: Selecione Disabled. Com essa configuração, qualquer solicitação para o domínio do site estático ou qualquer URL sob esse domínio terminada em barra (/) retorna a página inicial padrão do diretório raiz.

      • Default 404 Page: Defina como index.html (configuração crítica: redireciona todas as rotas para o ponto de entrada do aplicativo).

      • Error Page Status Code: Selecione 200 (garante que as transições de rota retornem o código de status correto).

      • Clique em Save.

      Etapa 2: Fazer upload dos arquivos do aplicativo

      Faça upload dos arquivos do SPA para o bucket a fim de concluir a implantação.

      1. Baixe e extraia o aplicativo de exemplo demo.zip ou use seus próprios arquivos de aplicativo.

      2. No painel de navegação à esquerda, clique em Object Management > Objects.

      3. Arraste todos os arquivos do diretório demo ou seus próprios arquivos de aplicativo para a janela de upload. Após adicionar todos os arquivos à lista, clique em Upload Object.

      Etapa 3: Definir permissões do bucket

      Importante

      A permissão de leitura pública torna todos os objetos no bucket acessíveis publicamente. Qualquer pessoa que conheça a URL de um objeto pode baixá-lo. Portanto, utilize este bucket apenas para recursos públicos, como HTML, CSS e JavaScript. Armazene dados confidenciais em um bucket separado com controles de acesso mais rigorosos.

      Configure permissões de acesso público para tornar o SPA acessível aos usuários.

      1. Desative o Block Public Access para o bucket.

         1. No painel de navegação à esquerda, clique em Permission Control > Block Public Access.

         2. Clique em no botão alternar Block Public Access. Na caixa de diálogo exibida, insira I confirm that I want to disable Block Public Access e clique em OK.

      2. Defina as permissões de acesso do bucket como public-read.

         1. Acesse a aba Access Control List e clique em Set.

         2. Defina Bucket ACL como Public Read. Na caixa de diálogo exibida, clique em Continue.

         3. Clique em Save.

      Etapa 4: Verifique a implantação do aplicativo

      Teste o site para confirmar se o SPA lida corretamente com as transições de rota.

      • Verifique o acesso à página inicial: Em um navegador, acesse seu nome de domínio personalizado (por exemplo, http://example.com) para acessar o SPA. O resultado é mostrado na figura a seguir.

        

      • Verifique o comportamento 404: Em um navegador, tente acessar um arquivo inexistente, por exemplo, http://example.com/missing-object. A solicitação é redirecionada para o ponto de entrada do aplicativo e um código de status 200 OK é retornado.

      Implantando em um ambiente de produção

      Configure as seguintes otimizações de segurança e desempenho para um site estático pronto para produção.

      Melhores práticas

      • Transporte seguro: Ative o acesso HTTPS

        Navegadores modernos exibem avisos de "não seguro" para sites HTTP, e mecanismos de busca classificam sites HTTPS mais alto. Force o acesso HTTPS para seu nome de domínio personalizado seguindo o guia para access OSS over HTTPS. O HTTPS usa TLS/SSL para criptografar dados em trânsito, evitando roubo ou adulteração de dados.

      • Otimização de desempenho: Configure a aceleração CDN

        Se o site estático atender a um público global ou lidar com tráfego de alta concorrência, configure CDN acceleration para armazenar conteúdo em cache em nós de borda em todo o mundo. Isso melhora a velocidade de acesso e reduz os custos de tráfego do OSS.

        Após ativar a aceleração CDN, as páginas são servidas a partir do conteúdo armazenado em cache nos nós de borda. Depois de substituir um arquivo, as solicitações ainda podem retornar a versão anterior até que o cache expire. Portanto, após atualizar o conteúdo do site, atualize o cache da CDN para os arquivos ou diretórios modificados e verifique o site somente após a conclusão da atualização. Isso evita que uma página obsoleta seja confundida com uma falha na publicação.

      • Compartilhamento de recursos de origem cruzada (CORS): Configure regras CORS

        SPAs frequentemente chamam APIs de backend ou acessam recursos de terceiros, o que pode ser restringido pela política de mesma origem do navegador. Configure CORS rules para especificar origens, métodos e cabeçalhos permitidos, permitindo que o aplicativo acesse as APIs e recursos externos necessários.

      • Gerenciamento de versões: Implemente publicações e reversões

        Ative o versioning do OSS e integre-o a ferramentas de automação como Jenkins para criar um fluxo de trabalho CI/CD para publicações rápidas e reversões de emergência.

      Mitigação de riscos

      • Prevenção contra roubo de largura de banda: Configure proteção contra hotlink

        Outros sites que vinculam diretamente seus recursos estáticos aumentam os custos de tráfego e a carga do servidor. Configure Referer-based hotlink protection para criar uma lista de permissões de domínios autorizados e evitar o uso não autorizado de largura de banda.

      • Monitoramento de acesso: Ative logs de acesso

        Ative a real-time log query para registrar todas as solicitações de acesso. Isso ajuda a identificar padrões de acesso incomuns, analisar o comportamento do usuário e otimizar o desempenho do site.

      FAQ

      Erro 404 ao atualizar página de SPA

      Em um aplicativo de página única, todas as rotas são gerenciadas pelo JavaScript no lado do cliente. Ao acessar diretamente ou atualizar uma rota que não seja a raiz, o servidor não consegue encontrar um arquivo físico correspondente. Para resolver isso, defina a Default 404 Page como index.html e o Error Page Status Code como 200. Essa configuração redireciona todos os caminhos "não encontrados" para o ponto de entrada do aplicativo, permitindo que o roteador no lado do cliente os trate corretamente.

      Desativar a hospedagem de site estático

      1. Acesse a página Buckets, clique em no nome do bucket desejado e, no painel de navegação à esquerda, clique em Data Management > Static Page.

      2. Clique em Settings, limpe as configurações de Default Homepage e Default 404 Page e clique em Save para desativar o recurso de hospedagem de site estático.

      Suporte para conteúdo dinâmico

      A hospedagem de site estático suporta apenas arquivos estáticos, como HTML, CSS e JavaScript. Linguagens do lado do servidor como PHP, Python ou Java não são suportadas. Para funcionalidades dinâmicas, use renderização no lado do cliente com um framework frontend ou chame APIs de backend por meio de serviços serverless como Function Compute.