Compartir a través de

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

  • Artículo

En este artículo, creará una nueva aplicación web con el marco de su elección, la ejecutará localmente y, a continuación, la implementará en Azure Static Web Apps.

Requisitos previos

Para completar este tutorial, necesita:

Resource Descripción
Suscripción de Azure En caso de no tener una, puede crear una cuenta gratuita.
Node.js Instale la versión 20.0 o posterior.
CLI de Azure Instale la versión 2.6x o posterior.

También necesitará un editor de texto. Para trabajar con Azure, se recomienda Visual Studio Code.

Puede ejecutar la aplicación que cree en este artículo en la plataforma que prefiera: Linux, macOS, Windows o Subsistema de Windows para Linux.

Creación de la aplicación web

  1. Abra una ventana de terminal.

  1. Seleccione un directorio adecuado para el código y, a continuación, ejecute los siguientes comandos.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

    A medida que ejecuta estos comandos, el servidor de desarrollo imprime la dirección URL del sitio web. Seleccione el vínculo para abrirlo en el explorador predeterminado.

    Captura de pantalla de la aplicación web de Vanilla generada.

  1. Seleccione un directorio adecuado para el código y, a continuación, ejecute los siguientes comandos.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

    A medida que ejecuta estos comandos, el servidor de desarrollo imprime la dirección URL del sitio web. Seleccione el vínculo para abrirlo en el explorador predeterminado.

    Captura de pantalla de la aplicación web de Angular generada.

  1. Seleccione un directorio adecuado para el código y, a continuación, ejecute los siguientes comandos.

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

    A medida que ejecuta estos comandos, el servidor de desarrollo imprime la dirección URL del sitio web. Seleccione el vínculo para abrirlo en el explorador predeterminado.

    Captura de pantalla de la aplicación web de React generada.

  1. Seleccione un directorio adecuado para el código y, a continuación, ejecute los siguientes comandos.

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

    A medida que ejecuta estos comandos, el servidor de desarrollo imprime la dirección URL del sitio web. Seleccione el vínculo para abrirlo en el explorador predeterminado.

    Captura de pantalla de la aplicación web de Vue generada.

  1. Seleccione Cmd/Ctrl+C para detener el servidor de desarrollo.

Creación de una aplicación web estática en Azure

Puede crear una aplicación web estática mediante Azure Portal, la CLI de Azure, Azure PowerShell o Visual Studio Code (con la extensión de Azure Static Web Apps). En este tutorial se usa la CLI de Azure.

  1. Inicie sesión en la CLI de Azure:

    az login

    De forma predeterminada, este comando abre un explorador para completar el proceso. Si este método no funciona en su entorno, la CLI de Azure admite varios métodos para iniciar sesión.

  2. Si tiene varias suscripciones, es posible que tenga que seleccionar una de ellas. Puede ver la suscripción actual mediante el siguiente comando:

    az account show

    Para seleccionar una suscripción, puede ejecutar el comando az account set.

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Cree un grupo de recursos.

    Los grupos de recursos se usan para agrupar los recursos de Azure.

    az group create -n swa-tutorial -l centralus --query "properties.provisioningState"

    El parámetro -n hace referencia al nombre del sitio y el parámetro -l es el nombre de la ubicación de Azure. El comando concluye con --query "properties.provisioningState" para que solo devuelva un mensaje de éxito o error.

  4. Cree una aplicación web estática en el grupo de recursos recién creado.

    az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"

    El parámetro -n hace referencia al nombre del sitio y el parámetro -g hace referencia al nombre del grupo de recursos de Azure. Asegúrese de especificar el mismo nombre de grupo de recursos que en el paso anterior. La aplicación web estática se distribuye globalmente, por lo que la ubicación no es importante para el modo de implementar la aplicación.

    El comando está configurado para devolver la dirección URL de la aplicación web. Puede copiar el valor de la ventana del terminal en el explorador para ver la aplicación web implementada.

Configuración de la implementación

  1. Agregue un archivo staticwebapp.config.json al código de la aplicación con el siguiente contenido:

    {
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

    La definición de una ruta de reserva permite al sitio atender el archivo index.html para las solicitudes realizadas en el dominio.

    Compruebe este archivo en el sistema de control de código fuente (por ejemplo, Git) si usa uno.

  2. Instale la CLI de Azure Static Web Apps (SWA) en el proyecto.

    npm install -D @azure/static-web-apps-cli

    La CLI de SWA le ayuda a desarrollar y probar el sitio localmente antes de implementarlo en la nube.

  3. Cree un nuevo archivo para el proyecto y llámelo swa-cli.config.json.

    El archivo swa-cli.config.json describe cómo compilar e implementar el sitio.

    Una vez creado este archivo, puede generar su contenido mediante el comando npx swa init.

    npx swa init --yes

  4. Compile la aplicación para su distribución.

    npx swa build

  5. Use la CLI de SWA para iniciar sesión en Azure.

    npx swa login --resource-group swa-tutorial --app-name swa-demo-site

    Use el mismo nombre de grupo de recursos y de aplicación web estática que creó en la sección anterior. Al intentar iniciar sesión, se abre un explorador para completar el proceso si es necesario.

Advertencia

Angular v17 y versiones posteriores colocan los archivos distribuibles en un subdirectorio de la ruta de acceso de salida que puede elegir. La CLI de SWA no conoce la ubicación específica del directorio. Los pasos siguientes muestran cómo establecer esta ruta de acceso correctamente.

Busque el archivo index.html en el proyecto en la carpeta dist/swa-angular-demo/browser.

  1. Establezca la variable de entorno SWA_CLI_OUTPUT_LOCATION en el directorio que contiene el archivo index.html:

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

Implementación del sitio en Azure

Implemente el código en la aplicación web estática:

npx swa deploy --env production

La implementación de la aplicación puede tardar unos minutos. Una vez completada, se muestra la dirección URL del sitio.

Captura de pantalla del comando deploy.

En la mayoría de los sistemas, puede seleccionar la dirección URL del sitio para abrirla en el explorador predeterminado.

Limpieza de recursos (opcional)

Si no continúa con otros tutoriales, quite el grupo de recursos de Azure y los recursos que contiene:

az group delete -n swa-tutorial

Cuando se elimina un grupo de recursos, se eliminan todos los recursos que contiene. No puede deshacer esta acción.

Pasos siguientes

Adición de autenticación

Contenido relacionado