Publicar uma app Angular no Azure usando git

1. Criar o Website no Azure

Browser > https://portal.azure.com/ + Novo (+ New) > Web + Móvel (Web + Mobile) > Aplicação Web (Web App) Nome da aplicação: It3Angular Subscrição: Microsoft Imagine Grupo de Recursos: . Criar novo It3Angular Plano de Serviço de Aplicações: planoServicoApp (West Europe) Afixar ao dashboard Criar

Na janela apresentada na figura anterior selecionar: Implementação (Deployment) > Opções de implementação (Deployment options) Configurar definições necessárias > Repositório de Git Local > OK

Descrição Geral (Overview)

Verificar a alteração de “Nome de utilizador do FTP/Implementação” para “Nome de utilizador do Git/Implementação”

Verificar a criação do Website vazio no Azure http://it3angular.azurewebsites.net

2. Deploy do Website

O deploy do website é feito usando Git, efetuando push do repositório Git local para o Azure.

Na pasta que contém o projeto Angular > ng build --prod

Copiar o conteúdo da pasta “dist”, criada pelo comando anterior, para uma outra pasta vazia “deployIt3Angular”. Nesta pasta acrescentar um ficheiro com o nome “web.config” e com o conteúdo seguinte: <?xml version="1.0"?> <configuration> <system.webServer> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json" /> <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> <mimeMap fileExtension=".woff2" mimeType="font/woff2" /> </staticContent> </system.webServer> <system.webServer> <rewrite> <rules> <rule name="angular cli routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> </rules> </rewrite> </system.webServer> </configuration> (https://www.newventuresoftware.com/blog/deploying-angular-4-cli-apps-to-iis-on-azure) Nesta pasta executar os seguintes comandos: > git init

> git add *.*

> git commit --message "Initial commit"

> git remote add

azure https://famouta@it3angular.scm.azurewebsites.net:443/It3Angular.git

(endereço copiado da janela It3Angular, Descrição Geral -> URL do git clone) > git push azure master

Testar o Website no Azure http://it3angular.azurewebsites.net

3. Publicar alterações efetuadas no Website

Após efetuar alterações à aplicação temos que fazer novamente: > ng build --prod

Copiar todo o conteúdo da pasta “dist”, criada novamente pelo comando anterior, para a pasta “deployIt3Angular”, substituindo os ficheiros existentes. Nesta pasta executar os seguintes comandos: > git add *.*

> git commit --message "Second commit"

> git push azure master

Nota: O Git não pode autenticar através das credenciais utilizadas para o portal.

Ver Set and reset user-level credentials em Configure deployment credentials for Azure App Service:

https://docs.microsoft.com/en-us/azure/app-service/app-service-deployment-credentials