Como veicular arquivos estáticos

Nesta página, mostramos como disponibilizar um CSS como arquivo estático.

Ao contrário de um ambiente de hospedagem na Web tradicional, o Google App Engine não exibe arquivos diretamente a partir do diretório de origem do seu aplicativo, a menos que esteja configurado para isso. No entanto, convém exibir arquivos estáticos, como imagens, CSS e código JavaScript, diretamente no navegador da Web. Você pode instruir o App Engine a disponibilizar arquivos específicos sem criar seus próprios gerenciadores.

Esta página é parte de um tutorial com várias páginas. Para começar do início e ver as instruções de configuração, acesse Como criar um livro de visitas.

Como definir gerenciadores

No exemplo de código a seguir, dois novos gerenciadores para URLs são definidos no arquivo app.yaml:

  1. Quando o App Engine recebe uma solicitação com um URL iniciado por /stylesheets, ele mapeia o restante do caminho para arquivos no diretório stylesheets e, se for encontrado um arquivo apropriado, os conteúdos do arquivo são exibidos para o cliente.

  2. Todos os outros URLs correspondem ao caminho /.* e são processados pelo script helloworld.php.

    app.yaml 
    runtime: php55
api_version: 1

handlers:
- url: /stylesheets
  static_dir: stylesheets

- url: /.*
  script: helloworld.php

Os padrões de caminho do gerenciador de URLs são testados na ordem em que aparecem em app.yaml. Neste caso, o padrão /stylesheets será correspondido antes do padrão /.* para os caminhos apropriados. Para mais informações sobre mapeamento de URL e outras opções que você pode especificar em app.yaml, consulte a referência app.yaml.

Como adicionar a folha de estilo

No exemplo de código a seguir, um arquivo CSS é criado e adicionado ao aplicativo.

  1. O exemplo de código adiciona o seguinte conteúdo ao arquivo main.css no diretório helloworld/stylesheets:

    stylesheets/main.css 
    body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #DDDDDD;
}

    Por padrão, o App Engine disponibiliza arquivos estáticos usando um tipo MIME baseado na extensão do nome de arquivo. Por exemplo, um arquivo com nome terminado em .css será veiculado com um tipo MIME de text/css. É possível definir tipos MIME explícitos usando a configuração mime_type ao configurar os gerenciadores no arquivo de configuração app.yaml.

  2. Para usar a folha de estilo em seu aplicativo, o exemplo de código insere as seguintes linhas após a linha <html> na parte superior:

    helloworld.php 
    <head>
  <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
</head>