Skip to content

Commit f592dc5

Browse files
0GiS00GiS0
committed
Update installation script path and add application architecture diagram
1 parent c7b8629 commit f592dc5

3 files changed

Lines changed: 80 additions & 4 deletions

File tree

‎04-cloud/azure/iaas/03-frontend-vm/README.md‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ az vm run-command invoke \
6565
--resource-group $RESOURCE_GROUP \
6666
--name $FRONTEND_VM_NAME \
6767
--command-id RunPowerShellScript \
68-
--scripts @scripts/install-tour-of-heroes-angular.ps1 \
68+
--scripts @04-cloud/azure/iaas/scripts/install-tour-of-heroes-angular.ps1 \
6969
--parameters "api_url=http://$FQDN_API_VM/api/hero" "release_url=https://github.com/0GiS0/tour-of-heroes-angular/releases/download/1.1.4/dist.zip"
7070
```
7171

@@ -82,7 +82,7 @@ az vm run-command invoke `
8282
--parameters "api_url=http://$FQDN_API_VM/api/hero" "release_url=https://github.com/0GiS0/tour-of-heroes-angular/releases/download/1.1.4/dist.zip"
8383
```
8484

85-
En este ejemplo he desplegado la aplicación en otro puerto, en el 8080, para que no haya conflicto con el IIS que se instala por defecto en el puerto 80. Para ello, para todo esto utilizamos el script `install-tour-of-heroes-angular.ps1` que se encuentra en la carpeta `scripts` de este repositorio.:
85+
En este ejemplo he desplegado la aplicación en otro puerto, en el 8080, para que no haya conflicto con el IIS que se instala por defecto en el puerto 80. Para elloutilizamos el script [install-tour-of-heroes-angular.ps1](04-cloud/azure/iaas/scripts/install-tour-of-heroes-angular.ps1) que se encuentra en la carpeta **scripts** de este repositorio.
8686

8787
Lo último que nos queda es habilitar los puertos 80 y 8080 en el NSG de la máquina virtual del frontend:
8888

@@ -128,6 +128,34 @@ az network nsg rule create `
128128
--direction Inbound
129129
```
130130

131-
Para probar que todo funciona, abre un navegador y accede a la dirección `http://<FQDN_FRONTEND_VM>:8080` y deberías ver la aplicación Angular funcionando:
131+
Para probar que todo funciona, abre un navegador y accede a la dirección [http://tour-of-heroes-frontend-vm.uksouth.cloudapp.azure.com:8080](http://tour-of-heroes-frontend-vm.uksouth.cloudapp.azure.com:8080) y deberías ver la aplicación Angular funcionando.
132132

133-
![Angular app](images/angular-app.png)
133+
Ahora la arquitectura de nuestra aplicación en Azure debería ser la siguiente:
134+
135+
![Arquitectura de la aplicación en Azure](/04-cloud/azure/iaas/images/todas-las-vm-desplegadas.png)
136+
137+
Si quisieras acceder a la máquina virtual del frontend, deberías habilitar en el NSG el puerto 3389 para poder acceder por RDP.
138+
139+
```bash
140+
az network nsg rule create \
141+
--resource-group $RESOURCE_GROUP \
142+
--nsg-name $FRONTEND_VM_NSG_NAME \
143+
--name AllowRDP \
144+
--priority 1004 \
145+
--destination-port-ranges 3389 \
146+
--direction Inbound
147+
```
148+
149+
o si estás en Windows:
150+
151+
```pwsh
152+
az network nsg rule create `
153+
--resource-group $RESOURCE_GROUP `
154+
--nsg-name $FRONTEND_VM_NSG_NAME `
155+
--name AllowRDP `
156+
--priority 1004 `
157+
--destination-port-ranges 3389 `
158+
--direction Inbound
159+
```
160+
161+
Y desde el portal de Azure, en la máquina virtual del frontend, en la pestaña **Overview** puedes hacer clic en **Connect** y luego en **Download RDP File** para descargar el fichero de conexión RDP.

‎04-cloud/azure/iaas/images/todas-las-vm-desplegadas.png‎

209 KB
Loading

‎04-cloud/azure/iaas/scripts/install-tour-of-heroes-angular.ps1‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
param(
2+
[string]$release_url,
3+
[string]$api_url
4+
)
5+
6+
Write-Output "Install IIS on the frontend vm"
7+
Install-WindowsFeature -name Web-Server -IncludeManagementTools
8+
9+
Write-Output "Download URL Rewrite Module from here https://www.iis.net/downloads/microsoft/url-rewrite"
10+
Invoke-WebRequest -Uri "https://download.microsoft.com/download/1/2/8/128E2E22-C1B9-44A4-BE2A-5859ED1D4592/rewrite_amd64_en-US.msi" -OutFile C:\Temp\rewrite_amd64_en-US.msi
11+
12+
Write-Output "Install URL Rewrite Module"
13+
Start-Process -FilePath "C:\Temp\rewrite_amd64_en-US.msi" -ArgumentList "/quiet" -Wait
14+
15+
Write-Output "Modify the default website index.html with the name of the computer"
16+
$new_content =
17+
@"
18+
<!DOCTYPE html>
19+
<html>
20+
<body>
21+
<h1>Hello developer 👋🏻</h1>
22+
<p>Running on <b>$env:computername</b></p>
23+
</body>
24+
</html>
25+
"@
26+
27+
Set-Content -Path C:\inetpub\wwwroot\index.html -Value $new_content
28+
29+
Write-Output "Create a folder for the frontend app"
30+
mkdir $env:systemdrive\inetpub\wwwroot\frontend
31+
32+
Write-Output "Download the last release of the frontend app from github"
33+
Invoke-WebRequest -Uri $release_url -OutFile C:\Temp\dist.zip
34+
35+
Write-Output "Unzip the frontend app in the folder"
36+
Expand-Archive -Path C:\Temp\dist.zip -DestinationPath C:\inetpub\wwwroot\frontend
37+
38+
Write-Output "Replace environment variables like envsubst in linux"
39+
((Get-Content -path C:\inetpub\wwwroot\frontend\assets\env.template.js -Raw) -replace ([regex]::Escape('${API_URL}')), $api_url) | Set-Content -Path C:\inetpub\wwwroot\frontend\assets\env.js
40+
41+
Write-Output "Create a new website in IIS"
42+
New-IISSite -Name "TourOfHeroesAngular" -BindingInformation "*:8080:" -PhysicalPath "$env:systemdrive\inetpub\wwwroot\frontend"
43+
44+
Write-Output "Create an aplication inside the new site"
45+
New-WebApplication -Name "TourOfHeroesAngular" -Site "TourOfHeroesAngular" -ApplicationPool "TourOfHeroesAngular" -PhysicalPath "$env:systemdrive\inetpub\wwwroot\frontend"
46+
47+
Write-Output "Enable 8080 port in the firewall"
48+
New-NetFirewallRule -DisplayName "Allow 8080" -Direction Inbound -LocalPort 8080 -Protocol TCP -Action Allow

0 commit comments

Comments
 (0)