Compartir a través de

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

En este tutorial, aprenderás 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.

Prerrequisitos

1. Configurar 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 empezar, cree un repositorio en la cuenta de GitHub desde un repositorio de plantillas.

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

  2. Asigne al repositorio el nombre nextjs-starter.

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

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

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

    cd nextjs-starter

  5. Instale las dependencias.

    npm install

  6. Inicie la aplicación Next.js en desarrollo.

    npm run dev

  7. Vaya a http://localhost:3000 para abrir la aplicación, donde debería ver el siguiente sitio web abierto en su navegador preferido.

Iniciar Next.js aplicación

Al seleccionar un marco o biblioteca, verá una página de detalles sobre el elemento seleccionado:

Página De detalles

2. Creación de una aplicación estática

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

  1. Vaya a Azure Portal.

  2. Seleccione Crear un recurso.

  3. Busque Static Web Apps.

  4. Seleccione Aplicación web estática.

  5. Selecciona Crear.

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

    Propiedad Importancia
    Subscription Nombre de tu suscripción de Azure.
    Grupo 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.
    Fuente GitHub

  7. Seleccione Iniciar sesión con GitHub y autentíquese con GitHub, si se le solicita.

  8. Escriba los siguientes valores de GitHub.

    Propiedad Importancia
    Organización Seleccione la organización de GitHub adecuada.
    Repositorio Seleccione nextjs-starter.
    Rama Seleccione main (principal).

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

    Propiedad Importancia
    Ubicación de la aplicación Escriba / en el cuadro.
    Ubicación de api Deje este cuadro vacío.
    Ubicación de salida Escriba out en el cuadro.

3. Revisar y crear

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

  2. Seleccione Crear para comenzar la creación de la aplicación web estática de App Service 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 URL para abrir la aplicación implementada.

Si el sitio web no se carga inmediatamente, la compilación todavía se está ejecutando. Para comprobar el estado del flujo de trabajo Acciones, vaya al panel Acciones del repositorio:

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

Una vez completado el flujo de trabajo, puede actualizar el explorador para ver la aplicación web.

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

4. Sincronizar cambios

Al crear la aplicación, Azure Static Web Apps creó un archivo de Acciones de GitHub en el repositorio. Para sincronizar con el servidor, descargue la versión más reciente a su repositorio local.

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

Configuración de la representación estática

De forma predeterminada, la aplicación se trata como una aplicación de Next.js representada híbrida, pero para seguir usándola como generador de sitios estáticos, debe actualizar la tarea de implementación.

  1. Abra el repositorio en Visual Studio Code.

  2. Navegue al archivo de GitHub Actions que Azure Static Web Apps agregó a su repositorio en .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Actualice el trabajo De compilación e implementación para tener una variable de entorno de IS_STATIC_EXPORT establecida en true:

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. Confirme los cambios en Git e insértelos en GitHub.

    git commit -am "Configuring static site generation" && git push

Una vez completada la compilación, el sitio se renderizará estáticamente.

Limpieza de recursos

Si no va a seguir usando esta aplicación, puede eliminar la instancia de Azure Static Web Apps mediante los pasos siguientes.

  1. Abra Azure Portal.
  2. Busque my-nextjs-group en la barra de búsqueda superior.
  3. Seleccione el nombre del grupo.
  4. Seleccione Eliminar.
  5. Seleccione Sí para confirmar la acción de eliminación.

Pasos siguientes

Configuración de un dominio personalizado

  • Last updated on