Compartilhar via

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

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

Pré-requisitos

1. Configurar um aplicativo de Next.js

Em vez de usar a CLI Next.js para criar seu aplicativo, você pode usar um repositório inicial. O repositório inicial contém um aplicativo Next.js existente que dá suporte a 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 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. Vá para o aplicativo de Next.js clonado recentemente.

    cd nextjs-starter

  5. Instale as dependências.

    npm install

  6. Inicie o aplicativo Next.js em desenvolvimento.

    npm run dev

  7. Vá para http://localhost:3000 abrir o aplicativo, no qual você deverá ver o seguinte site aberto no navegador preferencial:

Iniciar Next.js aplicativo

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

Página detalhes

2. Criar 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. Acesse 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 Value
    Subscription 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ê.
    Fonte GitHub

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

  8. Insira os valores do GitHub a seguir.

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

  9. Na seção Detalhes do Build , selecione Personalizar nas Predefinições de Build. Adicione os seguintes valores quanto à configuração de build.

    Propriedade Value
    Local do aplicativo Insira / na caixa.
    Local da API Deixe essa caixa vazia.
    Local de saída Insira out na caixa.

3. Revisar 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. Depois que a implantação for concluída, selecione vá 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 ainda estará em execução. Para verificar o status do fluxo de trabalho de Ações, navegue até o painel de Ações 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 para exibir seu aplicativo Web.

Agora, todas as alterações feitas no main branch iniciam uma nova compilaçã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 do GitHub Actions em seu repositório. Sincronize com o servidor puxando para baixo o mais recente para o repositório local.

Retorne ao terminal e execute o comando git pull origin maina seguir.

Configurando a renderização estática

Por padrão, o aplicativo é tratado como um aplicativo 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 de Compilação e Implantação 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 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 quiser 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

  • Last updated on