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 Cloud Source Repositories y, luego, implementarás el sitio web con Firebase. Después, usarás Cloud Build para crear una canalización y, así, implementar automáticamente contenido nuevo que se confirma en el repositorio.

Qué aprenderás

En este lab, aprenderás lo siguiente:

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

Requisitos previos

Las instrucciones que se proporcionan aquí son suficientes para guiarte en este lab. 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:

• Cloud Source Repositories: Qwik Start
• 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 son cronometrados y no se pueden pausar. El cronómetro, 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 de navegador privada o de Incógnito para ejecutar este lab. Así evitarás cualquier conflicto 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: Si ya tienes un proyecto o una cuenta personal de Google Cloud, no los uses en este lab para evitar cargos adicionales en tu cuenta.

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

1. Haga clic en el botón Comenzar lab. Si debe pagar por el lab, se abrirá una ventana emergente para que seleccione su forma de pago. A la izquierda, se encuentra el panel Detalles del lab que tiene estos elementos:

   • El botón Abrir la consola de Google
   • Tiempo restante
   • Las credenciales temporales que debe usar para el lab
   • Otra información para completar el lab, si es necesaria

2. Haga clic en Abrir la consola de Google. El lab inicia recursos y abre otra pestaña en la que se muestra la página de acceso.

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

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

3. Si es necesario, copie el nombre de usuario del panel Detalles del lab y péguelo en el cuadro de diálogo Acceder. Haga clic en Siguiente.

4. Copie la contraseña del panel Detalles del lab y péguela en el cuadro de diálogo de bienvenida. Haga clic en Siguiente.

   Importante: Debe usar las credenciales del panel de la izquierda. No use sus credenciales de Google Cloud Skills Boost. Nota: Usar su propia Cuenta de Google podría generar cargos adicionales.

5. Haga clic para avanzar por las páginas siguientes:

   • Acepte los términos y condiciones.
   • No agregue opciones de recuperación o autenticación de dos factores (esta es una cuenta temporal).
   • No se registre para obtener pruebas gratuitas.

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

Nota: Para ver el menú con una lista de los productos y servicios de Google Cloud, haga clic en el Menú de navegación que se encuentra en la parte superior izquierda de la pantalla.

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, implementará el sitio web. Tu recorrido se dividirá en dos partes. Primero, compilarás el sitio web de forma local y lo implementarás en Firebase manualmente para que puedas comprender el proceso completo. Segundo, 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 únicas que se necesitan 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. Verás una instancia que se compiló para ti.
2. 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.

3. Toma nota de la dirección IP externa para usarla más adelante.
4. Haz clic en SSH. Aparecerá una ventana y podrás ver un símbolo del sistema en la shell.

Instala Hugo localmente

A continuación, instala Hugo localmente en la instancia de Linux para poder probar el sitio web de forma local antes de implementarlo con Firebase. Se proporcionó 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

También puedes ver el contenido 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.

2. 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.

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

cd ~ /tmp/installhugo.sh

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

A continuación, crea un Cloud Source Repository 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 en la VM de Linux

Ingresa los siguientes comandos en la shell de la instancia de Linux:

sudo apt-get update sudo apt-get install git

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

2. Crea y clona un repositorio de código. Ingresa los siguientes comandos en la shell de la instancia de Linux:

cd ~ gcloud source repos create my_hugo_site gcloud source repos clone my_hugo_site

Recibirás confirmaciones acerca de la creación y la clonación del repositorio, como se muestra en la siguiente figura. Puedes ignorar 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. Se creó el repositorio de origen

3. Ya puedes crear la estructura del sitio. 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. Verás mensajes que indican que el sitio se creó, como se muestra en la siguiente figura.

4. Ahora, instala el tema Ananke 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/budparr/gohugo-theme-ananke.git \ themes/ananke echo 'theme = "ananke"' >> config.toml

Verás mensajes que indican que el tema se clonó, como se muestra a continuación.

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

sudo rm -r themes/ananke/.git sudo rm themes/ananke/.gitignore Nota: Se deben quitar los archivos git para que el repositorio de Cloud Source Repositories agregue los archivos de tema al control de versión.

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 compilará el sitio y lo entregará para su acceso en el puerto TCP 8080, como se muestra en la siguiente figura. 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. Se puede acceder al sitio web en el puerto 8080

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

