GSP747

Descripción general

En este lab, crearás una canalización para implementar sitios web basados en Hugo, un creador de sitios web estático. Almacenarás el contenido del sitio web en un repositorio de GitHub, implementarás el sitio web con Firebase y, luego, usarás Cloud Build para crear una canalización y, así, implementar automáticamente contenido nuevo que se confirme en el repositorio.

Objetivos

En este lab, realizarás las siguientes tareas:

• Leer una descripción general de los sitios web estáticos
• Configurar un sitio web con Hugo
• Almacenar el contenido del sitio web en un repositorio de GitHub
• Implementar el sitio web con Firebase
• Crear una canalización de compilación con Cloud Build para automatizar la implementación

Requisitos previos

Para completar este lab, necesitas una cuenta personal de GitHub. Si es necesario, regístrate en GitHub.com.

También puede resultarte útil tener experiencia práctica en los servicios que utilizarás. Estos son otros labs que podrían ser de utilidad:

• Cómo usar Cloud Run para compilar una aplicación sin servidores que crea archivos PDF
• Firebase Web

Los beneficios de los sitios web estáticos

Los creadores de sitios estáticos, como Hugo, se volvieron populares debido a su capacidad de producir sitios web que no requieren servidores web. Con las plataformas web estáticas, no hay sistemas operativos ni software del servidor que mantener. Sin embargo, existen varias consideraciones operativas. Por ejemplo, quizá debas controlar la versión de tus publicaciones, alojar tu sitio web en una red de distribución de contenidos ("CDN") y aprovisionar un certificado SSL.

Puedes abordar estas necesidades con una canalización de integración continua/implementación continua en Google Cloud. Una canalización de implementación permite a los desarrolladores innovar rápidamente mediante la automatización de todo el proceso de implementación. En este lab, aprenderás a compilar una canalización que demuestre esa automatización.

Configuración y requisitos

Antes de hacer clic en el botón Comenzar lab

Lee estas instrucciones. Los labs cuentan con un temporizador que no se puede pausar. El temporizador, que comienza a funcionar cuando haces clic en Comenzar lab, indica por cuánto tiempo tendrás a tu disposición los recursos de Google Cloud.

Este lab práctico te permitirá realizar las actividades correspondientes en un entorno de nube real, no en uno de simulación o demostración. Para ello, se te proporcionan credenciales temporales nuevas que utilizarás para acceder a Google Cloud durante todo el lab.

Para completar este lab, necesitarás lo siguiente:

• Acceso a un navegador de Internet estándar. Se recomienda el navegador Chrome.

Nota: Usa una ventana del navegador privada o de incógnito (opción recomendada) para ejecutar el lab. Así evitarás conflictos entre tu cuenta personal y la cuenta de estudiante, lo que podría generar cargos adicionales en tu cuenta personal.

• Tiempo para completar el lab (recuerda que, una vez que comienzas un lab, no puedes pausarlo).

Nota: Usa solo la cuenta de estudiante para este lab. Si usas otra cuenta de Google Cloud, es posible que se apliquen cargos a esa cuenta.

Cómo iniciar tu lab y acceder a la consola de Google Cloud

1. Haz clic en el botón Comenzar lab. Si debes pagar por el lab, se abrirá un diálogo para que selecciones la forma de pago. A la izquierda, se encuentra el panel Detalles del lab, que tiene estos elementos:

   • El botón para abrir la consola de Google Cloud
   • El tiempo restante
   • Las credenciales temporales que debes usar para el lab
   • Otra información para completar el lab, si es necesaria

2. Haz clic en Abrir la consola de Google Cloud (o haz clic con el botón derecho y selecciona Abrir el vínculo en una ventana de incógnito si ejecutas el navegador Chrome).

   El lab inicia recursos y abre otra pestaña en la que se muestra la página de acceso.

   Sugerencia: Ordena las pestañas en ventanas separadas, una junto a la otra.

   Nota: Si ves el diálogo Elegir una cuenta, haz clic en Usar otra cuenta.

3. De ser necesario, copia el nombre de usuario a continuación y pégalo en el diálogo Acceder.

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

   También puedes encontrar el nombre de usuario en el panel Detalles del lab.

4. Haz clic en Siguiente.

5. Copia la contraseña que aparece a continuación y pégala en el diálogo Te damos la bienvenida.

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

   También puedes encontrar la contraseña en el panel Detalles del lab.

6. Haz clic en Siguiente.

   Importante: Debes usar las credenciales que te proporciona el lab. No uses las credenciales de tu cuenta de Google Cloud. Nota: Usar tu propia cuenta de Google Cloud para este lab podría generar cargos adicionales.

