Implementación de sitios web de Nuxt.js representados por el servidor en Azure Static Web Apps

  • Artículo
  • 5 minutos para leer

En este tutorial, aprenderá a implementar un sitio web estático generado por Nuxt.js en Azure Static Web Apps. Para empezar, aprenderá a instalar, configurar e implementar una aplicación de Nuxt.js. Durante este proceso, también aprenderá a abordar los desafíos comunes a los que debe enfrentarse a menudo al generar páginas estáticas con Nuxt.js.

Prerrequisitos

Configuración de una aplicación de Nuxt.js

Puede configurar un nuevo proyecto de Nuxt.js mediante create-nuxt-app. En lugar de un proyecto nuevo, en este tutorial comenzará clonando un repositorio existente. Este repositorio está configurado para demostrar cómo implementar una aplicación dinámica de Nuxt.js como sitio estático.

  1. Cree un repositorio en su cuenta de GitHub desde un repositorio de plantillas.

  2. Vaya a http://github.com/staticwebdev/nuxtjs-starter/generate.

  3. Asigne el nombre nuxtjs-starter al repositorio.

  4. 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>/nuxtjs-starter

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

    cd nuxtjs-starter

  6. Instale las dependencias:

    npm install

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

    npm run dev

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:

Inicio de la aplicación de Nuxt.js

Al hacer clic en un marco/biblioteca, debería ver una página de detalles acerca del elemento seleccionado:

Página de detalles

Generación de un sitio web estático desde la compilación de Nuxt.js

Al compilar un sitio de Nuxt.js mediante npm run build, la aplicación se crea como aplicación web tradicional, no como sitio estático. Para generar un sitio estático, utilice la siguiente configuración de aplicación.

  1. Actualice el script de compilación de package.json para únicamente generar un sitio estático con el comando nuxt generate:

    "scripts": {
  "dev": "nuxt dev",
  "build": "nuxt generate"
},

    Ahora, con este comando en contexto, Static Web Apps ejecutará el script build cada vez que se inserte una confirmación.

  2. Genere un sitio estático:

    npm run build

    Nuxt.js generará el sitio estático y lo copiará en una carpeta dist en la raíz de su directorio de trabajo.

    Nota

    Esta carpeta aparece en el archivo .gitignore porque debe generarlo CI/CD en el momento de la implementación.

Inserción del sitio web estático en GitHub

Azure Static Web Apps implementa la aplicación desde un repositorio de GitHub y lo sigue haciendo para cada confirmación insertada en una rama designada. Utilice los siguientes comandos para sincronizar los cambios en GitHub.

  1. Agregue al "stage" todos los archivos cambiados:

    git add .

  2. Confirme todos los cambios.

    git commit -m "Update build config"

  3. Envíe los cambios a GitHub.

    git push origin main

Implementación del sitio web estático

En los pasos siguientes se muestra cómo vincular la aplicación que acaba de insertar en GitHub con Azure Static Web Apps. Una vez que esté en Azure, podrá implementar la aplicación en un entorno de producción.

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 Value
    Suscripción El nombre de la suscripción de Azure.
    Grupos de recursos my-nuxtjs-group
    Nombre my-nuxtjs-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 Value
    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. Deje en blanco el cuadro Ubicación de la aplicación.

  12. En el cuadro Ubicación del resultado, escriba fuera.

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 de App Service y aprovisionar una Acción de GitHub para la implementación.

  3. Cuando se complete la implementación, haga clic en Ir al recurso.

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

Si el sitio web no se carga de inmediato, el flujo de trabajo de Acciones de GitHub en segundo plano sigue en ejecución. Una vez que se complete el flujo de trabajo, 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>/nuxtjs-starter/actions

Sincronización de cambios

Al crear la aplicación, Azure Static Web Apps creó un archivo de flujo de trabajo de Acciones de GitHub en el repositorio. Debe poner este archivo en el repositorio local para que el historial de Git se sincronice.

Vuelva al terminal y ejecute el siguiente comando: git pull origin main.

Configuración de rutas dinámicas

Vaya al sitio recién implementado y haga clic en uno de los logotipos de marco o biblioteca. En lugar de obtener una página de detalles, aparecerá una página de error 404.

404 en rutas dinámicas

El motivo es que Nuxt.js generó el sitio estático, pero solo lo hizo para la página principal. Nuxt.js puede generar archivos .html estáticos equivalentes para cada archivo de páginas .vue, pero hay una excepción.

Si se trata de una página dinámica, por ejemplo _id.vue, no tendrá suficiente información para generar un HTML estático desde esa página dinámica. Tendrá que proporcionar de manear explícita las rutas de acceso posibles para las rutas dinámicas.

Generación de páginas estáticas a partir de rutas dinámicas

  1. Actualice el archivo nuxt.config.js para que Nuxt.js use una lista de todos los datos disponibles para generar páginas estáticas para cada marco o biblioteca:

      import { projects } from "./utils/projectsData";

  export default {
    mode: "universal",

    //...truncated

    generate: {
      async routes() {
        const paths = [];

        projects.forEach(project => {
          paths.push(`/project/${project.slug}`);
        });

        return paths;
      }
    }
  };

    Nota

    routes es una función asincrónica, por lo que puede hacer una solicitud a una API en esta función y usar la lista devuelta para generar las rutas de acceso.

  2. Envíe los nuevos cambios al repositorio de GitHub y espere unos minutos mientras las Acciones de GitHub compilan de nuevo el sitio. Una vez que se complete la compilación, el error 404 desaparecerá.

    404 en rutas dinámicas corregido

Configuración de un dominio personalizado