Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducción a Azure Static Web Apps

Introducción a Azure Static Web Apps

Azure Static Web Apps se anunció en la conferencia Microsoft Build 2020 y le permiten hospedar sus sitios web estáticos de forma gratuita. Puede utilizar HTML, Javascript simple de marcos front-end como Angular o React. El sitio web recupera datos, si es necesario, de Azure Functions. Una gran característica de Azure Static Web Apps es que no es la necesidad de configurar la canalización de CI/CD. Esto lo hace por usted Azure y Github mediante GitHub Actions.

Lautaro Carro

July 04, 2020
Tweet

More Decks by Lautaro Carro

Other Decks in Programming

Transcript

  1. INTRODUCCIÓN A AZURE STATIC WEB
    APPS
    Lautaro Carro

    View full-size slide

  2. AGENDA
    ❑¿Qué es Azure Static Web Apps
    ❑¿Cómo funciona?
    ❑Subir un sitio web sin backend
    ❑Subir un sitio web con backend
    ❑Vista Previa de los Pull Request
    ❑Rutas de reserva
    ❑Autenticación

    View full-size slide

  3. AZURE STATIC WEB
    APPS
    Es un servicio que compila e implementa
    automáticamente aplicaciones web fullstack en
    Azure desde un repositorio de GitHub.

    View full-size slide

  4. APLICACIONES WEB FULLSTACK

    View full-size slide

  5. ¿CÓMO FUNCIONA?

    View full-size slide

  6. PASO A PASO: REPOSITORIO

    View full-size slide

  7. PASO A PASO:
    CREAR RECURSO

    View full-size slide

  8. PASO A PASO:
    SELECCIONAR
    REPOSITORIO

    View full-size slide

  9. PASO A PASO: COMPILAR

    View full-size slide

  10. PASO A PASO:
    REVISAR Y CREAR

    View full-size slide

  11. PASO A PASO: NUESTRO SITIO WEB

    View full-size slide

  12. BACKSTAGE PASO
    A PASO: GITHUB
    ACTIONS

    View full-size slide

  13. BACKSTAGE PASO A PASO: GITHUB ACTIONS

    View full-size slide

  14. PASO A PASO: HELLO WORLD

    View full-size slide

  15. AZURE
    FUNCTIONS:
    VSCODE
    npm install -g azure-functions-core-tools@3

    View full-size slide

  16. PASO A PASO: CREAR API HttpTrigger + Anonymous

    View full-size slide

  17. PASO A PASO:
    ESTRUCTURA
    CARPETAS

    View full-size slide

  18. PASO A PASO: CONSULTAR API

    View full-size slide

  19. PASO A PASO:
    HELLO [YOUR NAME]

    View full-size slide

  20. VISTA PREVIA DE
    PULL REQUEST

    View full-size slide

  21. VISTA PREVIA DE
    PULL REQUEST

    View full-size slide

  22. VISTA PREVIA DE
    PULL REQUEST

    View full-size slide

  23. VISTA PREVIA DE
    PULL REQUEST

    View full-size slide

  24. VISTA PREVIA DE
    PULL REQUEST

    View full-size slide

  25. RUTAS DE
    RESERVA:
    HISTORY API

    View full-size slide

  26. RUTAS DE
    RESERVA:
    DESPUES DE F5

    View full-size slide

  27. RUTAS DE RESERVA: HASH

    View full-size slide

  28. RUTAS DE
    RESERVA:
    ROUTES.JSON

    View full-size slide

  29. ROUTES.JSON:
    SERVER ROUTER

    View full-size slide

  30. ROUTES.JSON:
    PLATFORM
    ERROR
    OVERRIDES

    View full-size slide

  31. ROUTES + ROLES

    View full-size slide

  32. AUTENTICACIÓN
    Proveedor de autorización Ruta de inicio de sesión
    Azure Active Directory /.auth/login/aad
    Facebook /.auth/login/facebook
    GitHub /.auth/login/github
    Google1
    /.auth/login/google
    Twitter /.auth/login/twitter

    View full-size slide

  33. VSCODE EXTENSION

    View full-size slide

  34. ¿PREGUNTAS?
    Introducción a Azure Static Web Apps

    View full-size slide

  35. MUCHAS GRACIAS
    Introducción a Azure Static Web Apps
    @lauchacarro
    Lautarocarro.blog

    View full-size slide

  36. REFERENCIAS
    https://github.com/lauchacarro/vue-static-web-app
    https://docs.microsoft.com/es-mx/azure/static-web-apps/
    https://docs.microsoft.com/es-es/learn/modules/publish-app-service-static-web-app-api/1-
    introduction
    https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-
    azurestaticwebapps
    https://mybuild.microsoft.com/sessions/6769011f-744e-4c36-84a2-49b715be0c80
    https://www.it-swarm.dev/es/javascript/los-urls-react-router-no-funcionan-al-actualizar-o-
    escribir-manualmente/1051646776/
    https://go.algeiba.com/azuresandbox

    View full-size slide