Guia de Início Rápido: Criar seu primeiro aplicativo Web estático

Os Aplicativos Web Estáticos do Azure publicam um site em um ambiente de produção por meio da criação de aplicativos em um Azure DevOps ou repositório GitHub. Neste guia de início rápido, você implantará um aplicativo Web nos 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.
• 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 a introdução. O modelo apresenta um aplicativo inicial para implantar nos Aplicativos Web Estáticos do Azure.

Nenhuma estrutura

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

Observação

Os Aplicativos Web Estáticos do Azure requerem 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é a seguinte localização para criar um repositório:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Nomeie seu repositório my-first-static-web-app

Blazor

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

React

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

Vue

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

Selecione Criar repositório.

Criar um repositório

Este artigo usa um repositório do Azure DevOps para facilitar a introdução. O repositório apresenta um aplicativo inicial usado para implantação por meio dos Aplicativos Web Estáticos do Azure.

1. Entre no Azure DevOps.

2. Selecione Novo repositório.

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

   Configuração	Valor
   Project	Insira my-first-web-static-app.
   Visibilidade	Selecionar Privada.
   Controle de versão	Selecione Git.
   Processo do item de trabalho	Selecione a opção que melhor se adequa aos métodos de desenvolvimento.

4. Selecione Criar.

5. Selecione o item de menu Repos.

6. Selecione o item de menu Arquivos.

7. No cartão Importar repositório, selecione Importar.

8. Copie uma URL do repositório para a estrutura de sua escolha e cole-a na caixa Clonar URL.

   Nenhuma estrutura

   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 um aplicativo Web estático

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

1. Acesse o portal do Azure.
2. Selecione Criar um recurso.
3. Pesquise Aplicativos Web Estáticos.
4. Selecione Aplicativos Web Estáticos.
5. Selecione Criar.

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

Configuração	Valor
Subscription	Selecione sua assinatura do Azure.
Grupo de recursos	Selecione o link Criar novo e insira static-web-apps-bitbucket na caixa de texto.
Nome	Insira my-first-static-web-app na caixa de texto.
Tipo de plano	Selecione Gratuito.
Origem	Selecione o GitHub e entre no GitHub, se necessário.

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

Configuração	Valor
Organização	Selecione sua organização.
Repositório	Escolha my-first-web-static-app.
Branch	Selecione main.

Observação

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

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

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

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

Configuração	Valor
Subscription	Selecione sua assinatura do Azure.
Grupo de recursos	Selecione o link Criar novo e insira static-web-apps-bitbucket na caixa de texto.
Nome	Insira 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 você.
Origem	Escolha Azure DevOps.
Organização	Selecione sua organização.
Project	Selecione o projeto.
Repositório	Escolha my-first-web-static-app.
Branch	Selecione main.

Observação

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

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

Nenhuma estrutura

1. Na lista suspensa Predefinições de Build, selecione Personalizado.
2. Na caixa Local do aplicativo, insira ./src.
3. Deixe a caixa Local da API vazia.
4. Na caixa Local de saída, insira ./src.

Angular

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

Blazor

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

React

1. Na lista suspensa Predefinições de Build, selecione React.
2. Mantenha o valor padrão na caixa Localização do aplicativo.
3. Deixe a caixa Local da API vazia.
4. Na caixa Local de saída, insira build.

Vue

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

Selecione Examinar + criar.

Selecione Criar.

Observação

Edite o arquivo de fluxo de trabalho para alterar esses valores depois de criar o aplicativo.

Selecione Criar.

Selecione Ir para o recurso.

Exibir o site

Há dois aspectos 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 compila e publica seu aplicativo.

Para você acessar o novo site estático, primeiro, o build de implantação precisa concluir a execução.

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

1. Se você escolher a barra de notificação que indica Clique aqui para verificar o status das suas execuções do GitHub Actions, será levado ao GitHub Actions em execução no repositório. Depois de verificar se o trabalho de implantação foi concluído, acesse o site por meio da URL gerada.

2. Depois que o fluxo de trabalho do GitHub Actions for concluído, selecione o link URL para abrir o site na nova guia.

Depois que o fluxo de trabalho for concluído, selecione o link da URL para abrir o site na nova guia.

Limpar os recursos

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

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 Excluir.
5. Selecione Sim para confirmar a ação de exclusão (essa ação pode levar alguns minutos para ser concluída).

Próximas etapas

Adicionar uma API