Tutorial: implementación de repositorios de GitLab en Azure Static Web Apps

Azure Static Web Apps tiene opciones de implementación flexibles que permiten trabajar con varios proveedores. En este artículo, implementará una aplicación web hospedada en GitLab para Azure Static Web Apps.

En este tutorial, aprenderá a:

• Importación de un repositorio en GitLab
• Creación de una aplicación web estática
• Configuración del repositorio de GitLab para implementarlo en Azure Static Web Apps

Requisitos previos

• Cuenta de GitLab
• Cuenta de Azure
  • Si no tiene ninguna suscripción a Azure, cree una cuenta de evaluación gratuita.

Creación de un repositorio

En este artículo se usa un repositorio GitHub como origen para importar código en un repositorio GitLab.

1. Inicie sesión en su cuenta de GitLab y vaya a https://gitlab.com/projects/new#import_project.

2. Seleccione Repo by URL.

3. En el cuadro URL del repositorio Git, escriba la URL del repositorio para el marco de trabajo que prefiera.

   Ningún marco

   https://github.com/staticwebdev/vanilla-basic.git

   Angular

   https://github.com/staticwebdev/angular-basic.git

   Blazor

   https://github.com/staticwebdev/blazor-basic.git

   React

   https://github.com/staticwebdev/react-basic.git

   Vue

   https://github.com/staticwebdev/vue-basic.git

4. En el cuadro Slug de proyecto, escriba my-first-static-web-app.

5. Seleccione el botón Create project y espere un momento mientras se configura el repositorio.

Creación de una aplicación web estática

Ahora que se ha creado el repositorio, puede crear una aplicación web estática desde Azure Portal.

1. Vaya a Azure Portal.

2. Seleccione Crear un recurso.

3. Busque Static Web Apps.

4. Seleccione Static Web Apps.

5. Seleccione Crear.

6. Empiece configurando su nueva aplicación en la sección Aspectos básicos.

   Configuración	Valor
   Suscripción de Azure	Seleccione su suscripción a Azure.
   Grupo de recursos	Seleccione el vínculo Crear nuevo y escriba static-web-apps-gitlab.
   Name	Escriba my-first-static-web-app.
   Tipo de plan	Seleccione Gratis.
   Source	Seleccione Otros.

7. Seleccione Revisar + crear.

8. Seleccione Crear.

9. Haga clic en Go to resource (Ir al recurso).

10. Seleccione Manage deployment token (Administrar token de implementación).

11. Copie el valor del token de implementación y establézcalo en un editor para su uso posterior.

12. Seleccione el botón Close en la ventana Manage deployment token.

Cree la tarea de canalización en GitLab

Ahora que tiene el token de implementación, añada la tarea de flujo de trabajo responsable de construir e implementar el sitio mientras realiza cambios.

Añadir token de implementación

Al seguir los pasos siguientes, asegúrese de seleccionar * para la sección entornos. Puede aparecer que el valor predeterminado es all, pero debe seleccionar la lista desplegable y elegir manualmente *.

1. Vaya al repositorio en GitLab.

2. Haga clic en Configuración.

3. Seleccione CI/CD.

4. Junto a la sección Variables, seleccione el botón Expand.

5. Seleccione Add variable.

6. En el cuadro Clave, escriba DEPLOYMENT_TOKEN.

7. En el cuadro Valor, pegue el valor del token de implementación que ha reservado en un paso anterior.

8. Seleccione Add variable.

Agregar archivo

1. Vuelva a la pantalla principal del repositorio en GitLab.

2. Seleccione el botónEditar y elija IDE web.

3. Asegúrese de que la rama principal está seleccionada en la lista desplegable de ramas.

4. Cree un nuevo archivo llamado .gitlab-ci.yml en la raíz del repositorio. (Asegúrese de que la extensión de archivo es .yml).

