GSP747

Visão geral

Neste laboratório, você cria um pipeline para implantar sites gerados no Hugo, uma ferramenta de criação de sites estáticos. Você armazena o conteúdo do site em um repositório do GitHub, implanta o site com o Firebase e usa o Cloud Build para criar um pipeline e implantar automaticamente o novo conteúdo confirmado no repositório.

Objetivos

Neste laboratório, você vai realizar as seguintes tarefas:

• Ler uma visão geral do site estático.
• Criar um site no Hugo.
• Armazenar o conteúdo do site em um repositório do GitHub.
• Implantar o site com o Firebase.
• Criar um pipeline com o Cloud Build para automatizar a implantação.

Pré-requisitos

Para concluir este laboratório, você precisa de uma conta pessoal do GitHub. Se necessário, inscreva-se em GitHub.com.

Ter experiência prática com os serviços que serão usados também pode ajudar. Confira outros laboratórios úteis:

• Criar um app sem servidor que gera arquivos PDF com o Cloud Run
• Firebase Web

Benefícios dos sites estáticos

Ferramentas de criação de sites estáticos, como o Hugo, ficaram famosas por criarem sites que não precisam de servidores da Web. Com plataformas estáticas da Web, não é necessário manter sistemas operacionais nem softwares de servidor. No entanto, há várias considerações operacionais. Por exemplo, talvez você queira ter um controle de versões de seus posts, hospedar o site em uma rede de fornecimento de conteúdo (CDN) e provisionar um certificado SSL.

Para isso, use um pipeline de integração e implantação contínuas no Google Cloud. Com um pipeline de implantação, os desenvolvedores podem inovar rapidamente automatizando todo o processo de implantação. Neste laboratório, você vai aprender a criar um pipeline que demonstra essa automação.

Configuração e requisitos

Antes de clicar no botão Começar o Laboratório

Leia estas instruções. Os laboratórios são cronometrados e não podem ser pausados. O timer é ativado quando você clica em Iniciar laboratório e mostra por quanto tempo os recursos do Google Cloud vão ficar disponíveis.

Este laboratório prático permite que você realize as atividades em um ambiente real de nuvem, e não em uma simulação ou demonstração. Você vai receber novas credenciais temporárias para fazer login e acessar o Google Cloud durante o laboratório.

Confira os requisitos para concluir o laboratório:

• Acesso a um navegador de Internet padrão (recomendamos o Chrome).

Observação: para executar este laboratório, use o modo de navegação anônima (recomendado) ou uma janela anônima do navegador. Isso evita conflitos entre sua conta pessoal e de estudante, o que poderia causar cobranças extras na sua conta pessoal.

• Tempo para concluir o laboratório: não se esqueça que, depois de começar, não será possível pausar o laboratório.

Observação: use apenas a conta de estudante neste laboratório. Se usar outra conta do Google Cloud, você poderá receber cobranças nela.

Como iniciar seu laboratório e fazer login no console do Google Cloud

1. Clique no botão Começar o laboratório. Se for preciso pagar por ele, uma caixa de diálogo vai aparecer para você selecionar a forma de pagamento. No painel Detalhes do Laboratório, à esquerda, você vai encontrar o seguinte:

   • O botão Abrir Console do Google Cloud
   • O tempo restante
   • As credenciais temporárias que você vai usar neste laboratório
   • Outras informações, se forem necessárias

2. Se você estiver usando o navegador Chrome, clique em Abrir console do Google Cloud ou clique com o botão direito do mouse e selecione Abrir link em uma janela anônima.

   O laboratório ativa os recursos e depois abre a página Fazer Login em outra guia.

   Dica: coloque as guias em janelas separadas lado a lado.

   Observação: se aparecer a caixa de diálogo Escolher uma conta, clique em Usar outra conta.

3. Se necessário, copie o Nome de usuário abaixo e cole na caixa de diálogo Fazer login.

   {{{user_0.username | "Username"}}}

   Você também encontra o nome de usuário no painel Detalhes do Laboratório.

4. Clique em Próxima.

5. Copie a Senha abaixo e cole na caixa de diálogo de Olá.

   {{{user_0.password | "Password"}}}

   Você também encontra a senha no painel Detalhes do Laboratório.

6. Clique em Próxima.

   Importante: você precisa usar as credenciais fornecidas no laboratório, e não as da sua conta do Google Cloud. Observação: se você usar sua própria conta do Google Cloud neste laboratório, é possível que receba cobranças adicionais.

7. Acesse as próximas páginas:

   • Aceite os Termos e Condições.
   • Não adicione opções de recuperação nem autenticação de dois fatores (porque essa é uma conta temporária).
   • Não se inscreva em testes gratuitos.

