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) de terceiros.

Hospedar o 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 a CLI do Google Cloud ou a API Cloud Storage.

A biblioteca de cliente do Google Cloud fornece um cliente idiomático do Go 1.11 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 simples cria um bucket do Cloud Storage e faz upload de recursos estáticos usando a gcloud CLI:

  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. Configure a ACL para conceder acesso 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 disponibilizar arquivos de outros Google Cloud serviços

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

Como exibir arquivos diretamente do aplicativo

Para exibir arquivos estáticos do Go 1.11 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.

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.