Implementación de sitios de Nuxt 3 con representación universal en Azure Static Web Apps

  • Artículo

En este tutorial, aprenderá a implementar una aplicación Nuxt 3 en Azure Static Web Apps. Nuxt 3 admite la representación universal (del lado cliente y del lado servidor), incluidas las rutas de servidor y API. Sin configuración adicional, puede implementar aplicaciones de Nuxt 3 con representación universal en Azure Static Web Apps. Cuando la aplicación se compila en la acción GitHub de Static Web Apps o en la tarea Azure Pipelines, Nuxt 3 la convierte automáticamente en activos estáticos y en una aplicación Azure Functions que son compatibles con Azure Static Web Apps.

Requisitos previos

Configuración de una aplicación Nuxt 3

Puede configurar un nuevo proyecto de Nuxt mediante npx nuxi init nuxt-app. En lugar de usar un nuevo proyecto, en este tutorial se usa un repositorio existente configurado para demostrar cómo implementar un sitio de Nuxt 3 con representación universal en Azure Static Web Apps.

  1. Vaya a http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Asigne el nombre nuxt-3-starter al repositorio.

  3. A continuación, clone el nuevo repositorio en la máquina. Asegúrese de reemplazar <YOUR_GITHUB_ACCOUNT_NAME> por el nombre de su cuenta.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter

  4. Vaya a la aplicación de Nuxt.js recién clonada:

    cd nuxt-3-starter

  5. Instale las dependencias:

    npm install

  6. Inicie la aplicación de Nuxt.js en el entorno de desarrollo:

    npm run dev -- -o

Vaya a http://localhost:3000 para abrir la aplicación, donde debería ver el siguiente sitio web abierto en el explorador de su preferencia. Seleccione los botones para invocar rutas de servidor y API.

Inicio de la aplicación de Nuxt.js

Implementación del sitio de Nuxt 3

En los pasos siguientes se muestra cómo crear un recurso de Azure Static Web Apps y configurarlo para implementar la aplicación desde GitHub.

Creación de un recurso de Azure Static Web Apps

  1. Acceda a Azure Portal.

  2. Seleccione Crear un recurso.

  3. Busque Static Web Apps.

  4. Seleccione Static Web Apps.

  5. Seleccione Crear.

  6. En la pestaña Datos básicos, especifique los valores siguientes.

    Propiedad Valor
    Suscripción El nombre de la suscripción de Azure.
    Grupos de recursos my-nuxtjs-group
    Nombre my-nuxt3-app
    Tipo de plan Gratis
    Región para la API y los entornos de ensayo de Azure Functions Seleccione la región más cercana a la suya.
    Origen GitHub

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

  8. Escriba los siguientes valores de GitHub.

    Propiedad Valor
    Organización Seleccione la organización de GitHub que quiera.
    Repositorio Seleccione el repositorio que ha creado anteriormente.
    Rama Seleccione main (principal).

  9. En la sección Detalles de la compilación, seleccione Personalizado en la lista desplegable Valores preestablecidos de compilación y conserve los valores predeterminados.

  10. En Ubicación de la aplicación, escriba / en el cuadro.

  11. En la Ubicación de la Api, escriba en el cuadro .output/server.

  12. En la Ubicación salida, escriba en el cuadro .output/public.

Revisar y crear

  1. Seleccione el botón Revisar y crear para comprobar que todos los detalles sean correctos.

  2. Seleccione Crear para comenzar la creación de la aplicación web estática y aprovisionar una instancia de Acciones de GitHub para la implementación.

  3. Cuando finalice la implementación, seleccione Ir al recurso.

  4. En la ventana Información general, seleccione el vínculo Dirección URL para abrir la aplicación implementada.

Si el sitio web no se carga de inmediato, entonces el flujo de trabajo de Acciones de GitHub en segundo plano sigue en ejecución. Una vez que se complete el flujo de trabajo, entonces puede actualizar el explorador para ver la aplicación web.

Para comprobar el estado de los flujos de trabajo de Acciones, navegue a Acciones del repositorio:

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

Sincronizar cambios

Al crear la aplicación, Azure Static Web Apps creó un archivo de flujo de trabajo de Acciones de GitHub en el repositorio. Vuelva al terminal y ejecute el siguiente comando para extraer la confirmación que contiene el nuevo archivo.

git pull

Realice cambios en la aplicación mediante la actualización del código y su inserción en GitHub. Acciones de GitHub compila e implementa automáticamente la aplicación.

Para obtener más información, consulte la documentación Azure Static Web Apps valores preestablecidos de implementación de Nuxt 3.

Configuración de un dominio personalizado