Compartilhar via

Visão geral da CLI dos Aplicativos Web Estáticos do Azure

  • Artigo

Os sites dos Aplicativos Web Estáticos do Azure são hospedados na nuvem e geralmente conectam uma coleção de serviços de nuvem. Durante o desenvolvimento, e sempre que você precisar executar seu aplicativo localmente, você precisará de ferramentas para imitar como seu aplicativo é executado na nuvem.

A CLI de Aplicativos Web Estáticos (SCWA CLI) inclui uma série de serviços locais que se aproximam de como seu aplicativo seria executado no Azure, mas, em vez disso, eles são executados exclusivamente em sua máquina.

A CLI dos Aplicativos Web Estáticos do Azure fornece os seguintes serviços:

  • Um servidor do site estático local
  • Um proxy para o servidor de desenvolvimento de estrutura de front-end
  • Um proxy para seus pontos de extremidade de API – disponível por meio de Azure Functions Core Tools
  • Um servidor de autenticação e autorização simulado
  • Imposição de rotas locais e definições de configuração

Como ele funciona

O gráfico a seguir mostra como as solicitações são tratadas localmente.

Diagram showing the Azure Static Web App CLI request and response flow.

Importante

Vá para http://localhost:4280 para acessar o aplicativo servido pela CLI.

  • As solicitações feitas à porta 4280 são encaminhadas para o servidor apropriado, dependendo do tipo de solicitação.

  • As solicitações de conteúdo estático, como HTML ou CSS, são manipuladas pelo servidor de conteúdo estático interno da CLI ou pelo servidor da estrutura de front-end para depuração.

  • As solicitações de autenticação e autorização são tratadas por um emulador, que fornece um perfil de identidade falso para seu aplicativo.

  • O runtime das Ferramentas Principais do Functions1 lida com solicitações para a API do site.

  • As respostas de todos os serviços são retornadas ao navegador como se fossem todos um único aplicativo.

Depois de iniciar a interface do usuário e os aplicativos de API do Azure Functions de forma independente, inicie a CLI de Aplicativos Web Estáticos e aponte-a para os aplicativos em execução usando o seguinte comando:

swa start http://localhost:<DEV-SERVER-PORT-NUMBER> --api-location http://localhost:7071

Opcionalmente, se você usar o swa init comando, a CLI Aplicativos Web Estáticos examinará o código do aplicativo e criará um arquivo de configuração swa-cli.config.json para a CLI. Ao usar o arquivo swa-cli.config.json, você pode executar swa start para iniciar seu aplicativo localmente.

1 As Azure Functions Core Tools serão instaladas automaticamente pela CLI se ainda não estiverem no sistema.

Introdução

Comece a trabalhar com a CLI de Aplicativos Web Estáticos com os recursos a seguir.

Recurso Descrição
Instalar a CLI de aplicativos Web estáticos (CLI do SWA) Instale a CLI dos Aplicativos Web Estáticos do Azure em seu computador.
Configure seu ambiente Configure como seu aplicativo lê as informações de configuração.
Iniciar o emulador de site Inicie o serviço para servir localmente seu site.
Iniciar o servidor de API local Inicie o serviço para servir localmente seus pontos de extremidade de API.
Implantar no Azure Implante seu aplicativo em produção no Azure.

Observação

Frequentemente, os sites criados com uma estrutura de front-end exigem uma configuração de proxy para lidar corretamente com as solicitações sob a rota api. Ao usar a CLI de Aplicativos Web Estáticos do Azure, o valor do local do proxy é /api, e sem a CLI, o valor é http://localhost:7071/api.

Próximas etapas

Instalar o CII