7. Haz clic para avanzar por las páginas siguientes:

   • Acepta los Términos y Condiciones.
   • No agregues opciones de recuperación o autenticación de dos factores (esta es una cuenta temporal).
   • No te registres para obtener pruebas gratuitas.

Después de un momento, se abrirá la consola de Google Cloud en esta pestaña.

Nota: Para acceder a los productos y servicios de Google Cloud, haz clic en el menú de navegación o escribe el nombre del servicio o producto en el campo Buscar.

Descripción general del proceso

Este es un diagrama de lo que compilarás:

El objetivo es poder confirmar el código y hacer que active la canalización, que, a su vez, implementa el sitio web. Tu recorrido se divide en dos partes. Primero, compilarás el sitio web de forma local y lo implementarás en Firebase de forma manual. Luego, automatizarás el proceso creando una canalización con Cloud Build.

Tarea 1. Implementación manual

Primero, compilarás el sitio web de forma manual en una instancia de Linux para conocer el proceso íntegramente. También usarás la instancia de Linux para realizar algunas de las tareas que son necesarias por única vez para poner en marcha Firebase.

Conéctate a la instancia de Linux

1. En el menú de navegación (), selecciona Compute Engine > Instancias de VM. Observa la instancia que se compiló para ti.

Al final de la línea, deberías ver una dirección IP externa y un botón SSH, como se muestra en la siguiente figura. Si el panel de información impide que los veas, ciérralo para visualizar la línea completa.

2. Registra la dirección IP externa para usarla más adelante.
3. Haz clic en SSH. Se abrirá una ventana y verás un prompt en la shell.

Instala Hugo

Ahora, instala Hugo en la instancia de Linux para probar el sitio web de forma local antes de implementarlo con Firebase. En este lab, se proporciona una secuencia de comandos de shell para facilitar la tarea.

1. En la shell de la instancia de Linux, examina el archivo installhugo.sh:

cat /tmp/installhugo.sh

El resultado debería ser similar al resultado de muestra que se incluye a continuación:

Resultado:

#!/bin/bash # Copyright 2020 Google LLC. All rights reserved. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. _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.

Observa que se usó el comando wget para descargar Hugo y el comando tar para descomprimir el archivo de Hugo. Verás comandos similares más adelante en este lab, cuando crees la canalización.

2. Ingresa los siguientes comandos para ejecutar la secuencia de comandos que instalará Hugo:

cd ~ /tmp/installhugo.sh

Cuando se complete, recibirás un mensaje que dice que Hugo se instaló en el directorio /tmp, como se muestra a continuación.

Ya puedes compilar la infraestructura del sitio web.

Crea un repositorio y el sitio web inicial

Crea un repositorio de GitHub para conservar el sitio web y, luego, clona el repositorio en la instancia de Linux.

La clonación de un repositorio crea una duplicación de este en la shell. Eso te permite implementar el sitio web mientras permanece en la shell y, luego, confirmar los cambios en el sistema de archivos. Más adelante en este lab, configurarás una canalización que responda a esas confirmaciones en el repositorio.

1. Instala Git y GitHub CLI en la VM de Linux y configura el ID, el número y la región del proyecto. Guárdalos como variables PROJECT_ID, PROJECT_NUMBER y REGION.

Ingresa los siguientes comandos en la shell de la instancia de 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

Si se te consulta, responde Sí a todos los mensajes.

2. Ejecuta los siguientes comandos para configurar Git y 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. Ingresa los siguientes comandos para crear y clonar un repositorio de código:

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

El resultado proporciona confirmaciones acerca de la creación y la clonación del repositorio, como se muestra en la siguiente figura. Ignora los dos mensajes de advertencia que indican el cargo por el repositorio y que el repositorio está vacío.

Haz clic en Revisar mi progreso para verificar el objetivo. Crear un repositorio de GitHub

Ya puedes crear la estructura del sitio.

4. Ingresa los siguientes comandos en la shell de Linux.

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

Por lo general, el comando hugo crea el directorio. La opción --force creará el sitio en el directorio del repositorio, que ya existe. Eso te permite mantener la información relacionada con Git en el directorio que acabas de clonar.

Cuando se complete, verás mensajes que indican que se creó el sitio.

4. Ahora, instala el tema hello-friend-ng para proporcionar un diseño para tu sitio. Ingresa los siguientes comandos en la shell de la instancia de 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

Cuando se complete, verás mensajes que indican que el tema se clonó.

5. Quita los archivos de Git del directorio de temas:

sudo rm -r themes/hello-friend-ng/.git sudo rm themes/hello-friend-ng/.gitignore Nota: Se deben quitar los archivos de Git para que el repositorio de GitHub agregue los archivos de tema al control de versiones.

