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

  • Artículo

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

1. 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

  7. 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

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 que esté en Azure, podrá 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 Static Web App.

  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, si se le solicita.

  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.

3. 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 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 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 que se complete el flujo de trabajo, puede actualizar el explorador para ver la aplicación web.

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

4. 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.

Configuración de la representación estática

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

  1. Abra el directorio en Visual Studio Code.

  2. Vaya al archivo Acciones de GitHub que Azure Static Web Apps agregó al 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 representará 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 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 Eliminar.
  5. Seleccione Sí para confirmar la acción de eliminación.

Pasos siguientes

Configuración de un dominio personalizado