Como disponibilizar conteúdo estático

Disponibilize de maneira segura conteúdo estático, como páginas HTML, arquivos CSS ou imagens que não serão alterados no resultado das operações do aplicativo. Os sites HTML simples e estáticos geralmente podem ser executados de graça com o nível gratuito do App Engine.

Esta página e a amostra fazem parte de um exemplo de aprendizado estendido de um aplicativo de blog simples, em que os usuários enviam postagens. Partimos do pressuposto de que você está habituado à linguagem de programação Go e ao desenvolvimento básico da Web. Para começar do início, acesse Como criar um aplicativo com Go.

Custos

Não há custos associados à execução deste tutorial. A execução deste aplicativo de amostra não excede sua cota gratuita.

Antes de começar

Se você tiver começado por Como criar um aplicativo com o Go, ignore esta seção. Caso contrário, conclua as seguintes etapas:

  1. Conclua as tarefas em Antes de começar em Como configurar o projeto e o aplicativo.

  2. Neste exemplo, adicione o código à amostra gophers-1, que é o produto final de Como configurar o projeto e o aplicativo.

    Faça o download da amostra gophers-1 e dependências dela para sua máquina local:

    go get -u -d github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-1/...
    
  3. Mude para o diretório gophers-1:

    cd $GOPATH/src/github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-1
    

Como estruturar o aplicativo

Este projeto de amostra tem a seguinte estrutura:

  • go-app/: diretório raiz do projeto

    • app.yaml: definições de configuração para o aplicativo do App Engine.
    • main.go: código do aplicativo
    • index.html: arquivo HTML estático para exibir a página inicial
    • static/: diretório para armazenar os arquivos estáticos
      • style.css: folha de estilo que formata a aparência do arquivo HTML
      • gcp-gopher.svg: imagem do Gopher

Como configurar arquivos estáticos

  1. Crie um arquivo index.html no diretório raiz do projeto e adicione as seguintes linhas:

    <!doctype html>
    <html>
    <head>
      <title>The Gopher Network</title>
      <link rel="stylesheet" type="text/css" href="/static/style.css">
    </head>
    <body>
    
    <h1>The Gopher Network</h1>
    
    <img id="logo" src="/static/gcp-gopher.svg" width="100">
    </body>
    </html>
    

  2. Crie uma pasta chamada static no diretório raiz do projeto:

    mkdir static
    
  3. Clique com o botão direito do mouse no link de imagem gcp-gopher.svg e em Salvar link como... para fazer o download da imagem no diretório static.

  4. Crie style.css no diretório static do projeto para modificar a aparência de index.html e adicione o seguinte estilo:

    body {
      font-family: Arial, sans-serif;
      color: blue;
    }
    

Como veicular modelos e arquivos estáticos

A veiculação de arquivos estáticos é mais eficiente em determinados conteúdos, como imagens ou CSS, que permanecem inalterados.

Crie um gerenciador para os arquivos estáticos e veicule o conteúdo deles:

  1. O arquivo app.yaml criado anteriormente especifica os diretórios que contêm arquivos estáticos. Adicione as seguintes linhas na seção dos gerenciadores acima da linha - url: /.* no app.yaml:

    # If the path is empty, show static index.html file
    - url: /
      static_files: index.html
      upload: index.html
    
    # Otherwise, find file in static directory
    - url: /static
      static_dir: static

    A seção handlers agora define três gerenciadores de URLs. Quando o App Engine recebe uma solicitação de URL /static, ele mapeia o restante do caminho para os arquivos no diretório static. Se um arquivo apropriado for encontrado, o conteúdo desse arquivo será retornado ao cliente.

    Para mais informações sobre o mapeamento de URL e outras opções que podem ser especificadas no app.yaml, consulte a documentação de referência do app.yaml.

  2. Como a veiculação está sendo feita a partir do index.html, você não precisará das seguintes linhas de main.go. Exclua:

    • "fmt" da lista de importações;
    • fmt.Fprint(w, "The Gopher Network: This is being hosted by App Engine.") na sua função indexHandler

Como executar o aplicativo localmente

Execute e teste o aplicativo usando o servidor de desenvolvimento local, dev_appserver.py, que está incluído no Cloud SDK.

  1. No diretório raiz do projeto em que o app.yaml do aplicativo está localizado, inicie o servidor de desenvolvimento local com o seguinte comando:

    dev_appserver.py app.yaml
    

    O servidor de desenvolvimento local agora está sendo executado e recebendo as solicitações na porta 8080. Ocorreu algum erro?

  2. Visite http://localhost:8080/ no navegador da Web para exibir o aplicativo.

    Final

Como executar o servidor de desenvolvimento local (dev_appserver.py)

Para executar o servidor de desenvolvimento local, execute dev_appserver.py especificando o caminho completo do diretório ou adicione dev_appserver.py à variável de ambiente PATH:

  • Se você tiver instalado o SDK original do App Engine, a ferramenta está localizada em:

    [PATH_TO_APP_ENGINE_SDK]/dev_appserver.py
    
  • Se você tiver instalado o Google Cloud SDK, a ferramenta está localizada em:

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/bin/dev_appserver.py
    

    Dica: para adicionar as ferramentas do Google Cloud SDK à variável de ambiente PATH e ativar a conclusão do comando no shell, execute:

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/install.sh
    

Para mais informações sobre como executar o servidor de desenvolvimento local, incluindo como alterar o número da porta, consulte a referência Servidor de desenvolvimento local.

Como fazer alterações do código

O servidor de desenvolvimento local acompanha as mudanças nos arquivos de projeto. Então, ele recompila e reinicia o aplicativo depois de fazer as alterações no código.

  1. Faça o teste agora: deixe o servidor de desenvolvimento local em execução e tente editar index.html para mudar "The Gopher Network" para outra coisa.

  2. Atualize http://localhost:8080/ para ver a mudança.

Como implantar o aplicativo

Implante o aplicativo do App Engine usando o comando abaixo no diretório raiz do projeto em que o app.yaml está localizado:

gcloud app deploy

Como visualizar o aplicativo

Para iniciar o navegador e ver o aplicativo em http://[YOUR_PROJECT_ID].appspot.com, execute o seguinte comando:

gcloud app browse

Próximas etapas

Você acabou de criar um aplicativo em que um front-end da Web se comunica com o back-end do Go.

Em seguida, saiba como criar um formulário básico que usa HTTP POST para exibir o conteúdo enviado pelo usuário em um modelo HTML.

Esta página foi útil? Conte sua opinião sobre:

Enviar comentários sobre…

Ambiente padrão do App Engine para Go