6. Con la estructura del sitio web configurada, puedes obtener una vista previa. Ingresa el siguiente comando para iniciar el sitio en el puerto TCP 8080:

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

Hugo compila el sitio y lo entrega para su acceso en el puerto TCP 8080. El servidor se ejecutará hasta que lo detengas presionando Ctrl+C.

7. Abre una pestaña del navegador y busca la dirección IP externa en el puerto 8080. Usa la siguiente URL y reemplaza [EXTERNAL IP] por la dirección IP externa de tu instancia:

http://[EXTERNAL IP]:8080

El sitio web debería verse así.

Haz clic en Revisar mi progreso para verificar el objetivo. Iniciar el sitio en el puerto TCP 8080

8. Regresa a la shell de Linux y presiona Ctrl+C para detener el servidor de Hugo.

Implementa el sitio en Firebase

1. Instala Firebase CLI en la shell de la instancia de Linux:

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

2. Es el momento de inicializar Firebase. Ingresa el siguiente comando en la shell:

cd ~/my_hugo_site firebase init

3. Selecciona Hosting: Configura los archivos para Firebase Hosting y, opcionalmente, configura las implementaciones de GitHub Action con las teclas de flecha y presiona INTRO.

• Cuando se te solicite una opción de proyecto, selecciona Use an existing project; luego, usa las teclas de flecha, la barra espaciadora y la tecla Intro para seleccionar el ID del proyecto, .

• Para el directorio público, selecciona el valor predeterminado public.

• Para realizar la configuración como una aplicación de una página, selecciona el valor predeterminado de N.

Para configurar implementaciones y compilaciones automáticas con GitHub, selecciona N.

Si se te solicita autorizar que se reemplacen archivos existentes, selecciona Y.

4. Ya puedes implementar la aplicación. Ingresa los siguientes comandos en la shell de la instancia de Linux para volver a compilar el sitio con Hugo y, luego, implementarlo con Firebase:

/tmp/hugo && firebase deploy

5. Una vez que se haya implementado la aplicación, recibirás una URL de hosting. Haz clic en ella para ver el mismo sitio web que se entrega desde Firebase CDN (red de distribución de contenidos).

Si recibes un mensaje de bienvenida genérico, espera unos minutos hasta que se inicialice la CDN y actualiza la ventana del navegador. Guarda la URL de hosting para usarla más adelante.

Ya realizaste la implementación completa de forma local. A continuación, automatiza el proceso de extremo a extremo con Cloud Build.

Tarea 2. Automatización de la implementación

Realiza la confirmación inicial

El objetivo de compilar la canalización es poder activar compilaciones cuando se realicen cambios en el repositorio. Comenzarás con la confirmación inicial en el repositorio para validar tu capacidad de realizar cambios futuros.

1. Para configurar los parámetros globales de los comandos de Git, ingresa los siguientes comandos en la shell de Linux. Asegúrate de incluir las comillas:

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

2. En la shell de Linux, ingresa los comandos que se indican a continuación para crear un archivo .gitignore y excluir ciertos directorios del repositorio:

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

3. Realiza la confirmación inicial del repositorio:

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

Ya confirmaste (subiste) la versión inicial del sitio web en Google Cloud.

Configura la compilación

Cloud Build usa un archivo denominado cloudbuild.yaml en el directorio raíz del repositorio para realizar la compilación. El archivo está en formato YAML. Los espacios y las sangrías son importantes, por lo que ya se colocaron en la instancia de Linux para ti.

1. En la shell de Linux, ingresa el siguiente comando. Observa el punto final (".") al final del comando cp:

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

2. Ejecuta el siguiente comando para ver cómo es el archivo cloudbuild.yaml.

cat cloudbuild.yaml

Algunas de las líneas del resultado se unieron debido a su longitud.

Resultado:

# Copyright 2020 Google LLC. All rights reserved. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. steps: - name: 'gcr.io/cloud-builders/curl' args: - '--quiet' - '-O' # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. 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. Estas son algunas observaciones sobre el archivo cloudbuild.yaml:

• Hay tres pasos con nombre en este archivo, y cada uno de ellos se realiza con una imagen de contenedor. Los dos primeros pasos utilizan un compilador compatible con Google para usar curl y, así, descargar las herramientas de Hugo y Firebase. Esos dos pasos se ejecutan en paralelo. El uso del compilador de curl es más rápido que la instalación manual de curl.
• El tercer paso usa un contenedor de Ubuntu estándar para instalar Hugo y Firebase. Después de eso, se compila y se implementa el sitio. Instalar Hugo y Firebase para cada implementación te permite cambiar la versión de Hugo cuando lo desees y, al mismo tiempo, usar la última versión de Firebase.
• Los comandos tar y wget son casi idénticos a los que se usaron anteriormente en la secuencia de comandos installhugo.sh.
• El archivo también usa una variable de sustitución personalizada (_HUGO_VERSION) y una variable de sustitución proporcionada por Google (PROJECT_ID) para permitir el uso de esta plantilla en diferentes entornos.
• Los objetos binarios de Hugo y Firebase se crean y se instalan en un directorio temporal para evitar que se implementen de forma involuntaria en el sitio web.

