Guia de início rápido: crie seu primeiro aplicativo Web estático

Os Aplicativos Web Estáticos do Azure publicam um site em um ambiente de produção criando aplicativos a partir de um repositório do Azure DevOps ou GitHub. Neste início rápido, você implanta um aplicativo Web em aplicativos Web estáticos do Azure usando o portal do Azure.

Pré-requisitos

• Se você não tiver uma assinatura do Azure, crie uma conta de avaliação gratuita.
• Conta do GitHub

• Se você não tiver uma assinatura do Azure, crie uma conta de avaliação gratuita.
• Organização do Azure DevOps

Criar um repositório

Este artigo usa um repositório de modelos do GitHub para facilitar os primeiros passos. O modelo apresenta um aplicativo inicial para implantar nos Aplicativos Web Estáticos do Azure.

Sem enquadramento

1. Navegue até o seguinte local para criar um novo repositório:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. Nomeie seu repositório como my-first-static-web-app

Nota

Os Aplicativos Web Estáticos do Azure exigem pelo menos um arquivo HTML para criar um aplicativo Web. O repositório criado nesta etapa inclui um único arquivo index.html .

Angular

1. Navegue até o seguinte local para criar um novo repositório:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Nomeie seu repositório como my-first-static-web-app

Blazor

1. Navegue até o seguinte local para criar um novo repositório:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. Nomeie seu repositório como my-first-static-web-app

React

1. Navegue até o seguinte local para criar um novo repositório:
   1. https://github.com/staticwebdev/react-basic/generate
2. Nomeie seu repositório como my-first-static-web-app

Vue

1. Navegue até o seguinte local para criar um novo repositório:
   1. https://github.com/staticwebdev/vue-basic/generate
2. Nomeie seu repositório como my-first-static-web-app

Selecione Create repository (Criar repositório).

Criar um repositório

Este artigo usa um repositório do Azure DevOps para facilitar os primeiros passos. O repositório apresenta um aplicativo inicial usado para implantar usando os Aplicativos Web Estáticos do Azure.

1. Iniciar sessão no Azure DevOps.

2. Selecione Novo repositório.

3. Na janela Criar novo projeto, expanda o menu Avançado e faça as seguintes seleções:

   Definição	Value
   Project	Digite my-first-web-static-app.
   Visibility	Selecione Privado.
   Controlo de versões	Selecione Git.
   Processo de item de trabalho	Selecione a opção que melhor se adapta aos seus métodos de desenvolvimento.

4. Selecione Criar.

5. Selecione o item de menu Repositórios .

6. Selecione o item de menu Arquivos.

7. Em Importar cartão do repositório, selecione Importar.

8. Copie um URL de repositório para a estrutura de sua escolha e cole-o na caixa URL de clonagem.

   Sem enquadramento

   https://github.com/staticwebdev/vanilla-basic.git

   Angular

   https://github.com/staticwebdev/angular-basic.git

   Blazor

   https://github.com/staticwebdev/blazor-basic.git

   React

   https://github.com/staticwebdev/react-basic.git

   Vue

   https://github.com/staticwebdev/vue-basic.git

9. Selecione Importar e aguarde a conclusão do processo de importação.

Criar uma aplicação Web estática

Agora que o repositório foi criado, você pode criar um aplicativo Web estático no portal do Azure.

1. Aceda ao portal do Azure.
2. Selecione Criar um Recurso.
3. Pesquise por aplicativos Web estáticos.
4. Selecione Aplicações Web Estáticas.
5. Selecione Criar.

Na seção Noções básicas, comece configurando seu novo aplicativo e vinculando-o a um repositório do GitHub.

Definição	Value
Subscrição	Selecione a subscrição do Azure.
Grupo de Recursos	Selecione o link Criar novo e insira static-web-apps-test na caixa de texto.
Nome	Digite my-first-static-web-app na caixa de texto.
Tipo de plano	Selecione Gratuito.
Origem	Selecione GitHub e entre no GitHub, se necessário.

Se necessário, entre com o GitHub e insira as seguintes informações do repositório.

Definição	Value
Organization	Selecione a sua organização.
Repositório	Selecione my-first-web-static-app.
Filial	Selecione principal.

Nota

Se não vir uma lista de repositórios:

• Talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure no GitHub. Navegue até seu perfil do GitHub e vá para Configurações Aplicativos OAuth Autorizados, selecione Aplicativos Web Estáticos do Azure e selecione Conceder.>>

• Talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure em sua organização do Azure DevOps. Você deve ser um proprietário da organização para conceder as permissões. Solicite acesso a aplicativos de terceiros via OAuth. Para obter mais informações, consulte Autorizar acesso a APIs REST com OAuth 2.0.

Na seção Noções básicas, comece configurando seu novo aplicativo e vinculando-o a um repositório do Azure DevOps.

Definição	Value
Subscrição	Selecione a subscrição do Azure.
Grupo de Recursos	Selecione o link Criar novo e insira static-web-apps-test na caixa de texto.
Nome	Digite my-first-static-web-app na caixa de texto.
Tipo de plano	Selecione Gratuito.
Azure Functions e detalhes de preparo	Selecione a região mais próxima de si.
Origem	Selecione Azure DevOps.
Organization	Selecione a sua organização.
Project	Selecione o seu projeto.
Repositório	Selecione my-first-web-static-app.
Filial	Selecione principal.

Nota

Verifique se a ramificação que você está usando não está protegida e se você tem permissões suficientes para emitir um push comando. Para verificar, navegue até seu repositório de DevOps e vá para Repos ->Branches e selecione Mais opções. Em seguida, selecione sua ramificação e, em seguida , Políticas de filial para garantir que as políticas necessárias não estejam habilitadas.

Na seção Detalhes da compilação, adicione detalhes de configuração específicos à sua estrutura de front-end preferida.

Sem enquadramento

1. No menu suspenso Predefinições de compilação, selecione Personalizado.
2. Na caixa Localização da aplicação , introduza ./src.
3. Deixe a caixa Localização da api vazia.
4. Na caixa Local de saída , digite ./src.

Angular

1. Na lista suspensa Predefinições de compilação, selecione Angular.
2. Mantenha o valor padrão na caixa Local do aplicativo.
3. Deixe a caixa Localização da api vazia.
4. Na caixa Local de saída , digite dist/angular-basic.

Blazor

1. Na lista suspensa Predefinições de compilação, selecione Blazor.
2. Mantenha o valor padrão de Cliente na caixa Local do aplicativo.
3. Deixe a caixa Localização da api vazia.
4. Mantenha o valor padrão de wwwroot na caixa Local de saída.

React

1. No menu suspenso Predefinições de compilação, selecione Reagir.
2. Mantenha o valor padrão na caixa Local do aplicativo.
3. Deixe a caixa Localização da api vazia.
4. Na caixa Local de saída , insira build.

Vue

1. Na lista suspensa Predefinições de compilação, selecione Vue.js.
2. Mantenha o valor padrão na caixa Local do aplicativo.
3. Deixe a caixa Localização da api vazia.
4. Mantenha o valor padrão na caixa Local do artefato do aplicativo.

Selecione Rever + criar.

Selecione Criar.

Nota

Você pode editar o arquivo de fluxo de trabalho para alterar esses valores depois de criar o aplicativo.

Selecione Criar.

Selecione Ir para recurso.

Ver o site

Há dois aspetos na implantação de um aplicativo estático. O primeiro cria os recursos subjacentes do Azure que compõem seu aplicativo. O segundo é um fluxo de trabalho que cria e publica seu aplicativo.

Antes de poder ir para o novo site estático, a compilação de implantação deve primeiro concluir a execução.

A janela Visão geral de aplicativos Web estáticos exibe uma série de links que ajudam você a interagir com seu aplicativo Web.

1. Selecionar no banner que diz, Selecione aqui para verificar o status de suas execuções de Ações do GitHub leva você para as Ações do GitHub em execução no seu repositório. Depois de verificar se o trabalho de implantação está concluído, você pode acessar seu site por meio da URL gerada.

2. Quando o fluxo de trabalho de Ações do GitHub estiver concluído, você poderá selecionar o link de URL para abrir o site em uma nova guia.

Quando o fluxo de trabalho estiver concluído, você poderá selecionar o link URL para abrir o site em uma nova guia.

Clean up resources (Limpar recursos)

Se não pretender continuar a utilizar esta aplicação, pode eliminar a instância das Aplicações Web Estáticas do Azure através dos seguintes passos:

1. Abra o portal do Azure.
2. Pesquise my-first-web-static-app na barra de pesquisa superior.
3. Selecione o nome do aplicativo.
4. Selecione Eliminar.
5. Selecione Sim para confirmar a ação de exclusão (essa ação pode levar alguns minutos para ser concluída).

Próximos passos

Adicionar uma API