Exercício – Introdução

  • 7 minutos

Neste exercício, você cria uma instância do Aplicativo Web Estático do Azure, incluindo uma GitHub Action que cria e publica automaticamente o site.

Este módulo usa recursos disponibilizados para você na área restrita, que fornece acesso temporário gratuito a uma assinatura do Azure, juntamente com os recursos necessários para concluir os exercícios. Ative a área restrita na parte superior desta página. Nos exercícios deste módulo, cada unidade depende do conteúdo criado em um exercício anterior. Por isso, selecione uma estrutura JavaScript a ser usada em todos os exercícios subsequentes.

Criar um repositório

Para começar, crie um repositório usando um modelo do GitHub. Diversos modelos de repositório estão disponíveis, contendo um aplicativo inicial implementado em muitas estruturas de front-end.

  1. Acesse a página criar usando modelo do GitHub para abrir o repositório de modelos.

  2. Se o Proprietário for solicitado, selecione uma de suas contas do GitHub.

  3. Em nome do repositório, insira my-static-web-app-and-api.

  4. Selecione Criar repositório com base no modelo.

    Quando o projeto é criado com base em um modelo, o GitHub cria o repositório em segundo plano.

Executar o aplicativo no local

Agora você tem um repositório do GitHub chamado my-static-web-app-and-api na conta do GitHub. Depois, você clona o repositório do GitHub e executará o código localmente no computador.

  1. Abra uma janela de terminal em seu computador.

    No caso do Windows, é possível inserir cmd na caixa de pesquisa da bandeja do sistema.

  2. Para clonar o repositório em seu computador, cole o código a seguir na janela do prompt de comando.

    Lembre-se de substituir <YOUR_GITHUB_USERNAME> pelo seu nome de usuário do GitHub.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

    Observação

    Em caso de problemas ao copiar no terminal do prompt de comando, clique com o botão direito do mouse no ícone na barra de título e, na guia Propriedades, verifique se a opção Usar Ctrl+Shift+C/V como Copiar/Colar está marcada.

  3. Mude para o diretório do código-fonte clonado.

    cd my-static-web-app-and-api

  4. Acesse o diretório da sua estrutura de front-end preferencial.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Instale as dependências do aplicativo.

    npm install

  6. Verifique se a versão mais recente de cada dependência está instalada com o comando a seguir.

    npm audit fix

  7. Execute o aplicativo cliente de front-end.

    npm start

    npm start

    npm run dev

    npm run serve

Navegar até o aplicativo

Quando o pacote do aplicativo for gerado e compilado, uma guia do navegador será aberta automaticamente para exibir o aplicativo em execução localmente.

O host local do Angular é http://localhost:4200.

Screenshot of the local host for your Angular web app.

O host local do React é http://localhost:3000.

Screenshot of the local host for your React web app.

O host local do Svelte é http://localhost:5000.

Screenshot of the local host for your Svelte web app.

O host local do Vue é http://localhost:8080.

Screenshot of the local host for your Vue web app.

O aplicativo deve dizer Carregando dados..., porque ainda não há dados nem API. Mais adiante nesta lição, você adicionará a API para o aplicativo Web.

No terminal, pressione Ctrl+C para interromper o trabalho em lotes.

Parabéns! Você criou o aplicativo e o viu em execução localmente no navegador. Em seguida, será possível publicar o aplicativo nos Aplicativos Web Estáticos do Azure.

Criar um aplicativo Web estático

Você criou seu repositório do GitHub. Agora você pode criar o aplicativo Web estático usando a extensão dos Aplicativos Web Estáticos do Azure para Visual Studio Code.

Instalar a extensão dos Aplicativos Web Estáticos do Azure para Visual Studio Code

  1. Abra o Visual Studio Code.

  2. No menu superior, selecione Visualizar>Extensões e insira Aplicativos Web Estáticos do Azure na caixa de pesquisa.

  3. Quando a guia de extensão for carregada no Visual Studio Code, selecione Instalar.

Abrir a pasta de aplicativos

  1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

  2. Insira Arquivo: abrir pasta....

  3. Selecione a pasta my-static-web-app-and-api.

  4. Selecione Abrir para abrir a pasta no Visual Studio Code.

Entre no Azure no Visual Studio Code

  1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

  2. Insira Azure: entrar e siga os prompts para se autenticar.

    Importante

    Entre no Azure usando a mesma conta usada para ativar a área restrita no navegador. Ao usar a mesma conta, a Assinatura do Concierge é disponibilizada, oferecendo acesso a recursos gratuitos do Azure durante este tutorial.

Selecionar sua assinatura

  1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

  2. Insira Azure: selecionar assinaturas e desmarque todas as seleções, exceto a Assinatura do Concierge.

    Screenshot showing concierge subscription is selected.

Confirmar alterações