Conéctate a un repositorio de GitHub y crea un repositorio de Cloud Build

1. Inicia una conexión a tu repositorio de GitHub en la instancia de Linux.

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

2. Busca el 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: Please log in to https://github.com using a robot account and then follow this link to authorize Cloud Build to access that account. After authorization, your GitHub authorization token will be stored in 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. Abre el actionUri en una pestaña nueva del navegador.

4. Haz clic en Continuar.

Instala la app de GitHub de Cloud Build en tu cuenta o en una cuenta de organización que poseas. Permite la instalación con tu cuenta de GitHub.

4. En Acceso al repositorio, elige Solo repositorios seleccionados. Haz clic en Solo repositorios seleccionados y selecciona el repositorio .

5. Haz clic en Guardar.

6. Crea un repositorio de 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

Haz clic en Revisar mi progreso para verificar el objetivo. Conectarse a un repositorio de GitHub y crear un repositorio de Cloud Build

Crea el activador de Cloud Build

A continuación, crea un activador que responda a las confirmaciones en la rama principal del repositorio.

1. En la shell de la instancia de Linux, ingresa el siguiente 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$'

Haz clic en Revisar mi progreso para verificar el objetivo. Crear el activador de Cloud Build

La cuenta de servicio de Cloud Build

La cuenta de servicio de Cloud Build debe tener permisos para usar Firebase si se quiere implementar el sitio web.

Cloud Build	Rol	Descripción
[PROJECT_NUMBER@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	Acceso completo de lectura/escritura a los recursos de Hosting

Prueba la canalización

Una vez creada la canalización, puedes hacer un cambio en el sitio y, a continuación, confirmarlo para ver si se propaga.

1. En la shell de Linux, ingresa el comando que se muestra a continuación para desplazarte al directorio del repositorio:

cd ~/my_hugo_site

2. Edita el archivo config.toml y cambia el título por lo siguiente:

Blogging with Hugo and Cloud Build

3. Ingresa los siguientes comandos para confirmar los cambios en el repositorio y activar la canalización de Cloud Build:

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

4. Consulta el historial de compilación para ver el estado de la compilación:

gcloud builds list --region=$REGION

5. Consulta los registros de compilación de la compilación actual:

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

6. Extrae la URL de la compilación realizada:

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

7. Navega a la URL de hosting para ver los resultados.

También puedes ir a Firebase console y examinar el proyecto para encontrar el nombre del dominio.

Nota: La CDN puede tardar unos minutos en actualizarse y mostrar la información actualizada del sitio. Nota: El sitio tiene un certificado SSL al que se accede a través del protocolo HTTPS (protocolo de transferencia de hipertexto seguro).

Haz clic en Revisar mi progreso para verificar el objetivo. Probar la canalización

¡Felicitaciones!

Ya aprendiste cómo Cloud Build puede organizar una canalización para implementar rápidamente sitios web de Hugo en Firebase, que proporciona una CDN y un certificado SSL. Cloud Build te permite adaptar el proceso a tus necesidades. Los tiempos de implementación cortos te permiten innovar rápidamente y probar las revisiones de tu sitio web de manera sencilla. Consulta la documentación de Cloud Build y Firebase para obtener más información.

Capacitación y certificación de Google Cloud

Recibe la formación que necesitas para aprovechar al máximo las tecnologías de Google Cloud. Nuestras clases incluyen habilidades técnicas y recomendaciones para ayudarte a avanzar rápidamente y a seguir aprendiendo. Para que puedas realizar nuestros cursos cuando más te convenga, ofrecemos distintos tipos de capacitación de nivel básico a avanzado: a pedido, presenciales y virtuales. Las certificaciones te ayudan a validar y demostrar tus habilidades y tu conocimiento técnico respecto a las tecnologías de Google Cloud.

Última actualización del manual: 11 de febrero de 2024

Prueba más reciente del lab: 10 de febrero de 2024

Copyright 2025 Google LLC. All rights reserved. Google y el logotipo de Google son marcas de Google LLC. Los demás nombres de productos y empresas pueden ser marcas de las respectivas empresas a las que estén asociados.