Compartir a través de


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

Azure Static Web Apps tiene opciones de implementación flexibles que permiten trabajar con varios proveedores. En este tutorial, implementará una aplicación web hospedada en Bitbucket en Azure Static Web Apps mediante una máquina virtual de Linux.

Nota

Actualmente, la tarea de canalización de Static Web Apps solo funciona en máquinas Linux.

En este tutorial, aprenderá a:

  • Importar un repositorio a Bitbucket
  • Creación de una aplicación web estática
  • Configurar el repositorio Bitbucket para implementarlo en Azure Static Web Apps

Requisitos previos

Creación de un repositorio

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

  1. Inicie sesión en Bitbucket.

  2. Vaya a https://bitbucket.org/repo/import para comenzar el proceso de importación.

  3. En la etiqueta Repositorio anterior, en el cuadro Dirección URL, escriba la dirección URL del repositorio para el marco que prefiera.

  4. Junto a la etiqueta Proyecto, seleccione Crear nuevo proyecto.

  5. Escriba MyStaticWebApp.

  6. Seleccione el botón Import repository y espere un momento mientras el sitio web crea el repositorio.

Establecimiento de la rama principal

De vez en cuando, el repositorio de plantillas tiene más de una rama. Siga estos pasos para asegurarse de que Bitbucket asigna la etiqueta principal a la rama principal del repositorio.

  1. Seleccione Configuración de repositorios.
  2. Expanda la sección Advanced (Avanzado).
  3. En la etiqueta Rama principal, asegúrese de que se ha seleccionado principal en la lista desplegable.
  4. Si ha realizado un cambio, seleccione Guardar cambios.
  5. Seleccione Atrás.

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-bitbucket.
    Nombre Escriba my-first-static-web-app.
    Tipo de plan Seleccione Gratis.
    Región para la API y los entornos de ensayo de Azure Functions Seleccione la región más cercana a la suya.
    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.

Creación de la tarea de canalización en Bitbucket

  1. Vaya al repositorio en Bitbucket.

  2. Seleccione el elemento de menú Origen.

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

  4. Seleccione Canalizaciones.

  5. Seleccione el vínculo de texto Crear la primera canalización.

  6. En la tarjeta Starter pipeline, elija el botón Select.

  7. Escriba el siguiente YAML en el archivo de configuración.

    pipelines:
      branches:
       main:
        - step: 
            name: Deploy to test
            deployment: test
            script:
              - chown -R 165536:165536 $BITBUCKET_CLONE_DIR
              - pipe: microsoft/azure-static-web-apps-deploy:main
                variables:
                    APP_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                    OUTPUT_LOCATION: '$BITBUCKET_CLONE_DIR/src'
                    API_TOKEN: $deployment_token
    

    Nota:

    En este ejemplo, el valor de pipe está establecido en microsoft/azure-static-web-apps-deploy:main. Reemplace main por el nombre de rama que quiera si desea que la canalización funcione con otra rama.

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

    La variable $BITBUCKET_CLONE_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_location Ubicación del código de la aplicación. Escriba / si el código fuente de la aplicación se encuentra en la raíz del repositorio, o /app si el código de la aplicación se encuentra en un directorio denominado app.
    api_location Ubicación del código de Azure Functions. Escriba /api si el código de la aplicación se encuentra en una carpeta llamada api. Si no se detecta ninguna aplicación de Azure Functions en la carpeta, no se produce un error en la compilación, sino que el flujo de trabajo supone que no quiere una API. No
    output_location Ubicación del directorio de salida de la compilación en relación con app_location. Si el código fuente de la aplicación se encuentra en /app y el script de compilación genera archivos de salida en la carpeta /app/build, establezca build como valor de output_location. No

A continuación, defina el valor de la variable API_TOKEN.

  1. Seleccione Agregar variables.
  2. En el cuadro Nombre, escriba deployment_token, que coincide con el nombre del flujo de trabajo.
  3. En el cuadro Valor, pegue el valor del token de implementación que ha reservado en un paso anterior.
  4. Marque la casilla Seguro.
  5. Seleccione Agregar.
  6. Seleccione Confirmar archivo y vuelva a la pestaña de canalizaciones.

Espere un momento en la ventana Canalizaciones y verá que aparece el estado de implementación. Una vez finalizada la ejecución de la implementación, puede ver el sitio web en el explorador.

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 Bitbucket 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-bitbucket 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-bitbucket en el cuadro de diálogo de confirmación ¿Seguro que desea eliminar "static-web-apps-bitbucket"?.
  4. Seleccione Eliminar.

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

Pasos siguientes