Partilhar via

Implantar sites Next.js renderizados estáticos nos Aplicativos Web Estáticos do Azure

Neste tutorial, aprenda a implantar um site estático gerado porNext.js nos Aplicativos Web Estáticos do Azure. Para obter mais informações sobre as especificidades do Next.js, consulte o README do modelo inicial.

Pré-requisitos

1. Configurar uma aplicação Next.js

Em vez de usar a Next.js CLI para criar seu aplicativo, você pode usar um repositório inicial. O repositório inicial contém um aplicativo Next.js existente que suporta rotas dinâmicas.

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

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

  2. Nomeie o repositório nextjs-starter

  3. Em seguida, clone o novo repositório para sua máquina. Certifique-se de substituir <YOUR_GITHUB_ACCOUNT_NAME> pelo nome da sua conta.

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

  4. Vá para o aplicativo Next.js recém-clonado.

    cd nextjs-starter

  5. Instale dependências.

    npm install

  6. Iniciar o aplicativo Next.js no modo de desenvolvimento.

    npm run dev

  7. Vá para http://localhost:3000 abrir o aplicativo, onde você deve ver o seguinte site aberto em seu navegador preferido:

Iniciar Next.js aplicação

Ao selecionar uma estrutura ou biblioteca, você verá uma página de detalhes sobre o item selecionado:

Página de detalhes

2. Crie um aplicativo estático

As etapas a seguir mostram como vincular seu aplicativo aos Aplicativos Web Estáticos do Azure. Uma vez no Azure, você pode implantar o aplicativo em um ambiente de produção.

  1. Vai para o portal Azure.

  2. Selecione Criar um recurso.

  3. Pesquise por aplicativos Web estáticos.

  4. Selecione Aplicativo Web estático.

  5. Selecione Criar.

  6. Na guia Noções básicas, insira os seguintes valores.

    Propriedade Valor
    Subscription Seu nome de assinatura do Azure.
    Grupo de recursos my-nextjs-group
    Nome my-nextjs-app
    Tipo de plano Gratuito
    Região para API do Azure Functions e ambientes de preparo Selecione a região mais próxima de si.
    Source GitHub

  7. Selecione Entrar com o GitHub e autentique-se com o GitHub, se solicitado.

  8. Insira os seguintes valores do GitHub.

    Propriedade Valor
    Organização Selecione a organização GitHub apropriada.
    Repositório Selecione nextjs-starter.
    Filial Selecione principal.

  9. Na seção Detalhes da compilação , selecione Personalizar nas predefinições de compilação. Adicione os seguintes valores para a configuração da build.

    Propriedade Valor
    Localização da aplicação Insira / na caixa.
    Localização da api Deixe esta caixa vazia.
    Local de saída Insira "out" na caixa.

3. Rever e criar

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

  2. Selecione Criar para iniciar a criação do Aplicativo Web Estático do Serviço de Aplicativo e provisionar uma Ação do GitHub para implantação.

  3. Quando a implantação for concluída, selecione Ir para o recurso.

  4. Na janela Visão geral , selecione o link URL para abrir o aplicativo implantado.

Se o site não carregar imediatamente, a compilação ainda está em execução. Para verificar o status do workflow de Actions, navegue até o painel de Actions do seu repositório.

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

Quando o fluxo de trabalho estiver concluído, você poderá atualizar o navegador para exibir seu aplicativo Web.

Agora, qualquer alteração feita na ramificação main inicia uma nova construção e implantação do seu site.

4. Sincronizar alterações

Quando você criou o aplicativo, os Aplicativos Web Estáticos do Azure criaram um arquivo de Ações do GitHub em seu repositório. Sincronize com o servidor puxando para baixo o mais recente para o seu repositório local.

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

Configurando a renderização estática

Por padrão, o aplicativo é tratado como um aplicativo Next.js renderizado híbrido, mas para continuar a usá-lo como um gerador de site estático, você precisa atualizar a tarefa de implantação.

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

  2. Navegue até o arquivo de Ações do GitHub que os Aplicativos Web Estáticos do Azure adicionaram ao seu repositório em .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Atualize o trabalho Build and Deploy para ter uma variável de ambiente definida IS_STATIC_EXPORT como 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 as alterações no git e envie-as para o GitHub.

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

Quando a compilação for concluída, o site será renderizado estaticamente.

Limpeza de recursos

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

  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 exclusão.

Próximos passos

Configurar um domínio personalizado

  • Last updated on