Depois de alguns instantes, o console do Google Cloud será aberto nesta guia.

Observação: para acessar os produtos e serviços do Google Cloud, clique no Menu de navegação ou digite o nome do serviço ou produto no campo Pesquisar.

Visão geral do processo

Você vai criar o diagrama abaixo:

O objetivo é fazer commit do código e acionar o pipeline que vai implantar o site. Sua jornada é dividida em duas etapas. Primeiro, você cria o site localmente e faz a implantação manual dele no Firebase. Depois, você automatiza o processo criando um pipeline com o Cloud Build.

Tarefa 1: implantação manual

Crie o site manualmente em uma instância do Linux para entender o processo. Você também usa essa instância ao realizar algumas das tarefas únicas que são necessárias para o Firebase funcionar.

Conectar-se à instância do Linux

1. No menu de navegação (), selecione Compute Engine > Instâncias de VM. Uma instância será criada para você.

No fim da linha, há um endereço IP externo e um botão SSH, como mostra a figura abaixo. Se um painel de informações estiver ocultando o IP e o botão, feche o painel para abrir a linha inteira.

2. Registre o endereço IP externo para uso posterior.
3. Clique em SSH. Uma janela será aberta, e um comando de shell vai aparecer.

Instalar o Hugo

Instale o Hugo na instância do Linux para testar o site localmente antes de implantá-lo com o Firebase. Este laboratório oferece um script de shell para facilitar a instalação.

1. No shell da instância do Linux, analise o arquivo installhugo.sh:

cat /tmp/installhugo.sh

O resultado será semelhante ao exemplo abaixo:

Resultado:

#!/bin/bash # Copyright 2020 Google Inc. Todos os direitos reservados. # # Licenciado sob a Licença do Apache, Versão 2.0 (a "Licença"); # Este arquivo só pode ser usado de acordo com o estipulado na Licença. # Você pode conseguir uma cópia da Licença em # # http://www.apache.org/licenses/LICENSE-2.0 # # A menos que seja exigido pela lei aplicável ou conforme acordo por escrito, o software # distribuído sob a Licença é disponibilizado "NO ESTADO EM QUE SE ENCONTRA", # SEM GARANTIAS NEM CONDIÇÕES DE QUALQUER TIPO, expressas ou implícitas. # Consulte a Licença para informações específicas sobre permissões e # limitações. _HUGO_VERSION=0.96.0 echo Downloading Hugo version $_HUGO_VERSION... wget \ --quiet \ -O hugo.tar.gz \ https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz echo Extracting Hugo files into /tmp... mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz echo The Hugo binary is now at /tmp/hugo.

Observe que o comando wget é usado para fazer o download do Hugo e o comando tar para descompactar o arquivo do Hugo. Você vai ver comandos semelhantes mais adiante neste laboratório quando criar o pipeline.

2. Digite os comandos abaixo para executar o script e instalar o Hugo:

cd ~ /tmp/installhugo.sh

Depois da conclusão, a mensagem que confirma a instalação do Hugo no diretório /tmp vai aparecer, conforme mostrado abaixo.

Você já pode criar a infraestrutura do site.

Criar um repositório e o site inicial

Crie um repositório do GitHub para armazenar o site, depois clone esse repositório na instância do Linux.

A clonagem cria um espelho do repositório no shell. Dessa forma, você implementa o site enquanto está no shell e depois só precisa fazer commit das mudanças no sistema de arquivos. Mais adiante neste laboratório, você vai configurar um pipeline que responde a esses commits no repositório.

1. Instale o git e a CLI do GitHub na VM do Linux e defina o ID, o número e a região do projeto. Salve esses detalhes como as variáveis PROJECT_ID, PROJECT_NUMBER e REGION.

Digite os comandos abaixo no shell da instância do Linux:

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])") sudo apt-get update sudo apt-get install git sudo apt-get install gh

Se uma instrução aparecer, responda Yes todas as vezes.

2. Execute os seguintes comandos para configurar o Git e o GitHub:

curl -sS https://webi.sh/gh | sh gh auth login gh api user -q ".login" GITHUB_USERNAME=$(gh api user -q ".login") git config --global user.name "${GITHUB_USERNAME}" git config --global user.email "${USER_EMAIL}" echo ${GITHUB_USERNAME} echo ${USER_EMAIL}

3. Use os comandos a seguir para criar e clonar um repositório de código:

cd ~ gh repo create my_hugo_site --private gh repo clone my_hugo_site

