Compartir a través de

Implementar una aplicación Vue en Azure Static Web Apps

En este artículo, aprenderá a implementar una aplicación Vue en Azure Static Web Apps mediante Azure Portal.

Requisitos previos

Resource Notas
Suscripción de Azure Si no tiene ninguna suscripción a Azure, cree una cuenta de evaluación gratuita.
GitHub Si no tiene una cuenta de GitHub, puede crearla gratis.
Resource Notas
Suscripción de Azure Si no tiene ninguna suscripción a Azure, cree una cuenta de evaluación gratuita.
Cuenta de Azure DevOps Si no tiene una cuenta de GitHub, puede crear una.

Creación de un repositorio

En este artículo se usa un repositorio de plantillas de GitHub para facilitar los primeros pasos. La plantilla incluye una aplicación de inicio que se implementa en Azure Static Web Apps.

  1. Vaya a la siguiente ubicación para crear un repositorio:

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

  2. Asigne el nombre my-first-static-web-app al repositorio.

  3. Seleccione Create repository from template (Crear repositorio a partir de plantilla).

    Captura de pantalla del botón Crear repositorio a partir de la plantilla.

En este artículo se usa un repositorio de Azure DevOps para facilitar los primeros pasos. El repositorio incluye una aplicación de inicio que se usa para realizar la implementación con Azure Static Web Apps.

  1. Inicie sesión en Azure DevOps.

  2. Seleccione Nuevo repositorio.

  3. En la ventana Crear nuevo proyecto, expanda el menú Avanzado y realice las siguientes selecciones:

    Configuración Value
    Project Escriba my-first-web-static-app.
    Visibilidad Seleccione Private (Privado).
    Control de versiones Seleccione Git.
    Proceso de elemento de trabajo Seleccione la opción que mejor se adapte a sus métodos de desarrollo.

  4. Seleccione Crear.

  5. Seleccione el elemento de menú Repos.

  6. Seleccione el elemento de menú Archivos.

  7. En la tarjeta Importar repositorio, seleccione el botón Importar.

  8. Copie una dirección URL del repositorio para el marco que prefiera y péguela en el cuadro Dirección URL de clonación.

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

  9. Seleccione el botón Importar y espere a que se complete el proceso de importación.

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 Aplicación web estática.
  4. Seleccione Static Web App.
  5. Seleccione Crear.

En la sección Aspectos básicos, configure la nueva aplicación y vincúlela a un repositorio de GitHub.

Captura de pantalla de la sección Aspectos básicos de Azure Portal.

Configuración Valor
Subscription Seleccione su suscripción a Azure.
Grupo de recursos Seleccione el vínculo Crear nuevo y escriba static-web-apps-test en el cuadro de texto.
Name Escriba my-first-static-web-app en el cuadro de texto.
Tipo de plan Seleccione Gratis.
Source Seleccione GitHub e inicie sesión en GitHub si fuera necesario.

Una vez que haya iniciado sesión en GitHub, escriba la información del repositorio.

Configuración Valor
Organización Seleccione su organización.
Repositorio Seleccione my-first-web-static-app.
Rama Seleccione main (principal).

Captura de pantalla de los detalles del repositorio en Azure Portal.

Nota:

Si no ve ningún repositorio:

  • Quizá deba autorizar Azure Static Web Apps en GitHub. Vaya al repositorio de GitHub y, a continuación, a Configuración > Aplicaciones > Aplicaciones de OAuth autorizadas, seleccione Azure Static Web Apps y, después, Conceder.
  • Es posible que tenga que autorizar Azure Static Web Apps en la organización de Azure DevOps. Debe ser propietario de la organización para conceder los permisos. Solicite acceso a las aplicaciones de terceros mediante OAuth. Para más información, consulte Autorización del acceso a las API REST con OAuth 2.0.

En la sección Aspectos básicos, configure la nueva aplicación y vincúlela a un repositorio de Azure DevOps.

Configuración Valor
Subscription Seleccione su suscripción a Azure.
Grupo de recursos Seleccione el vínculo Crear nuevo y escriba static-web-apps-test en el cuadro de texto.
Name Escriba my-first-static-web-app en el cuadro de texto.
Tipo de plan Seleccione Gratis.
Source Seleccione DevOps.
Organización Seleccione su organización.
Project Seleccione su proyecto.
Repositorio Seleccione my-first-web-static-app.
Rama Seleccione main (principal).

Nota

Asegúrese de que la rama que usa no esté protegida y de que tiene permisos suficientes para emitir un comando push. Para comprobarlo, desplácese al repositorio de DevOps, vaya a Repositorios ->Ramas y seleccione Más opciones. A continuación, seleccione su rama y, después, Directivas de rama para asegurarse de que las directivas necesarias no están habilitadas.

En la sección Build Details (Detalles de la compilación), agregue los detalles de configuración específicos del marco de front-end que prefiera.

  1. Seleccione Vue.js en la lista desplegable Valores preestablecidos de compilación.

  2. Conserve el valor predeterminado en el cuadro Ubicación de la aplicación.

  3. Deje en blanco el cuadro Ubicación de la aplicación.

  4. Conserve el valor predeterminado en el cuadro Ubicación de salida.

Seleccione Revisar + crear.

Captura de pantalla del botón Crear.

Nota:

Puede editar el archivo de flujo de trabajo para cambiar estos valores después de crear la aplicación.

Seleccione Crear.

Captura de pantalla del botón Crear.

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

Captura de pantalla del botón Ir al recurso.

Vista del sitio web

Hay dos aspectos para implementar una aplicación estática. El primero crea los recursos de Azure subyacentes que componen la aplicación. El segundo es un flujo de trabajo 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.

Captura de pantalla de la ventana de información general de Azure Static Web Apps.

  1. Al seleccionar Acción de GitHub se ejecuta en la información general, se le lleva a las Acciones de GitHub que se ejecutan en el repositorio. Compruebe que la acción de implementación se ha completado antes de continuar.

  2. Una vez completado el flujo de trabajo de Acciones de GitHub, puede seleccionar el vínculo URL para abrir el sitio web en la nueva pestaña.

Una vez completado el flujo de trabajo, puede seleccionar el vínculo con la dirección URL para abrir el sitio web en una pestaña nueva.

Limpieza de recursos

Si no va a seguir usando esta aplicación, puede eliminar la instancia de Azure Static Web Apps mediante los siguientes pasos:

  1. Abra Azure Portal.
  2. Busque my-first-web-static-app en la barra de búsqueda superior.
  3. Seleccione el nombre de la aplicación.
  4. Seleccione Eliminar.
  5. Seleccione Sí para confirmar la acción de eliminación (esta acción puede tardar unos minutos en completarse).

Pasos siguientes

Agregar una API a la aplicación