Como armazenar e disponibilizar arquivos estáticos

Muitas vezes, os aplicativos precisam disponibilizar arquivos estáticos, como JavaScript, imagens e CSS, além de manipular solicitações dinâmicas. Os aplicativos no ambiente padrão podem exibir arquivos estáticos de uma opção do Google Cloud, como o Cloud Storage, exibi-los diretamente ou usar uma rede de fornecimento de conteúdo (CDN, na sigla em inglês) de terceiros.

Hospedar seu site estático no Google Cloud pode custar menos do que usar um provedor de hospedagem tradicional, já que o Google Cloud oferece um nível gratuito.

Como exibir arquivos do Cloud Storage

O Cloud Storage pode hospedar recursos estáticos de aplicativos dinâmicos da Web. Estes são os benefícios de usar o Cloud Storage em vez de disponibilizar diretamente no aplicativo:

  • O Cloud Storage funciona basicamente como uma rede de fornecimento de conteúdo. Por padrão, qualquer objeto publicamente legível é armazenado em cache na rede global do Cloud Storage. Por isso, não é preciso fazer nenhuma configuração especial.
  • A carga do aplicativo é reduzida ao descarregar os recursos estáticos em disponibilização no Cloud Storage. Dependendo de quantos você tiver e da frequência de acesso, isso reduz bastante o custo de execução do aplicativo.
  • As tarifas de largura de banda para acessar conteúdo costumam ser menores com o Cloud Storage.

É possível fazer o upload dos recursos para o Cloud Storage usando o Google Cloud CLI ou a API Cloud Storage.

A biblioteca de cliente do Google Cloud fornece um cliente idiomático ao Cloud Storage para armazenar e recuperar dados com o Cloud Storage em um aplicativo do App Engine.

Exemplo de exibição em um bucket do Cloud Storage

Este exemplo cria um bucket do Cloud Storage e faz upload de recursos estáticos usando a CLI gcloud:

  1. Crie um bucket. É comum dar o nome do ID do projeto ao bucket, mas isso não é obrigatório. O nome dele precisa ser exclusivo.

    gcloud storage buckets create gs://<var>your-bucket-name</var>

  2. Defina a política do IAM para conceder acesso público de leitura aos itens no bucket.

    gcloud storage buckets add-iam-policy-binding gs://<var>your-bucket-name</var> --member=allUsers --role=roles/storage.objectViewer

  3. Faça o upload dos itens para o bucket. Geralmente, o comando rsync é o jeito mais rápido e fácil de fazer upload e atualizar recursos. Também é possível usar o cp.

    gcloud storage rsync ./static gs://<var>your-bucket-name</var>/static --recursive

Agora é possível acessar os recursos estáticos via https://storage.googleapis.com/<var>your-bucket-name</var>/static/....

Para saber mais sobre como usar o Cloud Storage para disponibilizar recursos estáticos, incluindo a disponibilização a partir de um nome de domínio personalizado, consulte Como hospedar um site estático.

Como exibir arquivos de outros serviços do Google Cloud

Você também tem a opção de usar o Cloud CDN ou outros serviços de armazenamento do Google Cloud.

Como exibir arquivos diretamente do aplicativo

Para exibir arquivos estáticos no ambiente padrão, defina os gerenciadores no arquivo app.yaml usando os elementos static_dir ou static_files .

O conteúdo nos arquivos ou diretórios estáticos não é afetado pelas configurações de escalonamento no arquivo app.yaml. As solicitações para arquivos ou diretórios estáticos são processadas diretamente pela infraestrutura do App Engine e não alcançam o ambiente de execução da linguagem do aplicativo.

Como configurar os gerenciadores de arquivos estáticos

Para configurar seu aplicativo para exibir o diretório ./public do URL /static, defina um gerenciador no seu arquivo app.yaml.

Veja a seguir como exibir os arquivos estáticos do diretório ./public de um aplicativo de amostra. O modelo da página index.html desse aplicativo instrui o navegador a carregar o arquivo main.css, por exemplo:

<link type="text/css" rel="stylesheet" href="/static/css/main.css">

O diretório ./public é definido no elemento static_dir do arquivo app.yaml do projeto:

handlers:
  - url: /favicon\.ico
    static_files: favicon.ico
    upload: favicon\.ico

  - url: /static
    static_dir: public

  - url: /.*
    secure: always
    redirect_http_response_code: 301
    script: auto

A seção handlers no exemplo acima lida com três padrões de URL:

  • O gerenciador /favicon.ico mapeia uma solicitação específica para /favicon.ico até um arquivo chamado favicon.ico no diretório raiz do aplicativo.

  • O gerenciador /static mapeia solicitações de URLs que começam com /static. Quando o App Engine recebe uma solicitação para um URL que começa com /static, ele mapeia o restante do caminho até os arquivos no diretório ./public. Se um arquivo apropriado é encontrado no diretório, o conteúdo desse arquivo é retornado ao cliente.

  • O gerenciador /.* corresponde a todos os outros URLs e os direciona para o aplicativo.

Os padrões de caminho do URL são testados na ordem em que aparecem em app.yaml. Portanto, o padrão para seus arquivos estáticos precisa ser definido antes do padrão /.*. Para mais informações, consulte a referência app.yaml.

Para usar gerenciadores estáticos, é necessário especificar o elemento entrypoint em app.yaml ou especificar um gerenciador com script definido como auto.

Como disponibilizar a partir de uma rede de fornecimento de conteúdo de terceiros

Você pode usar qualquer CDN externa de terceiros para exibir seus arquivos estáticos e armazenar solicitações dinâmicas em cache, mas seu aplicativo poderá ter aumento de latência e custo.

Para melhorar o desempenho, use uma CDN de terceiros compatível com o CDN Interconnect.