Início Rápido: criar seu primeiro site estático com os Aplicativos Web Estáticos do Azure

  • Artigo

Os Aplicativos Web Estáticos do Azure publicam um site pela compilação de um aplicativo por meio de um repositório de código. Neste guia de início rápido, você implantará um aplicativo nos Aplicativos Web Estáticos do Azure usando a extensão do Visual Studio Code.

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

Pré-requisitos

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.

  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.

Selecione Criar repositório.

Captura de tela do botão Criar um recurso.

Clonar o repositório

Com o repositório criado na sua conta do GitHub, clone o projeto no computador local usando o comando a seguir.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

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

Em seguida, abra o Visual Studio Code e acesse Arquivo > Abrir Pasta para abrir o repositório clonado no editor.

Instalar a extensão dos Aplicativos Web Estáticos do Azure

Se você ainda não tiver a extensão Aplicativos Web Estáticos do Azure para Visual Studio Code, poderá instalá-lo no Visual Studio Code.

  1. Selecione Exibir>Extensões.
  2. Em Extensões de Pesquisa no Marketplace,digite Aplicativos Web Estáticos do Azure.
  3. Selecione Instalar para Aplicativos Web Estáticos do Azure.

Criar um aplicativo Web estático

  1. No Visual Studio Code, selecione o logotipo do Azure na barra de atividade para abrir a janela de extensões do Azure.

    Logotipo do Azure

    Observação

    Você precisará entrar no Azure e no GitHub no Visual Studio Code para continuar. Se você ainda não estiver autenticado, a extensão solicitará que você entre nos dois serviços durante o processo de criação.

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

  3. Insira Criar aplicativo Web estático na caixa de comando.

  4. Selecione Aplicativos Web Estáticos do Azure: criar aplicativo Web estático....

  5. Selecione sua assinatura do Azure.

  6. Insira my-first-static-web-app no nome do aplicativo.

  7. Selecione a região mais próxima de você.

  8. Insira os valores de configuração que correspondem à sua escolha de estrutura.

    Configuração Valor
    Estrutura Selecionar Personalizado
    Local do código do aplicativo Inserir /src
    Local do build Inserir /src

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

    Confirmação criada

    Se o GitHub apresentar um botão rotulado como Habilitar Ações neste repositório, selecione o botão para permitir que a ação de build seja executada no repositório.

    Enquanto a implantação está em andamento, a extensão do Visual Studio Code relata o status do build para você.

    Aguardando implantação

    Assim que a implantação for concluída, você poderá navegar diretamente até o seu site.

  10. Para exibir o site no navegador, clique com o botão direito do mouse sobre o projeto na extensão dos Aplicativos Web Estáticos e selecione Navegar pelo Site.

    Procurar no site

Limpar os recursos

Se você não pretende continuar usando esse aplicativo, exclua a instância dos Aplicativos Web Estáticos do Azure por meio da extensão.

Na janela do Windows do Visual Studio Code, retorne à seção Recursos e, em Aplicativos Web Estáticos, clique com o botão direito do mouse em my-first-static-web-app e selecione Excluir.

Próximas etapas

Adicionar uma API