Creación de una nueva aplicación web estática en Azure con Node.js

2024-10-15

Azure Static Web Apps es un servicio que compila e implementa automáticamente aplicaciones web de pila completa en Azure desde un repositorio de código.

Aplicaciones cliente: las aplicaciones web estáticas se suelen crear con bibliotecas y marcos como Angular, React, Svelte, Vue o Blazor, en los que no se requiere representación en el servidor.
API: los puntos de conexión de API se hospedan mediante una arquitectura sin servidor, lo que evita tener que usar un servidor completo para el back-end.

Serie de vídeos:

Ejemplos:

Los ejemplos de la comunidad de Static Web Apps son una excelente manera de encontrar código para usar un iniciador para el proyecto.
Los proyectos de inicio de aplicaciones web estáticas son otra excelente manera de iniciar el proyecto.

¿Qué es una aplicación web estática?

Una aplicación de Azure Static Web Apps es una aplicación hospedada con los archivos de cliente estáticos generados y los puntos de conexión de API opcionales. Al crear la aplicación web estática, se incluye la información necesaria para que una Acción de GitHub compile los archivos estáticos del repositorio de GitHub y, a continuación, los implemente en Azure.

Cree la aplicación web estática con uno de los siguientes elementos:

Uso de la CLI de Static Web Apps

La CLI de Static Web Apps, también conocida como la CLI de SWA, sirve como herramienta de desarrollo local para Azure Static Web Apps. Puede:

Aprovisionar recursos de aplicaciones o como proxy del servidor de desarrollo de aplicaciones
Servir solicitudes de API o como proxy para las API que se ejecutan en Azure Functions Core Tools
Emular la autenticación y autorización
Emular la configuración de Static Web Apps, incluido el enrutamiento

Inclusión de API para una aplicación de pila completa

Al incluir Azure Functions, puede desarrollar un sitio web de pila completa sin necesidad de usar la configuración del servidor de un entorno de hospedaje web completo. Más información sobre las aplicaciones de Azure Functions con JavaScript.

Azure Function está disponible para la aplicación web estática de dos maneras:

Managed Functions: estas API están disponibles en Static Web Apps para usar de forma opcional y normalmente se encuentran en una carpeta llamada /api.
Linked Functions: estas aplicaciones de funciones vinculadas independientes pero vinculadas permiten usar estas API sin tener que administrar a partir del mismo código fuente e implementar al mismo tiempo.

Ejemplos:

Desarrollo con Visual Studio Code

Use la extensión para Static Web Apps de Visual Studio Code para crear la estructura local de carpetas y las dependencias iniciales.

Bifurque uno de los repositorios de plantillas de GitHub para el cliente y la API de su elección o cree un nuevo repositorio.
En Visual Studio Code, cree una nueva aplicación web estática.
En los pasos de creación, seleccione la bifurcación y la rama del repositorio.

Al enviar cambios a este repositorio y rama, el código también se implementa en la aplicación web estática. Es habitual tener una rama live o deploy para ese propósito.
En los pasos de creación, seleccione la estructura del proyecto, la ubicación del código de la aplicación y el directorio de compilación.

Normalmente puede tomar los valores predeterminados si la estructura de carpetas sigue la estructura de carpetas habitual del tipo de proyecto.
Cuando termine los pasos de creación, la bifurcación del repositorio tiene una Acción de GitHub para compilar e implementar en la aplicación web estática, que se encuentra en el directorio /.github/workflows.

Entre los tutoriales que usan la extensión para Azure Static Web Apps se incluyen:

Configuración de las variables de entorno de cliente

La Acción de GitHub controla las variables de entorno que se insertan en el proyecto en tiempo de compilación. Estas variables del lado cliente se deben configurar en el archivo yaml de la Acción de GitHub en la sección env. Los secretos se deben almacenar en secretos de GitHub y se deben incluir en la sección env.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "search-website" # App source code path
          api_location: "search-website/api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
          # Inject vars at build time
          myvarname: 'myvarvalue' 
          # Inject secrets at build time from GitHub Secrets
          password: ${{ secrets.PASSWORD }}

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          action: "close"

Configuración de las variables de entorno de API

Las variables de entorno de API son variables en tiempo de ejecución configuradas en Azure Portal o la CLI de Azure.

Azure Portal: en Configuración y, a continuación, Configuración
Extensión de Visual Studio Code: en Producción y luego Configuración de la aplicación
CLI de Azure: mediante az staticwebapp appsettings set

Implementación en Azure

La implementación de una aplicación web estática en Azure se inicia mediante la inserción en la rama específica del repositorio de código fuente, que se muestra en la Acción de GitHub en pull_requests:branches. La inserción desde el equipo local debe usar el repositorio de la aplicación web estática o la bifurcación de un repositorio. Si la cuenta de usuario de GitHub no tiene permisos para insertar en la rama especificada en el repositorio de la organización especificado, como la organización de GitHub de su empresa, debe bifurcar el repositorio y, a continuación, configurar la Acción de GitHub para usar la bifurcación.

Compruebe el éxito de la implementación desde la Acción de GitHub.

Habilitamiento de registros

Active Application Insights en Azure Portal para que la aplicación web estática recopile el registro. El registro integrado de Application Insights recopila una gran cantidad de información automáticamente, sin cambios en el código.

Desarrollo del registro personalizado

Para agregar el registro personalizado de la aplicación a Application Insights, agregue el paquete npm @microsoft/applicationinsights-web y después agregue el código JavaScript para capturar la información personalizada.

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.trackTrace({message: 'some trace'});

Pasos siguientes

Más información sobre Static Web Apps

Compartir a través de