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

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

Neste tutorial, aprenderás como:

• Criar um aplicativo VuePress
• Configurar um Azure Static Web Apps
• Implantar o aplicativo VuePress no Azure

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Se não tiver uma, pode criar uma conta gratuitamente.
• Uma conta GitHub. Se não tiver uma, pode criar uma conta gratuitamente.
• Uma configuração do Git instalada. Se você não tiver um, você pode instalar o Git.
• Node.js instalado.

Criar um aplicativo VuePress

Crie um aplicativo VuePress a partir da interface de linha de comando (CLI):

1. Crie uma nova pasta para o aplicativo VuePress.

   mkdir static-site
   

2. Adicione um arquivo README.md a pasta.

   echo '# Hello From VuePress' > README.md
   

3. Inicialize o arquivo package.json .

   npm init -y
   

4. Adicionar VuePress como um devDependencyarquivo .

   npm install --save-dev vuepress
   

5. Abra o arquivo package.json em um editor de texto e adicione um comando build à scripts seção.

   ...
   "scripts": {
       "build": "vuepress build"
   }
   ...
   

6. Crie um arquivo .gitignore para excluir a pasta node_modules .

   echo 'node_modules' > .gitignore
   

7. Inicialize um repositório Git.

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

Envie seu aplicativo para o GitHub

Você precisa de um repositório no GitHub para se conectar aos 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/new chamado vuepress-static-app.

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

   git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
   

3. Empurre seu repositório local para o GitHub.

   git push --set-upstream origin main
   

Implantar seu 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. Ir para o portal do Azure

2. Selecione Criar um recurso

3. Pesquisar aplicativos Web estáticos

4. Selecionar aplicativos Web estáticos

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-vuepress-grupo
   Nome	vuepress-static-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.

8. Insira os seguintes valores do GitHub.

   Propriedade	Valor
   Organização	Selecione sua organização desejada no GitHub.
   Repositório	Selecione vuepress-static-app.
   Ramo	Selecione principal.

   Observação

   Se você não vir nenhum repositório, talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure no GitHub. Navegue até o repositório do GitHub e vá para Configurações > de Aplicativos > OAuth Autorizados, selecione Aplicativos Web Estáticos do Azure e selecione Conceder. Para repositórios de organização, você deve ser um proprietário da organização para conceder as permissões.

9. Na seção Detalhes da compilação , selecione VuePress na lista suspensa Predefinições de compilação e mantenha os valores padrão.

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 tela de recurso, selecione o link de URL para abrir seu aplicativo implantado. Talvez seja necessário aguardar um ou dois minutos para que as Ações do GitHub sejam concluídas.

   

Limpeza de recursos

Se não pretender continuar a utilizar esta aplicação, pode eliminar o recurso Azure Static Web App através dos seguintes passos:

1. Abra o portal do Azure
2. Na barra de pesquisa superior, procure a sua aplicação pelo nome que forneceu anteriormente
3. Clique no aplicativo
4. Clique no botão Excluir
5. Clique em Sim para confirmar a ação de exclusão

Próximos passos

Adicionar um domínio personalizado