Diferentemente de um ambiente tradicional de hospedagem na web, o Google App Engine não serve arquivos diretamente do diretório de origem do seu aplicativo, a menos que seja configurado para isso. Nomeamos nosso arquivo de modelo index.html, mas isso não disponibiliza o arquivo automaticamente no URL /index.html.
Porém, há várias situações em que você desejará servir os arquivos estáticos diretamente ao navegador da web. Imagens, folhas de estilo CSS, código JavaScript, filmes e animações em Flash normalmente são armazenados com um aplicativo da web e servidos diretamente ao navegador. Você pode instruir o Google App Engine para servir arquivos específicos diretamente, sem a necessidade de programar seu próprio manipulador.
Edite helloworld/app.yaml e substitua o conteúdo pelo seguinte:
application: helloworld version: 1 runtime: python api_version: 1 handlers: - url: /stylesheets static_dir: stylesheets - url: /.* script: helloworld.py
A nova seção handlers define dois manipuladores para URLs. Quando o Google App Engine recebe uma solicitação com um URL iniciado por /stylesheets, ele mapeia o restante do caminho para os arquivos do diretório stylesheets e, caso encontre um arquivo apropriado, o conteúdo do arquivo é retornado ao cliente. Todos os outros URLs correspondem ao caminho / e são tratados pelo script helloworld.py.
Como padrão, o Google App Engine serve arquivos estáticos usando um tipo de MIME com base na extensão do nome de arquivo. Por exemplo, um arquivo cujo nome termina em .css será servido com o tipo de MIME text/css. Você pode configurar tipos de MIME explícitos com opções adicionais.
Os padrões de caminho de manipulador de URL são testados na ordem em que aparecem no arquivo app.yaml, de cima para baixo. Nesse caso, o padrão /stylesheets encontrará resultados de correspondência antes do padrão /.* para os caminhos apropriados. Para obter mais informações sobre mapeamento de URL e outras opções que você pode especificar no arquivo app.yaml, consulte a referência do app.yaml.
Crie o diretório helloworld/stylesheets. Nesse novo diretório, crie um arquivo denominado main.css e coloque nele o conteúdo abaixo:
|
body {
font-family: Verdana, Helvetica, sans-serif;
background-color: #DDDDDD;
}
Por fim, edite helloworld/index.html e insira as linhas abaixo logo após a linha <html> do alto:
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
</head>
Recarregue a página no navegador. A nova versão usa a folha de estilos.
Chegou o momento de revelar seu aplicativo finalizado ao mundo.
Vá para Envio do seu aplicativo.