Como armazenar e exibir arquivos estáticos

Os aplicativos geralmente 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 veicular arquivos estáticos de uma opção do Google Cloud, como o Cloud Storage, veiculá-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 o nível gratuito.

Como exibir arquivos do Cloud Storage

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

  • O Cloud Storage funciona basicamente como uma rede de fornecimento de conteúdo (em inglês). 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 upload dos recursos para o Cloud Storage usando o SDK do Cloud ou a API Cloud Storage.

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

O cliente PHP 7 também fornece um wrapper de stream com suporte da API, que pode ser usado para interagir com o Cloud Storage como um sistema de arquivos especializado.

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 o SDK do Cloud:

  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.

    gsutil mb gs://<your-bucket-name>
    
  2. Configure a ACL para conceder acesso de leitura aos itens no bucket.

    gsutil defacl set public-read gs://<your-bucket-name>
    
  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.

    gsutil -m rsync -r ./static gs://<your-bucket-name>/static
    

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

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

Como veicular 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 do PHP 7 no ambiente padrão, defina os gerenciadores no arquivo app.yaml usando os elementos static_dir ou static_files.

Como configurar os gerenciadores de arquivos estáticos

Para configurar seu aplicativo para veicular 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 deste 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

  - url: /static
    static_dir: public

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

A seção handlers no exemplo acima inclui dois gerenciadores para URLs. Quando o Google App Engine recebe uma solicitação para um URL que começa com /static, ele mapeia o restante do caminho para os arquivos no diretório ./public. Se um arquivo apropriado é encontrado no diretório, o conteúdo desse arquivo é retornado ao cliente. Todos os outros URLs correspondem ao padrão /.* e são gerenciados pelo aplicativo.

Os padrões de caminho de 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 veicular por uma content delivery network 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.

Como exibir arquivos para desenvolvimento local

Use o servidor da Web integrado do PHP para disponibilizar arquivos estáticos localmente:

  1. Navegue até o diretório do projeto.
  2. Inicie o servidor da Web local com o seguinte comando:

    php -S localhost:8080
    
  3. Direcione o aplicativo PHP em execução local com uma solicitação para arquivos estáticos usando o utilitário de solicitação HTTP curl:

    curl -O http://localhost:8080/static/file/path/image.png
    

    A solicitação acima recupera o arquivo ./static/file/path/image.png.

Muitos frameworks da Web permitem exibir arquivos estáticos, que podem ser usados para disponibilizar arquivos no local durante o desenvolvimento em vez um servidor da Web local. Por exemplo, consulte a documentação do framework sobre Arquivos de exibição do Symfony ou Respostas de arquivo do Laravel (ambos em inglês).