Como hospedar um site estático no Google App Engine

ID da região

O REGION_ID é um código abreviado que o Google atribui com base na região que você selecionou ao criar o aplicativo. O código não corresponde a um país ou estado, ainda que alguns IDs de região sejam semelhantes aos códigos de país e estado geralmente usados. Para apps criados após fevereiro de 2020, o REGION_ID.r está incluído nos URLs do App Engine. Para apps existentes criados antes dessa data, o ID da região é opcional no URL.

Saiba mais sobre IDs de região.

É possível usar o App Engine para hospedar um site estático. As páginas da Web estáticas podem conter tecnologias de cliente, como HTML, CSS e JavaScript. Hospedar o site estático no App Engine pode custar menos do que usar um provedor de hospedagem tradicional, porque o App Engine oferece um nível gratuito.

Os sites no App Engine são hospedados no subdomínio REGION_ID.r.appspot.com, como [my-project-id].uc.r.appspot.com. Depois de implantar o site, é possível mapear o próprio nome de domínio para o site hospedado pelo App Engine.

Antes de começar

Para hospedar o site no App Engine:

  1. Crie um novo projeto do Console do Google Cloud ou recupere o ID do projeto atual para usar:

    Acessar a página "Projetos"

  2. Instale e inicialize a Google Cloud CLI:

    Fazer o download do SDK

Como criar um site a ser hospedado no Google App Engine

Estrutura básica do projeto

Este guia usa a seguinte estrutura no projeto:

  • app.yaml: define as configurações do aplicativo do App Engine.
  • www/: diretório para armazenar todos os arquivos estáticos, como HTML, CSS, imagens e JavaScript.
    • css/: diretório para armazenar folhas de estilo.
      • style.css: folha de estilo básica que formata a aparência do seu site.
    • images/: diretório opcional para armazenar imagens.
    • index.html: arquivo HTML que exibe o conteúdo do seu site.
    • js/: diretório opcional para armazenar arquivos JavaScript.
    • Outros diretórios de assets.

Como criar o arquivo app.yaml

O app.yaml é um arquivo de configuração que informa ao App Engine como mapear URLs para os arquivos estáticos. Nas etapas a seguir, serão adicionados gerenciadores que vão carregar www/index.html quando alguém visitar seu site, e todos os arquivos estáticos serão armazenados e chamados no diretório www.

Crie o arquivo app.yaml no diretório raiz do aplicativo:

  1. Crie um diretório que tenha o mesmo nome do ID do projeto. Encontre o ID do projeto no Console.
  2. No diretório recém criado, crie um arquivo chamado app.yaml.

  3. Edite o arquivo app.yaml e adicione o elemento dos gerenciadores com base nos requisitos do seu site. Por exemplo, o arquivo app.yaml para o ambiente de execução do Python pode ser criado da seguinte maneira:

    runtime: python39

handlers:
- url: /
  static_files: www/index.html
  upload: www/index.html

- url: /(.*)
  static_files: www/\1
  upload: www/(.*)

Veja mais informações de referência sobre o arquivo app.yaml na documentação de referência do app.yaml.

Como criar o arquivo index.html

Crie um arquivo HTML que será exibido quando alguém acessar a página raiz do site. Armazene esse arquivo no diretório www.

<html>
  <head>
    <title>Hello, world!</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>
      This is a simple static HTML file that will be served from Google App
      Engine.
    </p>
  </body>
</html>

Como implantar o aplicativo no App Engine

Ao implantar os arquivos do aplicativo, o site será enviado para o App Engine. Para implantar o aplicativo, execute o seguinte comando no diretório raiz do aplicativo em que o arquivo app.yaml está localizado:

gcloud app deploy

Sinalizações opcionais:

  • Inclua a flag --project para especificar um ID de projeto alternativo do console do Google Cloud para o que você inicializou como padrão na CLI gcloud. Exemplo: --project [YOUR_PROJECT_ID]
  • Inclua a flag -v para especificar um ID de versão. Caso contrário, vai ser gerado um para você. Exemplo: -v [YOUR_VERSION_ID]

Saiba mais sobre a implantação do aplicativo na linha de comando em Implantar o aplicativo.

Ver o aplicativo

Para iniciar seu navegador e ver o aplicativo em https://PROJECT_ID.REGION_ID.r.appspot.com, execute o comando a seguir:

gcloud app browse

A seguir

Exiba o site hospedado pelo App Engine em um domínio personalizado.