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

Artigo
01/10/2024

Este artigo demonstra como criar e implementar uma aplicação Web VuePress para Aplicativos Web Estáticos do Azure. O resultado final é uma nova aplicação Aplicativos Web Estáticos do Azure com o GitHub Actions associado que lhe dá controlo sobre a forma como a aplicação é criada e publicada.

Neste tutorial, ficará a saber como:

Criar uma aplicação VuePress
Configurar uma Aplicativos Web Estáticos do Azure
Implementar a aplicação VuePress no Azure

Pré-requisitos

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

Criar uma Aplicação VuePress

Criar uma aplicação VuePress a partir da Interface de Linha de Comandos (CLI):

Crie uma nova pasta para a aplicação VuePress.
```
mkdir static-site
```

Adicione um README.md ficheiro à pasta.

echo '# Hello From VuePress' > README.md

Inicialize o ficheiro package.json .
```
npm init -y
```
Adicione o VuePress como um devDependency.
```
npm install --save-dev vuepress
```
Abra o ficheiro package.json num editor de texto e adicione um comando de compilação à scripts secção.
```
...
"scripts": {
    "build": "vuepress build"
}
...
```
Crie um ficheiro .gitignore para excluir a pasta node_modules .
```
echo 'node_modules' > .gitignore
```

Inicializar um repositório git.

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

Enviar a sua aplicação para o GitHub

Precisa de um repositório no GitHub para ligar a Aplicativos Web Estáticos do Azure. Os passos seguintes mostram-lhe como criar um repositório para o seu site.

Crie um repositório do GitHub em branco (não crie um README) https://github.com/new com o nome vuepress-static-app.
Adicione o repositório do GitHub como remoto ao seu repositório local. Certifique-se de que adiciona o seu nome de utilizador do GitHub em vez do marcador de <YOUR_USER_NAME> posição no seguinte comando.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
```
Envie o seu repositório local para o GitHub.
```
git push --set-upstream origin main
```

Implementar a sua aplicação Web

Os passos seguintes mostram-lhe como criar uma nova aplicação de site estático e implementá-la num ambiente de produção.

Criar a aplicação

Aceda ao Portal do Azure
Selecione Criar um Recurso
Procure Aplicações Web Estáticas
Selecione Static Web Apps
Selecione Criar

No separador Informações Básicas , introduza os seguintes valores.

Propriedade	Valor
Subscrição	O nome da sua subscrição do Azure.
Grupo de recursos	my-vuepress-group
Nome	vuepress-static-app
Tipo de plano	Gratuito
Região para Azure Functions API e ambientes de teste	Selecione uma região mais próxima de si.
Origem	GitHub

Selecione Iniciar sessão com o GitHub e autentique-se com o GitHub.

Introduza os seguintes valores do GitHub.

Propriedade	Valor
Organização	Selecione a organização do GitHub pretendida.
Repositório	Selecione vuepress-static-app.
Ramo	Selecione principal.

Nota

Se não vir repositórios, poderá ter de autorizar Aplicativos Web Estáticos do Azure no GitHub. Navegue para o seu repositório do GitHub e aceda a Definições Aplicações > OAuth Apps Autorizadas>, selecione Aplicativos Web Estáticos do Azure e, em seguida, selecione Conceder. Para os repositórios da organização, tem de ser proprietário da organização para conceder as permissões.

Na secção Detalhes da Compilação, selecione VuePress no menu pendente Criar Predefinições e mantenha os valores predefinidos.

Rever e criar

Selecione Rever + Criar para verificar se os detalhes estão corretos.
Selecione Criar para iniciar a criação do Serviço de Aplicativo Aplicação Web Estática e aprovisionar um GitHub Actions para implementação.
Quando a implementação estiver concluída, selecione Ir para recurso.
No ecrã de recursos, selecione a ligação URL para abrir a aplicação implementada. Poderá ter de aguardar um minuto ou dois para que o GitHub Actions seja concluído.

Limpar os recursos

Se não quiser continuar a utilizar esta aplicação, pode eliminar o recurso da Aplicação Web Estática do Azure através dos seguintes passos:

Abra o portal do Azure
Na barra de pesquisa superior, procure a sua aplicação pelo nome que indicou anteriormente
Clique na aplicação
Clique no botão Eliminar
Clique em Sim para confirmar a ação de eliminação

Passos seguintes

Adicionar um domínio personalizado

Partilhar via