Implementación de sitios web de Next.js representados de forma estática en Azure Static Web Apps

  • Artículo
  • 3 minutos para leer

En este tutorial, aprenderá a implementar un sitio web estático generado por Next.js en Azure Static Web Apps. Para obtener más información sobre aspectos específicos de Next.js, consulte el archivo Léame de la plantilla de inicio.

Requisitos previos

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

En lugar de usar la CLI de Next.js para crear la aplicación, puede usar un repositorio de inicio. El repositorio de inicio contiene una aplicación de Next.js existente que admite rutas dinámicas.

Para comenzar, cree un repositorio en su cuenta de GitHub desde un repositorio de plantillas.

  1. Vaya a https://github.com/staticwebdev/nextjs-starter/generate.

  2. Asigne el nombre nextjs-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>/nextjs-starter

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

    cd nextjs-starter

  5. Instale las dependencias:

    npm install

  6. Inicie la aplicación de Next.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 Next.js

Al seleccionar un marco o biblioteca, debería ver una página de detalles acerca del elemento seleccionado:

Página de detalles

Implementación del sitio web estático

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

Creación de una aplicación estática

  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-nextjs-group
    Nombre my-nextjs-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 adecuada.
    Repositorio Seleccione nextjs-starter.
    Rama Seleccione main (principal).

  9. En la sección Detalles de la compilación, seleccione Personalizado en Valores preestablecidos de compilación. Agregue los siguientes valores para la configuración de compilación.

    Propiedad Valor
    Ubicación de la aplicación Escriba / en el cuadro.
    Ubicación de la API Deje este cuadro vacío.
    Ubicación de salida Escriba out (salida) en el cuadro.

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 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 inmediatamente, la compilación todavía se está ejecutando. Una vez que se complete el flujo de trabajo, puede actualizar el explorador para ver la aplicación web.

Para comprobar el estado del flujo de trabajo Acciones, vaya al panel Acciones del repositorio:

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

Ahora, los cambios realizados en la rama main inician una nueva compilación e implementación del sitio web.

Sincronización de cambios

Al crear la aplicación, Azure Static Web Apps creó un archivo de Acciones de GitHub en el repositorio. Sincronice con el servidor mediante la extracción de la versión más reciente en el repositorio local.

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

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-nextjs-group en la barra de búsqueda superior.
  3. Seleccione el nombre del grupo.
  4. Seleccione el botón Eliminar.
  5. Seleccione Sí para confirmar la acción de eliminación.

Configuración de un dominio personalizado