Quando você instalou as dependências do aplicativo, alguns dos arquivos do projeto foram atualizados no processo. Para continuar, é necessário confirmar essas alterações no repositório.

  1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

  2. Insira e selecione Git: fazer commit de tudo.

  3. Insira o commit inicial no início do arquivo.

  4. Salve e feche o arquivo de commit do Git.

    No momento, não é necessário sincronizar suas alterações com o servidor. As atualizações são copiadas para o GitHub ao publicar o aplicativo Web estático.

Criar o aplicativo da web estático

As sessões autenticadas do Azure e do GitHub atuais são necessárias para criar um aplicativo Web estático. Se você ainda não estiver conectado a ambos os provedores, a extensão solicitará que você faça isso durante o processo de criação.

  1. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

  1. Insira e selecione Aplicativos Web Estáticos do Azure: criar aplicativo Web estático....

    Insira os valores a seguir para o restante dos prompts da paleta de comandos.

    Prompt Valor
    Subscription Selecionar a Assinatura do Concierge
    Nome Inserir my-static-web-app-and-api
    Região Selecione a região mais próxima de você
    Predefinição Selecionar Angular
    Localização do código do aplicativo Inserir angular-app
    local de saída Inserir dist/angular-app

  1. Insira e selecione Aplicativos Web Estáticos do Azure: criar aplicativo Web estático....

    Insira os valores a seguir para o restante dos prompts da paleta de comandos.

    Prompt Valor
    Subscription Selecionar a Assinatura do Concierge
    Nome Inserir my-static-web-app-and-api
    Região Selecione a região mais próxima de você
    Predefinição Selecione React
    Localização do código do aplicativo Inserir react-app
    local de saída Insira dist

  1. Insira e selecione Aplicativos Web Estáticos do Azure: criar aplicativo Web estático....

    Insira os valores a seguir para o restante dos prompts da paleta de comandos.

    Prompt Valor
    Subscription Selecionar a Assinatura do Concierge
    Nome Inserir my-static-web-app-and-api
    Região Selecione a região mais próxima de você
    Predefinição Selecionar Svelte
    Localização do código do aplicativo Inserir svelte-app
    local de saída Inserir public

  1. Insira e selecione Aplicativos Web Estáticos do Azure: criar aplicativo Web estático....

    Insira os valores a seguir para o restante dos prompts da paleta de comandos.

    Prompt Valor
    Subscription Selecionar a Assinatura do Concierge
    Nome Inserir my-static-web-app-and-api
    Região Selecione a região mais próxima de você
    Predefinição Selecionar Vue
    Localização do código do aplicativo Inserir vue-app
    local de saída Insira dist

Observação

Este repositório é diferente de outros projetos que você possa ter usado anteriormente. Ele contém quatro aplicativos diferentes em quatro pastas distintas. Cada pasta contém um aplicativo criado com uma estrutura JavaScript diferente. Normalmente, haveria apenas um aplicativo na raiz do repositório, por isso, o padrão / é usado para o local do caminho do aplicativo. Este é um ótimo exemplo de como os Aplicativos Web Estáticos do Azure permitem que você comece com a configuração dos locais: você tem controle total sobre como o aplicativo é criado.

  1. Depois que o aplicativo é criado, uma notificação de confirmação é mostrada no Visual Studio Code.

    Screenshots of the Open Actions in GitHub or View/Edit Config pop-up window.

    Enquanto você configura a compilação, o Visual Studio Code informa o status dela.

    Screenshot showing production status as waiting for deployment.

  2. Você pode exibir o progresso da implantação usando o GitHub Actions, basta expandir o menu Ações.

    Screenshot showing how to see GitHub Actions.

    Após a implantação, navegue diretamente para o site.

  3. Para ver o site no navegador, clique com o botão direito do mouse no projeto na extensão de Aplicativos Web Estáticos e selecione Procurar no Site.

    Screenshot showing how to use the Visual Studio Code extension to browse the static web app.

    O aplicativo deve dizer Carregando dados..., porque ainda não há dados nem API. Adicione a API para seu aplicativo Web mais adiante neste módulo.

Parabéns! Seu aplicativo está implantado nos Aplicativos Web Estáticos do Azure!

Observação

Não se preocupe se aparecer uma página da Web informando que o aplicativo ainda não foi compilado e implantado. Tente atualizar o navegador depois de um minuto. O serviço de ação do GitHub é executado automaticamente quando o Aplicativo Web Estático do Azure é criado. Portanto, se você vê a página inicial, o aplicativo ainda está sendo implantado.

Efetuar pull das alterações do GitHub

Efetue pull das alterações mais recentes do GitHub para obter o arquivo de fluxo de trabalho criado pelo serviço Aplicativos Web Estáticos do Azure.

  1. Abra a paleta de comandos pressionando Ctrl+Shift+P.

  2. Insira e selecione Git: Efetuar Pull.

  3. Pressione Enter.

Próximas etapas

A seguir, você aprenderá como compilar e executar a API usando um projeto do Azure Functions.