A saída mostra confirmações sobre a criação e a clonagem do repositório, como mostra a figura abaixo. Ignore as duas mensagens de aviso: uma sobre a cobrança do repositório e outra informando que ele está vazio.

Clique em Verificar meu progresso para conferir o objetivo. Crie um repositório do GitHub.

Agora você já pode criar a estrutura do site.

4. Insira os comandos abaixo no shell do Linux.

cd ~ /tmp/hugo new site my_hugo_site --force

O comando hugo cria o diretório. A opção --force cria o site no diretório do repositório, que já existe. Isso permite manter as informações relacionadas ao Git no diretório que você acabou de clonar.

Quando terminar, você vai receber mensagens avisando que o site foi criado.

4. Agora, instale o tema hello-friend-ng para adicionar um layout ao seu site. Digite os comandos abaixo no shell da instância do Linux:

cd ~/my_hugo_site git clone \ https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng echo 'theme = "hello-friend-ng"' >> config.toml

Quando terminar, você vai receber mensagens confirmando a clonagem do tema.

5. Remova os arquivos git do diretório "themes":

sudo rm -r themes/hello-friend-ng/.git sudo rm themes/hello-friend-ng/.gitignore Observação: os arquivos git precisam ser removidos para que o GitHub adicione os arquivos de tema ao controle de versões.

6. Você poderá visualizar o site quando a estrutura dele estiver pronta. Use o comando abaixo para iniciar o site na porta TCP 8080:

cd ~/my_hugo_site /tmp/hugo server -D --bind 0.0.0.0 --port 8080

O Hugo cria o site e disponibiliza o acesso a ele na porta TCP 8080. O servidor só é interrompido quando você pressiona CTRL+C.

7. Abra uma guia do navegador e acesse o endereço IP externo na porta 8080. Use o seguinte URL, substituindo [EXTERNAL IP] pelo endereço IP externo da instância:

http://[EXTERNAL IP]:8080

O site deve ser semelhante ao seguinte:

Clique em Verificar meu progresso para conferir o objetivo. Inicie o site na porta TCP 8080

8. Volte para o shell do Linux e pressione CTRL+C para interromper o servidor do Hugo.

Implantar o site no Firebase

1. Instale a CLI do Firebase no shell da instância do Linux:

curl -sL https://firebase.tools | bash

2. Agora você precisa inicializar o Firebase. Digite o comando abaixo no shell:

cd ~/my_hugo_site firebase init

3. Selecione Hosting: Configurar arquivos para Firebase Hosting e configurar implantações do GitHub Action (opcional) usando as teclas de seta e a barra de espaço e pressione ENTER.

• Quando for solicitada uma opção de projeto, escolha Use an existing project e pressione as teclas de seta, a barra de espaço e a tecla ENTER para selecionar o ID do projeto, .

• Para o diretório público, selecione o valor padrão public.

• Se quiser que o aplicativo tenha apenas uma página, selecione o valor padrão N.

Para configurar builds e implantações automáticas com o GitHub, selecione N.

Caso seja perguntado se quer substituir os arquivos, selecione Y.

4. Você já pode implantar o aplicativo. Digite os comandos abaixo no shell da instância do Linux para recriar o site com o Hugo e implantá-lo com o Firebase:

/tmp/hugo && firebase deploy

5. Após a implantação do aplicativo, você vai receber um URL de hospedagem. Clique no URL para ver o mesmo site disponibilizado na CDN (rede de fornecimento de conteúdo) do Firebase.

Se aparecer uma mensagem genérica de recepção, aguarde alguns minutos até que a CDN seja inicializada e atualize a janela do navegador. Salve este URL de hospedagem para uso futuro.

Você fez a implantação localmente. Agora automatize todo o processo usando o Cloud Build.

Tarefa 2: automatizar a implantação

Faça o commit inicial

O objetivo de criar o pipeline é acionar builds quando mudanças forem feitas no repositório. Faça um commit inicial no repositório para validar se você poderá fazer alterações depois.

1. Configure os parâmetros globais de comandos Git inserindo os comandos abaixo no shell do Linux. Não se esqueça de incluir as aspas:

git config --global user.name "hugo" git config --global user.email "hugo@blogger.com"

2. No shell do Linux, digite os comandos abaixo para criar um arquivo .gitignore e excluir certos diretórios do repositório:

cd ~/my_hugo_site echo "resources" >> .gitignore

3. Faça o commit inicial no repositório:

git add . git commit -m "Add app to GitHub Repository" git push -u origin master

Você fez o commit (upload) da versão inicial do site para o Google Cloud.

Configure o build

O Cloud Build usa um arquivo chamado cloudbuild.yaml no diretório raiz do repositório que cria o build. Ele está no formato YAML. Como o espaçamento e o recuo são importantes, eles já foram colocados na instância do Linux para você.

