Skip to content

Latest commit

 

History

History
310 lines (207 loc) · 8.51 KB

app_service_web.md

File metadata and controls

310 lines (207 loc) · 8.51 KB
title author
Host your web apps with Azure App Service
Presenter Name

What is App Service❓ What are Web Apps❓

App Service

:::::::::::::: {.columns} ::: {.column width="50%"}

  • HTTP-based service for hosting web applications
  • Develop in your favorite server-side language including:
    • .NET
    • Java
    • Ruby
    • Node.js
    • Python
    • PHP
  • Scale and run applications with little to no friction

::: ::: {.column width="50%"}

::: ::::::::::::::

::: notes

App services supports many languages natively and can automatically build the code as part of the deployment process

Scale up and out can happen both manually and automatically making it easier to achieve global scale

Code is ran in a fully-managed production environment with automatic OS and framework patching

:::

Code-based Web Apps

:::::::::::::: {.columns} ::: {.column width="50%"}

::: ::: {.column width="50%"}

Deploy code to Web Apps

  • Deploy code directly from a deployment source
    • GitHub
    • Azure Repos
    • OneDrive
  • Code is built automatically using the Oryx (github.com/microsoft/oryx) build system
  • You can configure continuous deployment and use deployment slots

::: ::::::::::::::

::: notes

This was the original way to deploy to App Service Web Apps (using Kudu)

When you deploy code, Oryx will detect the framework using built-in rules, and then perform a build

It's trivial to configure automated deployment processes and deploy to slots other than your production slot

:::

Container-based Web Apps

:::::::::::::: {.columns} ::: {.column width="50%"}

::: ::: {.column width="50%"}

Use Docker containers with Web Apps

  • Host applications using a custom container from
    • Docker Hub
    • Azure Container Registry
    • GitHub Packages
  • Run multi-container applications with Docker Compose
  • Configure continuous deployment from container registries

::: ::::::::::::::

::: notes

If you already are invested in Docker, this is the far easier path

You can isolate your application and dependencies from the software stack running in the Web App

This is a great way to try out new programming frameworks prior to their typical availability

This is also a great way to lock your application to a specific older framework

:::

Demo: Deploying an App Service Web App from a container

::: notes

  1. Use this link to generate a new GitHub repository using the github.com/msusdev/example-next-web-app template: github.com/msusdev/example-next-web-app/generate.
  2. Use the Azure Portal to open the "Create Web App" wizard.
  3. In the Basics tab, perform the following actions:
    1. Select any subscription, region, and resource group.
    2. Give you web app an easily memorized unique name.
    3. In the Publish section, select Docker Container.
    4. In the Operating System section, select Linux.
    5. Select a region that you will use for both demos in this presentation.
    6. Leave the App Service Plan set to it's default option.
    7. Select Next: Docker.
  4. In the Docker tab, perform the following actions:
    1. In the Options list, select Single Container.
    2. In the Image Source list, select Docker Hub.
    3. In the Access Type list, select Public.
    4. In the Image and tag box, enter msusdev/webnext:20
    5. Select Review + create.
  5. In the Review + create tab, select Create to deploy the new Web App.
  6. Wait for the deployment process to finish, then select Go to resource.
  7. In the resource blade, select Browse.
  8. Observe the deployed web application.

:::

That's cool, how about the new Azure Static Web Apps❓

Azure Static Web Apps

:::::::::::::: {.columns} ::: {.column width="50%"}

Build and host static web applications

  • Uses Oryx ((github.com/microsoft/oryx)) build engine
  • Built-in support for authentication and authorization
  • Azure Functions ➡️ APIs
  • GitHub Actions ➡️ CI/CD

::: ::: {.column width="50%"}

::: ::::::::::::::

::: notes

New service focused on the specific needs of JavaScript-based static web applications

Ideal for frameworks like Angular, React, Svelte, Vue, or Blazor

Typically, these frameworks often required a server-side app to serve content

Build process is powered by Oryx

Integrated authentication with flexible roles

API endpoints are serverless and powered by Azure Functions

:::

Static Web App breakdown

::: notes

Workflow modeled after common daily workflow for developers

Workflow focused on typical GitHub interactions

Upon creation, Azure Static Web Apps creates a GitHub Actions workflow

YAML file is added to .github/workflows folder

Application is built and deployed to Azure on commits and pull requests to watched branches

:::

Github Action

:::::::::::::: {.columns} ::: {.column width="50%"}

Static Web Apps Deploy GitHub Action

::: ::: {.column width="50%"}

::: ::::::::::::::

Example Github Actions workflow YAML

- uses: "Azure/[email protected]"
  with:
    azure_static_web_apps_api_token: "${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}"
    repo_token: "${{ secrets.GITHUB_TOKEN }}"
    action: "upload"
    app_location: "/"
    api_location: "api"
    app_artifact_location: "out"

::: notes

GitHub action is still in preview

Action uses a token that's automatically saved to the repo to connect to Static Web Apps

Action specifies the location of the build artifacts, application root, and API

:::

Demo: Deploying an Azure Static Web App from code on GitHub

::: notes

  1. Use the Azure Portal to open the "Create Static Web App (Preview)" wizard.
  2. In the Basics tab, perform the following actions:
    1. Select any subscription.
    2. Select the same resource group as you used for the previous demo.
    3. Give you static web app an easily memorized unique name.
    4. Select any region.
    5. Sign in to GitHub using the same account that you use to generate your new repository. Authorize permission to access your account and organization[s].
    6. Select the Organization and Repository list options that match where you generated your new repo.
    7. Select the main branch.
    8. In the Build Presets list, select Custom.
    9. In the App location box, enter /.
    10. In the Api location box, enter api.
    11. In the App artifact location box, enter out.
    12. Select Review + create.
  3. In the Review + create tab, select Create to deploy the new Web App.
  4. Wait for the deployment process to finish, then select Go to resource.
  5. In the resource blade, select Browse.
  6. Observe the deployed web application.

:::

Wrapping up

Review

App Service

  • Web Apps
    • Container-based
    • Code-based (Oryx)

Static Web Apps

  • Site content, Function, static content
  • GitHub Actions

::: notes

Emphasize the difference between Web Apps and Static Web Apps

Talk about some of the things you saw in the demos

:::

Links

Deck

Links

::: notes

The deck is open-source and attendees are welcome to view the deck to get images, links, and other content they may have missed

:::