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

  • Artigo

Neste tutorial, aprenda a implantar um site estático gerado por Next.js em Aplicativos Web Estáticos do Azure. Para obter mais informações sobre os detalhes do Next.js, consulte o leia-me do modelo inicial.

Pré-requisitos

1. Configurar um aplicativo Next.js

Em vez de usar a CLI do Next.js para criar seu aplicativo, você poderá usar um repositório para iniciantes. O repositório inicial contém um aplicativo Next.js existente que oferece suporte a rotas dinâmicas.

Para começar, crie um novo repositório em sua conta do GitHub utilizando um modelo de repositório.

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

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

  3. Em seguida, clone o novo repositório em seu computador. 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. Acesse o aplicativo Next.js recém-clonado.

    cd nextjs-starter

  5. Instale as dependências.

    npm install

  6. Inicie o aplicativo Next.js em desenvolvimento.

    npm run dev

  7. Acesse http://localhost:3000 para abrir o aplicativo, no qual você verá o seguinte site aberto em seu navegador preferido:

Iniciar o aplicativo Next.js

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

Página de detalhes

2. Criar um aplicativo estático

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

  1. Vá para o Portal do Azure.

  2. Selecione Criar um recurso.

  3. Pesquise Aplicativos Web Estáticos.

  4. Selecione Aplicativo Web Estático.

  5. Selecione Criar.

  6. Na guia Básico, insira os valores a seguir.

    Propriedade Valor
    Assinatura Seu nome da assinatura do Azure.
    Grupo de recursos my-nextjs-group
    Nome my-nextjs-app
    Tipo de plano Gratuito
    Região da API do Azure Functions e dos ambientes de preparo Selecione a região mais próxima de você.
    Origem GitHub

  7. Selecione Fazer login com o GitHub e autenticação com o GitHub, se solicitado.

  8. Insira os valores do GitHub a seguir.

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

  9. Na seção Detalhes do build, selecione Personalizado nas Predefinições de build. Adicione os valores a seguir à configuração de build.

    Propriedade Valor
    Localização do aplicativo Insira / na caixa.
    Localização da API Deixe essa caixa vazia.
    Local de saída Insira sair na caixa.

3. Examinar e criar

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

  2. Selecione Criar para iniciar a criação do aplicativo Web estático do Serviço de Aplicativo e provisione uma GitHub Actions para a implantação.

  3. Assim que concluir a implantação, selecione Ir para o recurso.

  4. Na janela Visão Geral, selecione o link da URL para abrir seu aplicativo implantado.

Se o site não for carregado imediatamente, o build permanecerá em execução. Para verificar o status do fluxo de trabalho do Actions, navegue até o painel Actions do seu repositório:

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

Depois que o fluxo de trabalho for concluído, você poderá atualizar o navegador e exibir seu aplicativo Web.

Agora, qualquer alteração feita no branch main inicia um novo build ou uma implantação do seu site.

4. Sincronizar alterações

Quando você criou o aplicativo, os Aplicativos Web Estáticos do Azure criaram um arquivo do GitHub Actions em seu repositório. Sincronize com o servidor puxando a versão mais recente para seu repositório local.

Retorne ao terminal e execute o comando git pull origin main.

Configurando a renderização estática

Por padrão, o aplicativo é tratado como um aplicativo de Next.js renderizado híbrido, mas para continuar usando-o 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 GitHub Actions 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 e Deploy para ter uma variável de ambiente de IS_STATIC_EXPORT definida 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 por push para o GitHub.

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

Depois que o build for concluído, o site será renderizado estaticamente.

Limpar os recursos

Se você não for continuar a usar este aplicativo, poderá excluir a instância dos Aplicativos Web Estáticos do Azure por meio das etapas a seguir.

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

Próximas etapas

Configurar um domínio personalizado