1. No shell do Linux, digite o seguinte comando. Não se esqueça do ponto (".") no fim do comando cp:

cd ~/my_hugo_site cp /tmp/cloudbuild.yaml .

2. Execute o comando a seguir para mostrar o arquivo cloudbuild.yaml.

cat cloudbuild.yaml

Algumas linhas no resultado foram quebradas em várias linhas por causa do comprimento.

Resultado:

# Copyright 2020 Google Inc. Todos os direitos reservados. # # Licenciado sob a Licença do Apache, Versão 2.0 (a "Licença"); # Este arquivo só pode ser usado de acordo com o estipulado na Licença. # Você pode conseguir uma cópia da Licença em # # http://www.apache.org/licenses/LICENSE-2.0 # # A menos que seja exigido pela lei aplicável ou conforme acordo por escrito, o software # distribuído sob a Licença é disponibilizado "NO ESTADO EM QUE SE ENCONTRA", # SEM GARANTIAS NEM CONDIÇÕES DE QUALQUER TIPO, expressas ou implícitas. # Consulte a Licença para informações específicas sobre permissões e # limitações. steps: - name: 'gcr.io/cloud-builders/curl' args: - '--quiet' - '-O' # A menos que seja exigido pela legislação aplicável ou conforme acordo por escrito, o software # distribuído sob a Licença é disponibilizado "NO ESTADO EM QUE SE ENCONTRA", # SEM GARANTIAS NEM CONDIÇÕES DE QUALQUER TIPO, expressas ou implícitas. # Consulte a Licença para informações específicas sobre permissões e # limitações. steps: - name: 'gcr.io/cloud-builders/curl' args: - '--quiet' - '-O' - 'firebase' - 'https://firebase.tools/bin/linux/latest' - name: 'gcr.io/cloud-builders/curl' args: - '--quiet' - '-O' - 'hugo.tar.gz' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' waitFor: ['-'] - name: 'ubuntu:20.04' args: - 'bash' - '-c' - | mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz mv firebase /tmp chmod 755 /tmp/firebase /tmp/hugo /tmp/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0 options: defaultLogsBucketBehavior: REGIONAL_USER_OWNED_BUCKET

3. Confira algumas observações sobre o arquivo cloudbuild.yaml:

• O arquivo tem três etapas nomeadas, e cada uma delas é executada por uma imagem de contêiner. As duas primeiras usam um builder aceito pelo Google para baixar as ferramentas Hugo e Firebase com curl. Essas duas etapas são executadas em paralelo. Usar o builder é mais rápido do que instalar o curl manualmente.
• A terceira etapa usa um contêiner padrão do Ubuntu para instalar o Hugo e o Firebase. Depois disso, o site é criado e implantado. Se você instalar o Hugo e o Firebase para cada implantação, vai poder mudar a versão do Hugo quando quiser e usar a versão mais recente do Firebase.
• Os comandos tar e wget são quase idênticos aos que você usou antes no script installhugo.sh.
• O arquivo também usa uma variável de substituição personalizada (_HUGO_VERSION) e uma variável de substituição oferecida pelo Google (PROJECT_ID) para permitir o uso desse modelo em vários ambientes.
• Os binários do Hugo e do Firebase são criados e instalados em um diretório temporário para evitar que sejam implantados por engano no próprio site.

Conectar a um repositório do GitHub e criar um repositório do Cloud Build

1. Inicie uma conexão com seu repositório do GitHub na instância do Linux.

gcloud builds connections create github cloud-build-connection --project=$PROJECT_ID --region=$REGION gcloud builds connections describe cloud-build-connection --region=$REGION

2. Encontre o actionUri:

   etag: yKV297keFBHzs1UcgMsbYJlEYvYdIkfFLJMYZfOADu8 githubConfig: {} installationState: actionUri: https://accounts.google.com/AccountChooser?continue=https%3A%2F%2Fconsole.cloud.google.com%2Fm%2Fgcb%2Fgithub%2Flocations%2Fus-east4%2Foauth_v2%3Fconnection_name%3Dprojects%252F921646058273%252Flocations%252Fus-east4%252Fconnections%252Fcloud-build-connection message: Faça login em https://github.com usando uma conta de robô e utilize este link para autorizar o Cloud Build a acessar a conta. Após dar permissão, seu token de autorização do GitHub será armazenado no Cloud Secret Manager. stage: PENDING_USER_OAUTH name: projects/qwiklabs-gcp-00-40e7d6bb49bb/locations/us-east4/connections/cloud-build-connection reconciling: false updateTime: '2024-12-12T08:52:48.505263316Z'

