Compartilhar via

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

  • Artigo

Neste artigo, crie um novo aplicativo Web com a estrutura de sua escolha, execute-o localmente e, em seguida, implante nos Aplicativos Web Estáticos do Azure.

Pré-requisitos

Para concluir este tutorial, você precisará de:

Recurso Descrição
Assinatura do Azure Se você não tiver uma, crie uma conta gratuita.
Node.js Instale a versão 20.0 ou posterior.
CLI do Azure Instale a versão 2.6x ou posterior.

Você também precisará de um editor de texto. Para trabalhar com o Azure, é recomendável o Visual Studio Code.

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

Criar seu aplicativo Web

  1. Abra uma janela do terminal.

  1. Selecione um diretório apropriado para seu código e, em seguida, execute os comandos a seguir.

    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 imprimirá a URL do seu site. Selecione o link para abri-lo no navegador padrão.

    Captura de tela do aplicativo Web vanilla gerado.

  1. Selecione um diretório apropriado para seu código e, em seguida, execute os comandos a seguir.

    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 imprimirá a URL do seu site. Selecione o link para abri-lo no navegador padrão.

    Captura de tela do aplicativo Web angular gerado.

  1. Selecione um diretório apropriado para seu código e, em seguida, execute os comandos a seguir.

    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 imprimirá a URL do seu site. Selecione o link para abri-lo no navegador padrão.

    Captura de tela do aplicativo Web React gerado.

  1. Selecione um diretório apropriado para seu código e, em seguida, execute os comandos a seguir.

    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 imprimirá a URL do seu site. Selecione o link para abri-lo no navegador padrão.

    Captura de tela do aplicativo Web Vue gerado.

  1. Selecione Cmd/Ctrl+C para interromper o servidor 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 dos Aplicativos Web Estáticos do Azure). 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 de entrada se esse método não funcionar em seu ambiente.

  2. Se você tiver várias assinaturas, talvez seja necessário selecionar uma assinatura. Você pode exibir sua assinatura atual usando o seguinte comando:

    az account show

    Para selecionar uma assinatura, execute o comando az account set.

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Crie um grupos 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 parâmetro -n refere-se ao nome do site e o parâmetro -l é o nome do local do Azure. O comando é concluído com --query "properties.provisioningState", portanto, o comando retorna apenas uma mensagem de sucesso 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 parâmetro -n refere-se ao nome do site e o parâmetro -g ao nome do grupo de recursos do Azure. Especifique o mesmo nome do grupo de recursos da etapa anterior. Seu aplicativo Web estático é distribuído globalmente, portanto, o local não é importante para a forma como você implanta o 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 exibir o aplicativo Web implantado.

Configurar para implantação

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

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

    A definição de uma rota de fallback permitirá que seu site sirva o arquivo index.html para todas as solicitações feitas contra o domínio.

    Verifique esse arquivo em seu sistema de controle de código-fonte (como o git), se estiver usando um.

  2. Instale a CLI dos Aplicativos Web Estáticos do Azure (SWA) em seu projeto.

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

    A CLI de SWA 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 como swa-cli.config.json.

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

    Depois que esse arquivo for criado, você poderá gerar seu conteúdo usando o comando npx swa init.

    npx swa init --yes

  4. Crie seu aplicativo para distribuição.

    npx swa build

  5. Use a CLI de SWA para entrar no Azure.

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

    Use o mesmo nome do grupo de recursos e o nome do aplicativo Web estático que você criou na seção anterior. À medida que você tenta fazer logon, um navegador será aberto para concluir o processo, se necessário.

Aviso

O Angular v17 e posterior colocam os arquivos distribuíveis em um subdiretório do caminho de saída que você pode escolher. A CLI de SWA 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 variável de ambiente SWA_CLI_OUTPUT_LOCATION para o diretório que contém o arquivo index.html:

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

Implantar o 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. Após a conclusão, a URL do seu site será exibida.

Captura de tela do comando de implantação.

Na maioria dos sistemas, você pode selecionar a URL do site para abri-la no 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. Esta ação não pode ser desfeita.

Próximas etapas

Adicionar autenticação

Conteúdo relacionado