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

Os Aplicativos Web Estáticos do Azure publicam um site pela criação de aplicativos 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 usado para implantação por meio dos 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 com base no modelo.

Criar repositório a partir do modelo

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 no editor o repositório clonado no computador.

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

    A entrada no Azure e no GitHub é necessária. Se você ainda não entrou no Azure e no GitHub por meio do Visual Studio Code, a extensão solicitará a você que entre em ambos durante o processo de criação.

  2. No rótulo Aplicativos Web Estáticos, escolha o sinal de adição.

    Nome do aplicativo

  3. A paleta de comandos será aberta na parte superior do editor e solicitará a você que nomeie o aplicativo.

    Digite my-first-static-web-app e clique em ENTER.

    Criar Aplicativo Web Estático

  4. Selecione as predefinições que correspondem ao seu tipo de aplicativo.

    Predefinições de aplicativo: nenhuma estrutura

    Insira ./ como a localização dos arquivos de aplicativo.

    Localização dos arquivos de aplicativo

    Selecione Ignorar por enquanto como a localização para a API do Azure Functions.

    Localização da API

    Insira ./ como a localização de saída do build.

    Localização de saída do build do aplicativo

  5. Selecione uma localização mais próxima e clique em ENTER.

    Localização do recurso

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

    Confirmação criada

    Em seguida, clique no botão Abrir Ações no GitHub. Esta página mostra o status do build do aplicativo.

    Depois que a ação do GitHub for concluída, navegue até o site publicado.

  7. 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.

    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 Visual Studio Code Explorer, volte à seção Aplicativos Web Estáticos, clique com o botão direito do mouse em my-first-static-web-app e selecione Excluir.

Excluir aplicativo

Próximas etapas