Inicio rápido: Creación de la primera aplicación web estática

  • Artículo

Azure Static Web Apps publica sitios web en entornos de producción mediante la creación de aplicaciones desde un repositorio de GitHub o Azure DevOps. En este inicio rápido, se implementa una aplicación web en Azure Static Web Apps mediante Azure Portal.

Prerrequisitos

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:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Asigne el nombre my-first-static-web-app al repositorio.

Nota

Azure Static Web Apps requiere al menos un archivo HTML para crear una aplicación web. El repositorio que se crea en este paso incluye un solo archivo index.html.

Seleccione Create repository (Crear repositorio).

Screenshot of the Create repository button.

Creación de un repositorio

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 Creación del 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.

  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 Static Web Apps.
  4. Seleccione Static Web Apps.
  5. Seleccione Crear.

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

Basics section

Configuración Value
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.
Detalles de almacenamiento provisional y Azure Functions Seleccione la región más cercana a la suya.
Source Seleccione GitHub.

Seleccione Iniciar sesión con GitHub y autentíquese con GitHub.

Tras iniciar sesión con 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 <branch_name>.

Repository details

Nota:

Si no ve ningún repositorio:

  • Quizá deba autorizar Azure Static Web Apps en GitHub. Vaya al perfil 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 Value
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.
Detalles de almacenamiento provisional y Azure Functions Seleccione la región más cercana a la suya.
Source Seleccione DevOps.
Organización Seleccione su organización.
Project Seleccione su proyecto.
Repositorio Seleccione my-first-web-static-app.
Rama Seleccione <branch_name>.

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 Personalizado en la lista desplegable Valores preestablecidos de compilación.
  2. Escriba ./src en el cuadro Ubicación de la aplicación.
  3. Deje en blanco el cuadro Ubicación de la aplicación.
  4. Escriba ./src en el cuadro Ubicación del artefacto de la aplicación.

Seleccione Revisar + crear.

Review and create your Azure Static Web Apps instance.

Nota:

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

Seleccione Crear.

Create your Azure Static Web Apps instance.

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

Proceed to go to the newly created resource.

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.

The Azure Static Web Apps overview window.

  1. Al seleccionar el banner con el texto, Seleccione esto para comprobar el estado de las ejecuciones de Acciones de GitHub, irá a las Acciones de GitHub en ejecución en su repositorio. Una vez que haya verificado que el trabajo de implementación se haya completado, puede ir a su sitio web a través de la URL generada.

  2. Una vez completado el flujo de trabajo de Acciones de GitHub, puede seleccionar el vínculo con la dirección URL para abrir el sitio web en una 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 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

Adición de una API