Implementar sites de Next.js compostos estáticos no Aplicações Web Estáticas do Azure

  • Artigo

Neste tutorial, saiba como implementar um site estático gerado Next.js para Aplicações Web Estáticas do Azure. Para obter mais informações sobre Next.js específicos, veja o readme do modelo de arranque.

Pré-requisitos

1. Configurar uma aplicação Next.js

Em vez de utilizar a CLI Next.js para criar a sua aplicação, pode utilizar um repositório inicial. O repositório starter contém uma aplicação de Next.js existente que suporta rotas dinâmicas.

Para começar, crie um novo repositório na sua conta do GitHub a partir de um repositório de modelos.

  1. Ir para https://github.com/staticwebdev/nextjs-starter/generate

  2. Atribua o nome nextjs-starter ao repositório

  3. Em seguida, clone o novo repositório para o seu computador. Certifique-se de que substitui <YOUR_GITHUB_ACCOUNT_NAME> pelo nome da sua conta.

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

  4. Aceda à aplicação Next.js recentemente clonada.

    cd nextjs-starter

  5. Instalar dependências.

    npm install

  6. Inicie Next.js aplicação em desenvolvimento.

    npm run dev

  7. Aceda a http://localhost:3000 abrir a aplicação, onde deverá ver o seguinte site aberto no seu browser preferido:

Iniciar Next.js aplicação

Quando seleciona uma arquitetura ou biblioteca, verá uma página de detalhes sobre o item selecionado:

Página Detalhes

2. Criar uma aplicação estática

Os passos seguintes mostram como ligar a sua aplicação a Aplicações Web Estáticas do Azure. Uma vez no Azure, pode implementar a aplicação num ambiente de produção.

  1. Aceda ao Portal do Azure.

  2. Selecione Criar um Recurso.

  3. Procure Aplicações Web Estáticas.

  4. Selecione Aplicação Web Estática.

  5. Selecione Criar.

  6. No separador Noções básicas , introduza os seguintes valores.

    Propriedade Valor
    Subscrição O nome da sua subscrição do Azure.
    Grupo de recursos my-nextjs-group
    Nome my-nextjs-app
    Tipo de plano Gratuito
    Região para Funções do Azure API e ambientes de teste Selecione uma região mais próxima de si.
    Origem GitHub

  7. Selecione Iniciar sessão com o GitHub e autenticar com o GitHub, se lhe for pedido.

  8. Introduza os seguintes valores do GitHub.

    Propriedade Valor
    Organização Selecione a organização do GitHub adequada.
    Repositório Selecione nextjs-starter.
    Ramo Selecione principal.

  9. Na secção Detalhes da Compilação , selecione Personalizar nas Predefinições de Compilação. Adicione os seguintes valores como para a configuração da compilação.

    Propriedade Valor
    Localização da aplicação Introduza / na caixa.
    Localização da API Deixe esta caixa vazia.
    Localização da saída Introduza na caixa.

3. Rever e criar

  1. Selecione Rever + Criar para verificar se os detalhes estão todos corretos.

  2. Selecione Criar para iniciar a criação do Serviço de Aplicações Aplicação Web Estática e aprovisione um GitHub Actions para implementação.

  3. Assim que a implementação estiver concluída, selecione Ir para recurso.

  4. Na janela Descrição geral , selecione a ligação URL para abrir a aplicação implementada.

Se o site não carregar imediatamente, a compilação ainda está em execução. Para verificar o estado do fluxo de trabalho Ações, navegue para o dashboard Ações do seu repositório:

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

Assim que o fluxo de trabalho estiver concluído, pode atualizar o browser para ver a sua aplicação Web.

Agora, todas as alterações efetuadas ao main ramo iniciam uma nova compilação e implementação do seu site.

4. Sincronizar alterações

Quando criou a aplicação, Aplicações Web Estáticas do Azure criou um ficheiro GitHub Actions no seu repositório. Sincronize com o servidor ao obter as informações mais recentes para o repositório local.

Regresse ao terminal e execute o seguinte comando git pull origin main.

Configurar a Composição Estática

Por predefinição, a aplicação é tratada como uma aplicação Next.js composta híbrida, mas para continuar a utilizá-la como gerador de sites estáticos, tem de atualizar a tarefa de implementação.

  1. Abra o repositório no Visual Studio Code.

  2. Navegue para o ficheiro de GitHub Actions que Aplicações Web Estáticas do Azure adicionado ao repositório em.github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Atualize a tarefa Compilar e Implementar para ter uma variável de ambiente definida IS_STATIC_EXPORT para 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. Consolide as alterações ao git e envie-as para o GitHub.

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

Assim que a compilação estiver concluída, o site será composto estaticamente.

Limpar os recursos

Se não quiser continuar a utilizar esta aplicação, pode eliminar a instância Aplicações Web Estáticas do Azure através dos seguintes passos.

  1. Abra o portal do Azure.
  2. Procure my-nextjs-group na barra de pesquisa superior.
  3. Selecione o nome do grupo.
  4. Selecione Eliminar.
  5. Selecione Sim para confirmar a ação de eliminação.

Passos seguintes

Configurar um domínio personalizado