Implementación de una aplicación de React en Azure Static Web Apps

En este artículo, aprenderá a implementar una aplicación de React en Azure Static Web Apps mediante el portal de Azure.

Prerrequisitos

Resource Notas
Suscripción a Azure Si no tiene una suscripción de Azure, cree una cuenta de evaluación gratuita.
Cuenta de GitHub Si no tiene una cuenta de GitHub, puede crear una gratis.
Resource Notas
Suscripción a Azure Si no tiene una suscripción de 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 nuevo repositorio:

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

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

  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ú Opciones avanzadas y realice las siguientes selecciones:

    Configuración Importancia
    Proyecto Escriba my-first-web-static-app.
    Visibilidad Seleccione 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. Selecciona Crear.

  5. Seleccione el elemento de menú Repos.

  6. Seleccione el elemento de menú Archivos.

  7. En la tarjeta Importar repositorio, seleccione 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/react-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 al portal Azure.
  2. Seleccione Crear un recurso.
  3. Busque Aplicación Web Estática.
  4. Seleccione Aplicación web estática.
  5. Selecciona 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 Importancia
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.
Nombre 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 es necesario.

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

Configuración Importancia
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 Importancia
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.
Nombre 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.
Proyecto 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 React en la lista desplegable Ajustes predefinidos 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 del API.

  4. Escriba build en el cuadro Ubicación del artefacto de la aplicación .

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

Selecciona Crear.

Captura de pantalla del botón Crear.

Seleccione Ir al recurso.

Captura de pantalla del botón Continuar con el 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.

Antes de poder ir a tu nuevo sitio estático, primero debe completarse la ejecución de la compilación de implementación.

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 pestaña nueva.

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 el portal Azure.
  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

Adición de una API a la aplicación

  • Last updated on