Partilhar via

Implantar seu aplicativo Web nos Aplicativos Web Estáticos do Azure

  • Artigo

Neste artigo, você cria um novo aplicativo Web com a estrutura de sua escolha, executa-o localmente e implanta nos Aplicativos Web Estáticos do Azure.

Pré-requisitos

Para concluir este tutorial, precisa de:

Recurso Description
Subscrição do Azure Se não tiver uma, pode criar uma conta gratuitamente.
Node.js Instale a versão 20.0 ou posterior.
CLI do Azure Instale a versão 2.6x ou posterior.

Você também precisa de um editor de texto. Para trabalhar com o Azure, o Visual Studio Code é recomendado.

Você pode executar o aplicativo criado neste artigo na plataforma de sua escolha, incluindo: Linux, macOS, Windows ou Windows Subsystem for Linux.

Crie seu aplicativo Web

  1. Abra uma janela do terminal.

  1. Selecione um diretório apropriado para seu código e execute os seguintes comandos.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

    À medida que você executa esses comandos, o servidor de desenvolvimento imprime a URL do seu site. Selecione o link para abri-lo em seu navegador padrão.

    Captura de tela do aplicativo web baunilha gerado.

  1. Selecione um diretório apropriado para seu código e execute os seguintes comandos.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

    À medida que você executa esses comandos, o servidor de desenvolvimento imprime a URL do seu site. Selecione o link para abri-lo em seu navegador padrão.

    Captura de ecrã da aplicação Web angular gerada.

  1. Selecione um diretório apropriado para seu código e execute os seguintes comandos.

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

    À medida que você executa esses comandos, o servidor de desenvolvimento imprime a URL do seu site. Selecione o link para abri-lo em seu navegador padrão.

    Captura de ecrã da aplicação Web react gerada.

  1. Selecione um diretório apropriado para seu código e execute os seguintes comandos.

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

    À medida que você executa esses comandos, o servidor de desenvolvimento imprime a URL do seu site. Selecione o link para abri-lo em seu navegador padrão.

    Captura de ecrã da aplicação Web Vue gerada.

  1. Selecione Cmd/Ctrl+C para parar o servidor de desenvolvimento.

Criar um aplicativo Web estático no Azure

Você pode criar um aplicativo Web estático usando o portal do Azure, a CLI do Azure, o Azure PowerShell ou o Visual Studio Code (com a extensão Azure Static Web Apps). Este tutorial usa a CLI do Azure.

  1. Entre na CLI do Azure:

    az login

    Por padrão, esse comando abre um navegador para concluir o processo. A CLI do Azure dá suporte a vários métodos para entrar se esse método não funcionar em seu ambiente.

  2. Se tiver várias subscrições, poderá ter de selecionar uma subscrição. Pode ver a sua subscrição atual utilizando o seguinte comando:

    az account show

    Para selecionar uma assinatura, você pode executar o az account set comando.

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Crie um grupo de recursos.

    Os grupos de recursos são usados para agrupar recursos do Azure.

    az group create -n swa-tutorial -l centralus --query "properties.provisioningState"

    O -n parâmetro refere-se ao nome do site e o -l parâmetro é o nome do local do Azure. O comando termina com --query "properties.provisioningState" para que o comando só retorna uma mensagem de êxito ou erro.

  4. Crie um aplicativo Web estático em seu grupo de recursos recém-criado.

    az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"

    O -n parâmetro refere-se ao nome do site e o -g parâmetro refere-se ao nome do grupo de recursos do Azure. Certifique-se de especificar o mesmo nome de grupo de recursos como na etapa anterior. Seu aplicativo Web estático é distribuído globalmente, portanto, o local não é importante para como você implanta seu aplicativo.

    O comando está configurado para retornar a URL do seu aplicativo Web. Você pode copiar o valor da janela do terminal para o navegador para visualizar o aplicativo Web implantado.

Configurar para implantação

  1. Adicione um staticwebapp.config.json arquivo ao código do aplicativo com o seguinte conteúdo:

    {
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

    A definição de uma rota de fallback permite que seu site servidorize o index.html arquivo para quaisquer solicitações feitas no domínio.

    Verifique este arquivo em seu sistema de controle de código-fonte (como git) se você estiver usando um.

  2. Instale a CLI do Azure Static Web Apps (SWA) em seu projeto.

    npm install -D @azure/static-web-apps-cli

    A SWA CLI ajuda você a desenvolver e testar seu site localmente antes de implantá-lo na nuvem.

  3. Crie um novo arquivo para seu projeto e nomeie-o swa-cli.config.json.

    O swa-cli.config.json arquivo descreve como criar e implantar seu site.

    Uma vez que este arquivo é criado, você pode gerar seu conteúdo usando o npx swa init comando.

    npx swa init --yes

  4. Crie seu aplicativo para distribuição.

    npx swa build

  5. Use a CLI SWA para entrar no Azure.

    npx swa login --resource-group swa-tutorial --app-name swa-demo-site

    Use o mesmo nome de grupo de recursos e nome de aplicativo Web estático que você criou na seção anterior. À medida que tenta iniciar sessão, abre-se um navegador para concluir o processo, se necessário.

Aviso

Angular v17 e posterior coloque os arquivos distribuíveis em um subdiretório do caminho de saída que você pode escolher. A SWA CLI não sabe o local específico do diretório. As etapas a seguir mostram como definir esse caminho corretamente.

Localize o arquivo de index.html gerado em seu projeto na pasta dist/swa-angular-demo/browser.

  1. Defina a SWA_CLI_OUTPUT_LOCATION variável de ambiente para o diretório que contém o arquivo index.html :

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

Implementar o seu site no Azure

Implante seu código em seu aplicativo Web estático:

npx swa deploy --env production

Pode levar alguns minutos para implantar o aplicativo. Depois de concluído, o URL do seu site é exibido.

Captura de tela do comando deploy.

Na maioria dos sistemas, você pode selecionar a URL do site para abri-lo em seu navegador padrão.

Limpar recursos (opcional)

Se você não continuar com outros tutoriais, remova o grupo de recursos e os recursos do Azure:

az group delete -n swa-tutorial

Ao remover um grupo de recursos, você exclui todos os recursos que ele contém. Não é possível anular esta ação.

Próximos passos

Adicionar autenticação

Conteúdos relacionados