Agrega Firebase a tu proyecto

Ahora que sabes cómo se ve el sitio web, es hora de implementarlo en Firebase. Primero, habilita Firebase en tu proyecto existente.

1. Abre una pestaña nueva en el navegador que estás usando para acceder a la consola de Google Cloud, luego, abre Firebase en ella para ir a Firebase console.

2. Ahora, haz clic en Agregar proyecto.

Se te pedirá que selecciones un nombre para tu proyecto.

3. Haz clic dentro del campo del nombre y selecciona tu proyecto existente de Google Cloud que comienza con “qwiklabs-gcp-…”, como se muestra en la siguiente figura:

4. Marca Acepto las condiciones de Firebase y Confirmo que usaré Firebase exclusivamente para fines relacionados con mi trabajo, empresa, oficio o profesión. Haz clic en Continuar.
5. Es posible que debas confirmar el plan de facturación de Firebase. Los costos de Firebase se incluyen con el lab. Si se te solicita, haz clic en Confirmar plan.
6. Se te pedirá que confirmes algunos de los criterios cuando agregues Firebase a un proyecto. Haz clic en Continuar.
7. Se te solicitará que confirmes el uso de Google Analytics para este proyecto de Firebase. Dado que este es un entorno de lab, usa el botón de activación para inhabilitar Google Analytics y haz clic en Agregar Firebase. Firebase tardará aproximadamente un minuto en agregarse al proyecto.
8. Si se te solicita, haz clic en Continuar después de que Firebase se agregue.

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 incluido en la página de instrucciones del lab. Para el directorio público, selecciona el valor predeterminado public. Para realizar la configuración como una aplicación con una sola 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 que puedas 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. Ingresa los comandos que se indican a continuación en la shell de Linux 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. Para ello, ingresa los siguientes comandos:

git add . git commit -m "Add app to Cloud Source Repositories" 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. Ingresa el siguiente comando en la shell de Linux. 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. Algunas de las líneas se unieron debido a su longitud.

cat cloudbuild.yaml

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/wget' 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/wget' args: - '--quiet' - '-O' - 'firebase' - 'https://firebase.tools/bin/linux/latest' - name: 'gcr.io/cloud-builders/wget' 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:18.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

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 mediante una imagen de contenedor. Los dos primeros pasos usan un compilador compatible con Google para usar wget y, así, descargar las herramientas de Hugo y Firebase. Esos dos pasos se ejecutan en paralelo. El uso del compilador de wget es más rápido que la instalación manual de wget.
• 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.

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 línea de comandos, ingresa el siguiente comando:

gcloud alpha builds triggers import --source=/tmp/trigger.yaml

2. Esta configuración de activador contiene los siguientes detalles:

Campo	Valor
Nombre	commit-to-master-branch
Descripción	Push to master
Evento	Enviar a una rama
Repositorio	my_hugo_site
Rama (regex)	^master$ (asegúrate de que Invertir regex no esté seleccionado)
Configuración de compilación	Archivo de configuración de Cloud Build (YAML o JSON)
Ubicación del archivo de configuración de Cloud Build	/ cloudbuild.yaml

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:

Blogs con Hugo y Cloud Build

3. En la shell de Linux, 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

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

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

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

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

7. Navega 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. Cloud Build se inició correctamente

¡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 para ajustarlo 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.

Finaliza tu Quest

Este lab de autoaprendizaje forma parte de la Quest Build Apps & Websites with Firebase. Una Quest es una serie de labs relacionados que forman una ruta de aprendizaje. Si completas esta Quest, obtendrás una insignia como reconocimiento por tu logro. Puedes hacer públicas tus insignias y agregar vínculos a ellas en tu currículum en línea o en tus cuentas de redes sociales. Inscríbete en esta Quest y obtén un crédito inmediato de realización. Consulta el catálogo de Google Cloud Skills Boost para ver todas las Quests disponibles.

Realiza tu próximo lab

Continúa tu Quest con Asistente de Google: Compila una aplicación con Dialogflow y Cloud Functions o prueba uno de los siguientes:

• Cómo importar datos a una base de datos de Firestore
• Compila una aplicación web sin servidores con Firebase

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 diciembre de 2023

Prueba más reciente del lab: 11 de diciembre de 2023

Copyright 2024 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.