5. Escriba el siguiente código YAML en el archivo.

   Ningún marco

   variables:
     API_TOKEN: $DEPLOYMENT_TOKEN
     APP_PATH: '$CI_PROJECT_DIR/src'
   
   deploy:
     stage: deploy
     image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
     script:
       - echo "App deployed successfully."
   

   Angular

   variables:
     API_TOKEN: $DEPLOYMENT_TOKEN
     APP_PATH: '$CI_PROJECT_DIR/src'
     OUTPUT_PATH: '$CI_PROJECT_DIR/dist/angular-basic'
   
   deploy:
     stage: deploy
     image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
     script:
       - echo "App deployed successfully."
   

   Blazor

   variables:
     API_TOKEN: $DEPLOYMENT_TOKEN
     APP_PATH: '$CI_PROJECT_DIR/Client'
     OUTPUT_PATH: 'wwwroot'
   
   deploy:
     stage: deploy
     image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
     script:
       - echo "App deployed successfully."
   

   React

   variables:
     API_TOKEN: $DEPLOYMENT_TOKEN
     APP_PATH: '$CI_PROJECT_DIR'
     OUTPUT_PATH: '$CI_PROJECT_DIR/build'
   
   deploy:
     stage: deploy
     image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
     script:
       - echo "App deployed successfully."
   

   Vue

   variables:
     API_TOKEN: $DEPLOYMENT_TOKEN
     APP_PATH: '$CI_PROJECT_DIR'
     OUTPUT_PATH: '$CI_PROJECT_DIR/dist'
   
   deploy:
     stage: deploy
     image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
     script:
       - echo "App deployed successfully."
   

   Se usan las siguientes propiedades de configuración en el archivo .gitlab-ci.yml para configurar la aplicación web estática.

   La variable $CI_PROJECT_DIR se asigna a la ubicación de la carpeta raíz del repositorio durante el proceso de compilación.

   Propiedad	Descripción	Ejemplo	Obligatorio
   APP_PATH	Ubicación del código de la aplicación.	Escriba $CI_PROJECT_DIR/ si el código fuente de la aplicación se encuentra en la raíz del repositorio, o $CI_PROJECT_DIR/app si el código de la aplicación se encuentra en la carpeta denominada app.	Sí
   API_PATH	Ubicación del código de Azure Functions.	Escriba $CI_PROJECT_DIR/api si el código de la aplicación se encuentra en una carpeta llamada api.	No
   OUTPUT_PATH	Ubicación de la carpeta de salida de la compilación en relación con APP_PATH.	Si el código fuente de la aplicación se encuentra en $CI_PROJECT_DIR/app y el script de compilación genera archivos de salida en la carpeta $CI_PROJECT_DIR/app/build, establezca $CI_PROJECT_DIR/app/build como valor de OUTPUT_PATH.	No
   API_TOKEN	Token de API para la implementación.	API_TOKEN: $DEPLOYMENT_TOKEN	Sí

6. Confirme los cambios en la rama principal y cierre la IDE web.

7. Vuelva al sitio y seleccione los elementos de menú Configuración>CI/CD>Canalizaciones generales para ver el progreso de la implementación.

Cuando se complete la implementación podrá ver el sitio web.

Vista del sitio web

Hay dos aspectos para implementar una aplicación estática. El primer paso crea los recursos de Azure subyacentes que componen la aplicación. El segundo es un flujo de trabajo de GitLab que crea y publica la aplicación.

Para poder ir a un nuevo sitio estático, primero la compilación de implementación debe terminar de ejecutarse.

En la ventana Información general de Static Web Apps se muestran una serie de vínculos que le ayudarán a interactuar con la aplicación web.

1. Vuelva a la aplicación web estática en Azure Portal.

2. Vaya a la ventana Información general.

3. Seleccione el vínculo en la etiqueta URL. El sitio web se carga en una nueva pestaña.

Limpieza de recursos

Si no va a seguir usando esta aplicación, puede eliminar la instancia de Azure Static Web Apps y todos los servicios asociados quitando el grupo de recursos.

1. Seleccione el grupo de recursos static-web-apps-gitlab en la sección Información general.

2. Seleccione el botón Eliminar grupo de recursos en la parte superior de la página del grupo de recursos Información general.

3. Escriba el nombre del grupo de recursos static-web-apps-gitlab en el cuadro de diálogo de confirmación ¿Seguro que desea eliminar "static-web-apps-gitlab"?.

4. Seleccione Eliminar.

El proceso para eliminar el grupo de recursos puede tardar unos minutos en completarse.

Pasos siguientes

Adición de una API