3. Abra o actionUri em uma nova guia do navegador.

4. Clique em Continuar.

Instale o app GitHub para Cloud Build em sua conta ou em uma conta de organização de sua propriedade. Permita a instalação usando a conta do GitHub.

4. Em Acesso ao repositório, escolha Somente alguns repositórios. Clique em Selecionar repositórios e escolha .

5. Clique em Salvar.

6. Crie um repositório do Cloud Build:

gcloud builds repositories create {{{project_0.startup_script.build_repository_name | "filled in at lab start"}}} \ --remote-uri="https://github.com/${GITHUB_USERNAME}/{{{project_0.startup_script.github_repository_name | "filled in at lab start"}}}.git" \ --connection="cloud-build-connection" --region=$REGION

Clique em Verificar meu progresso para conferir o objetivo. Conectar a um repositório do GitHub e criar um repositório do Cloud Build

Criar o gatilho do Cloud Build

Agora você vai criar um gatilho para responder aos commits da ramificação principal do repositório.

1. No shell da instância do Linux, digite o seguinte comando:

gcloud builds triggers create github --name="commit-to-master-branch1" \ --repository=projects/$PROJECT_ID/locations/$REGION/connections/cloud-build-connection/repositories/hugo-website-build-repository \ --build-config='cloudbuild.yaml' \ --service-account=projects/$PROJECT_ID/serviceAccounts/$PROJECT_NUMBER-compute@developer.gserviceaccount.com \ --region=$REGION \ --branch-pattern='^master$'

Clique em Verificar meu progresso para conferir o objetivo. Crie o gatilho do Cloud Build.

A conta de serviço do Cloud Build

A conta de serviço do Cloud Build precisa ter permissões para usar o Firebase na implantação do site.

Cloud Build	Papel	Descrição
[PROJECT_NUMBER@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	Acesso total de leitura/gravação aos recursos do Hosting

Testar o pipeline

Agora que o pipeline foi criado, edite o site e faça o commit para verificar se a mudança é propagada.

1. No shell do Linux, digite o comando abaixo para acessar o diretório do repositório:

cd ~/my_hugo_site

2. Edite o arquivo config.toml e altere o título:

Blogging with Hugo and Cloud Build

3. Insira os comandos abaixo para fazer commit das mudanças no repositório e acionar o pipeline do Cloud Build:

git add . git commit -m "I updated the site title" git push -u origin master

4. Verifique o histórico do build para saber o status:

gcloud builds list --region=$REGION

5. Verifique os logs do build atual:

gcloud builds log --region=$REGION $(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD) --region=$REGION)

6. Colete o URL do build realizado:

gcloud builds log "$(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD) --region=$REGION)" --region=$REGION | grep "Hosting URL"

7. Acesse o URL de hospedagem para ver os resultados.

Também é possível acessar o console do Firebase e analisar o projeto para encontrar o nome de domínio.

Observação: talvez leve alguns minutos para que o CDN atualize e mostre as informações do site atualizado. Observação: o site tem um certificado SSL e é acessado usando o Protocolo de Transferência de Hipertexto Seguro (HTTPS).

Clique em Verificar meu progresso para conferir o objetivo. Teste o pipeline.

Parabéns!

Você aprendeu a criar um pipeline no Cloud Build para implantar rapidamente sites gerados no Hugo usando o Firebase, que oferece uma CDN e um certificado SSL. O Cloud Build permite adaptar o processo de acordo com as suas demandas. Como a implantação é feita em menos tempo, você inova rapidamente e testa as revisões do seu site com facilidade. Consulte a documentação do Cloud Build e do Firebase para saber mais.

Treinamento e certificação do Google Cloud

Esses treinamentos ajudam você a aproveitar as tecnologias do Google Cloud ao máximo. Nossas aulas incluem habilidades técnicas e práticas recomendadas para ajudar você a alcançar rapidamente o nível esperado e continuar sua jornada de aprendizado. Oferecemos treinamentos que vão do nível básico ao avançado, com opções de aulas virtuais, sob demanda e por meio de transmissões ao vivo para que você possa encaixá-las na correria do seu dia a dia. As certificações validam sua experiência e comprovam suas habilidades com as tecnologias do Google Cloud.

Manual atualizado em 11 de fevereiro de 2024

Laboratório testado em 10 de fevereiro de 2024

Copyright 2025 Google LLC. Todos os direitos reservados. Google e o logotipo do Google são marcas registradas da Google LLC. Todos os outros nomes de produtos e empresas podem ser marcas registradas das respectivas empresas a que estão associados.