Skip to content

Commit d65afa8

Browse files
0GiS00GiS0
committed
Add new images and update README files
1 parent b6730e4 commit d65afa8

6 files changed

Lines changed: 132 additions & 0 deletions

File tree

‎04-cloud/azure/paas/01-sql-database/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ az sql server firewall-rule create `
7878
--end-ip-address $endIp
7979
```
8080

81+
Con [Azure Data Studio](https://azure.microsoft.com/es-es/products/data-studio), puedes conectarte a la base de datos (tienes que permitir entonces el acceso desde tu IP, que puedes hacerlo desde esta misma app) y comprobar que se ha creado correctamente e incluso podrías crear la base de datos desde aquí.
82+
8183
Ahora lo siguiente que necesitamos es desplegar la API que haga uso de esta base de datos. Para ello, puedes seguir los pasos que te comparto en este otro [README](/04-cloud/azure/paas/02-app-service/README.md).
8284

8385

‎04-cloud/azure/paas/02-app-service/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ $APP_SVC_PLAN_NAME="tour-of-heroes-plan"
2020
$WEB_API_NAME="tour-of-heroes-api"
2121
```
2222

23+
>Importante: asegúrate de que el nombre de la web app es único en Azure.
24+
2325
## Creando el plan de App Service
2426

2527
Las aplicaciones web alojadas en este servicio necesitan estar dentro de un plan de App Service. Para crear uno, ejecuta el siguiente comando:
@@ -146,6 +148,10 @@ az webapp deployment source config-zip `
146148
--name $WEB_API_NAME
147149
```
148150

151+
Todo esto que hemos hecho a través de Azure CLI también es posible gestionarlos con la extensión de Azure App Service para Visual Studio Code.
152+
153+
<img src="../images/Extension%20de%20Azure%20App%20Service.png"/>
154+
149155
Para comprobar que todo ha ido bien, puedes ejecutar el siguiente comando:
150156

151157
```bash

‎04-cloud/azure/paas/02-app-service/client.http‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@base_url = https://tour-of-heroes-api.azurewebsites.net/api/hero
2+
3+
GET {{base_url}} HTTP/1.1
4+
5+
###
6+
POST {{base_url}} HTTP/1.1
7+
content-type: application/json
8+
9+
{
10+
"name": "Arrow",
11+
"alterEgo": "Oliver Queen",
12+
"description": "Multimillonario playboy Oliver Queen (Stephen Amell), quien, cinco años después de estar varado en una isla hostil, regresa a casa para luchar contra el crimen y la corrupción como un vigilante secreto cuya arma de elección es un arco y flechas."
13+
}
14+
15+
###
16+
POST {{base_url}} HTTP/1.1
17+
content-type: application/json
18+
19+
{
20+
"name": "Batman",
21+
"alterEgo": "Bruce Wayne",
22+
"description": "Un multimillonario magnate empresarial y filántropo dueño de Empresas Wayne en Gotham City. Después de presenciar el asesinato de sus padres, el Dr. Thomas Wayne y Martha Wayne en un violento y fallido asalto cuando era niño, juró venganza contra los criminales, un juramento moderado por el sentido de la justicia."
23+
}
24+
25+
###
26+
POST {{base_url}} HTTP/1.1
27+
content-type: application/json
28+
29+
{
30+
"name": "Captain America",
31+
"alterEgo": "Steve Rogers",
32+
"description": "Un joven frágil mejorado a la cima de la perfección humana por un suero experimental S.S.S. (Suero supersoldado) para ayudar a los esfuerzos inminentes del gobierno de Estados Unidos en la Segunda Guerra Mundial. Cerca del final de la guerra, queda atrapado en el hielo y sobrevive en animación suspendida hasta que es descongelado en el presente."
33+
}
34+
35+
###
36+
POST {{base_url}} HTTP/1.1
37+
content-type: application/json
38+
39+
{
40+
"name": "Daredevil",
41+
"alterEgo": "Matt Murdock",
42+
"description": "Mientras crecía en el vecindario irlandés-estadounidense de Hell's Kitchen de la clase obrera, históricamente áspero y asolado por el crimen, en la ciudad de Nueva York, Matt Murdock es cegado por una sustancia radioactiva que cae de un camión después salvar a un hombre que estaba por ser atropellado por un auto. Si bien ya no puede ver, la exposición radioactiva aumenta sus sentidos restantes más allá de la capacidad humana normal y le da un <<sentido de radar>>."
43+
}
44+
45+
###
46+
POST {{base_url}} HTTP/1.1
47+
content-type: application/json
48+
49+
{
50+
"name": "Hulk",
51+
"alterEgo": "Bruce Barner",
52+
"description": "Después de una exposición accidental a los rayos gamma durante la detonación de una bomba experimental, Banner se transforma físicamente en Hulk cuando está sometido a estrés emocional, a su voluntad o en contra de ella, lo que a menudo lleva a destrozos y conflictos que complican la vida civil de Banner. El nivel de fuerza de Hulk se transmite normalmente de forma proporcional a su nivel de ira."
53+
}
54+
55+
###
56+
POST {{base_url}} HTTP/1.1
57+
content-type: application/json
58+
59+
{
60+
"name": "Iron Man",
61+
"alterEgo": "Tony Stark",
62+
"description": "Es un multimillonario magnate empresarial estadounidense, playboy e ingenioso científico, quien sufrió una grave lesión en el pecho durante un secuestro en el Medio Oriente. Cuando sus captores intentan forzarlo a construir un arma de destrucción masiva crea, en cambio, una armadura para salvar su vida y escapar del cautiverio. Más tarde, Stark desarrolla su traje, agregando armas y otros dispositivos tecnológicos que diseñó a través de su compañía, Industrias Stark."
63+
}
64+
65+
###
66+
POST {{base_url}} HTTP/1.1
67+
content-type: application/json
68+
69+
{
70+
"name": "Spider Man",
71+
"alterEgo": "Peter Parker",
72+
"description": "un joven huérfano neoyorquino que adquiere superpoderes después de ser mordido por una araña radiactiva,15​ y cuya ideología como héroe se ve reflejada primordialmente en la expresión «un gran poder conlleva una gran responsabilidad».20​21​ Suele ser asociado con una personalidad bromista, amable, inventiva y optimista, lo que le ha llevado a ser catalogado como el «vecino amigable» de cualquiera lo cual, aunado a sus vivencias caracterizadas por los problemas cotidianos."
73+
}

‎04-cloud/azure/paas/03-static-web-apps/README.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,57 @@ az staticwebapp create `
5656

5757
El resto de servicios se han desplegado en la región `uksouth`, pero en este caso, como no hay disponibilidad de Azure Static Web Apps en esa región, lo he desplegado en `westeurope`.
5858

59+
Cuando este comando termine de ejecutarse lo que va a ocurrir es que se habrá creado un workflow de GitHub Actions en el repositorio que le pasé como valor del parámetro `--source` y que se encargará de desplegar la aplicación en Azure Static Web Apps. Puedes ver el progreso en tu repo:
60+
61+
<img src="../images/Workflow de GitHub Actions para desplegar el frontal de tour of heroes.png" width="800">
62+
63+
Para recuperar la URL de esta aplicación lanza lo siguiente:
64+
65+
```bash
66+
WEBAPP_URL=$(az staticwebapp show \
67+
--name $WEB_APP_NAME \
68+
--resource-group $RESOURCE_GROUP \
69+
--query "defaultHostname" \
70+
--output tsv)
71+
72+
echo "Static Web App deployed 🚀"
73+
echo "Static Web App URL: https://$WEBAPP_URL"
74+
```
75+
76+
o si estás en Windows:
77+
78+
```pwsh
79+
$WEBAPP_URL=$(az staticwebapp show `
80+
--name $WEB_APP_NAME `
81+
--resource-group $RESOURCE_GROUP `
82+
--query "defaultHostname" `
83+
--output tsv)
84+
85+
echo "Static Web App deployed 🚀"
86+
echo "Static Web App URL: https://$WEBAPP_URL"
87+
```
88+
89+
Aunque verás que la aplicación se está ejecutando la misma no está apuntando a la API correcta. En este ejemplo tenemos que modificar el flujo de GitHub Actions para que pueda llamar a otro script dentro de mi package.json. Por lo que abre el mismo desde Github y modifica el paso Build and Deploy con lo siguiente:
90+
91+
```yaml
92+
- name: Build And Deploy
93+
id: builddeploy
94+
uses: Azure/static-web-apps-deploy@v1
95+
with:
96+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_WONDERFUL_BAY_0AF2E3F03 }}
97+
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
98+
action: "upload"
99+
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
100+
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
101+
app_build_command: API_URL=${{ secrets.API_URL}} npm run build-with-api-url
102+
app_location: "/" # App source code path
103+
api_location: "" # Api source code path - optional
104+
output_location: "dist/angular-tour-of-heroes" # Built app content directory - optional
105+
###### End of Repository/Build Configurations ######
106+
```
107+
108+
Lo único que he hecho ha sido añadir la propiedad llamada **app_build_command** y le he pasado el valor `API_URL=${{ secrets.API_URL}} npm run build-with-api-url`. Esto lo que hace es que cuando se ejecute el comando `npm run build-with-api-url` se le pasará la variable de entorno `API_URL` con el valor que le hemos pasado en el secreto `API_URL`.
109+
59110
¡Y ya está! Con esto ya tienes desplegada la aplicación Tour Of Heroes en servicios PaaS de Azure. Si quisieras eliminar todo lo creado hasta ahora es tan sencillo como ejecutar el siguiente comando:
60111

61112
```bash

‎04-cloud/azure/paas/images/Extension de Azure App Service.png‎

677 KB
Loading

‎04-cloud/azure/paas/images/Workflow de GitHub Actions para desplegar el frontal de tour of heroes.png‎

322 KB
Loading

0 commit comments

Comments
 (0)