Tutorial: Publicar um site do VuePress em Aplicativos Web Estáticos do Azure

Este artigo demonstra como criar e implantar um aplicativo web VuePress para Aplicativos Web Estáticos do Azure. O resultado final é um novo aplicativo de Aplicativos Web Estáticos do Azure com GitHub Actions associadas que lhe dão controle sobre como o aplicativo é criado e publicado.

Neste tutorial, você aprenderá como:

  • Criar um aplicativo VuePress
  • Configurar Aplicativos Web Estáticos do Azure
  • Implantar o aplicativo VuePress no Azure

Pré-requisitos

Criar um Aplicativo VuePress

Crie um aplicativo VuePress na CLI (Interface de Linha de Comando):

  1. Crie uma nova pasta para o aplicativo VuePress.

    mkdir static-site
    
  2. Adicione um arquivo README.md à pasta.

    echo '# Hello From VuePress' > README.md
    
  3. Inicialize o arquivo package.json.

    npm init -y
    
  4. Adicione VuePress como um devDependency.

    npm install --save-dev vuepress
    
  5. Abra o arquivo package.json em um editor de texto e adicione um comando de compilação à seção scripts.

    ...
    "scripts": {
        "build": "vuepress build"
    }
    ...
    
  6. Crie um arquivo .gitignore para excluir a pasta módulos_do nó.

    echo 'node_modules' > .gitignore
    
  7. Inicialize um repositório Git.

     git init
     git add -A
     git commit -m "initial commit"
    

Envie por push seu aplicativo para o GitHub.

Você precisa de um repositório no GitHub para conectar os Aplicativos Web Estáticos do Azure. As etapas a seguir mostram como criar um repositório para seu site.

  1. Crie um repositório GitHub em branco (não crie um README) a partir do https://github.com/newvuepress-static-app nomeado.

  2. Adicione o repositório do GitHub como sendo remoto ao seu repositório local. Adicione o nome de usuário do GitHub no lugar do espaço reservado <YOUR_USER_NAME> no comando a seguir.

    git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
    
  3. Envie por push seu repositório local para o GitHub.

    git push --set-upstream origin main
    

Implantar o aplicativo Web

As etapas a seguir mostram como criar um novo aplicativo de site estático e implantá-lo em um ambiente de produção.

Criar o aplicativo

  1. Navegue até o portal do Azure

  2. Selecione Criar um Recurso

  3. Pesquise por Aplicativos Web Estáticos

  4. Selecione Aplicativos Web Estáticos

  5. Escolha Criar

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

    Propriedade Valor
    Assinatura Seu nome da assinatura do Azure.
    Grupo de recursos my-vuepress-group
    Nome vuepress-static-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 Entrar com o GitHub e faça a autenticação no GitHub.

  8. Insira os valores do GitHub a seguir.

    Propriedade Valor
    Organização Selecione a organização do GitHub desejada.
    Repositório Selecione vuepress-static-app.
    Branch Selecione main.
  9. Na seção Detalhes do Build, selecione VuePress no menu suspenso Predefinições de Build e mantenha os valores padrão.

Examinar e criar

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

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

  3. Assim que a implantação for concluída, clique em Ir para o recurso.

  4. Na tela de recursos, clique no link URL para abrir o aplicativo implantado. Talvez seja necessário aguardar um minuto ou dois para que a GitHub Action seja concluída.

    Aplicativo implantado

Limpar os recursos

Se você não quiser continuar usando esse aplicativo, poderá excluir o recurso Aplicativo Web Estático do Azure com as seguintes etapas:

  1. Abra o portal do Azure
  2. Na barra de pesquisa superior, pesquise seu aplicativo pelo nome fornecido anteriormente
  3. Clique no aplicativo
  4. Clique no botão Excluir
  5. Clique em Sim para confirmar a ação

Próximas etapas