Vytvoření statické webové aplikace s bezserverovým rozhraním API

Článek
10/21/2023

Zjistěte, jak místně spustit a pak nasadit statickou webovou aplikaci s bezserverovým rozhraním API do Azure. Tento kurz používá verzi Preview nejnovějšího programovacího modelu Azure Functions Node.js. Vzhledem k tomu, že tento článek používá verzi Preview azure Functions, nasadí se jako samostatná aplikace od statické webové aplikace.

Naučte se:

Místní spuštění statické webové aplikace (SWA) s aplikací funkcí Azure
Místní proxy front-endové požadavky na místní back-endové rozhraní API pomocí rozhraní příkazového řádku SWA.
Nasaďte a spusťte stejný kód vzdáleně.

Proxy mezi front-endem a back-endem poskytovaným rozhraním příkazového řádku statické webové aplikace poskytuje:

Adresa URL v Reactu /api/todonezadá číslo serveru ani portu pro rozhraní API. Požadavky používající tuto adresu URL jsou úspěšné místně, protože rozhraní příkazového řádku SWA spravuje proxy server za vás.
Emulátor místního ověřování při přístupu /.auth/login/<provider>
Správa a autorizace tras

Ověřování v této ukázce

Ověřování v této ukázce je k dispozici pro front-endové uživatele ze služby Azure Static Web Apps:

Přihlášení nebo odhlášení
Veřejný a soukromý obsah

Zdrojový kód v této ukázce

Zdrojový kód v této ukázce je určený k tomu, jak sestavit a nasadit statickou webovou aplikaci s bezserverovým rozhraním API. Kód není určený pro produkční prostředí.

V kódu najdete několik míst, která nedodržují osvědčené postupy zabezpečení. Například kód používá console.log k zápisu do konzoly prohlížeče.

Když přejdete do produkčního prostředí, měli byste zkontrolovat a odebrat veškerý kód, který porušuje osvědčené postupy zabezpečení pro vaši organizaci.

1. Příprava vývojového prostředí

Vytvořte následující účty:

Předplatné Azure – Vytvoření bezplatného účtu Azure
Účet GitHubu – K nasazení v tomto kurzu potřebujete účet GitHub.

Nainstalujte na místní vývojový počítač následující:

Node.js v18+
Visual Studio Code (VS Code)
Azure Static Web Apps (SWA) CLI nainstalované globálně s příznakem -g
Azure Functions Core Tools v4.0.5095+ (pokud běží místně) nainstalovaný globálně s příznakem -g
TypeScript v4+

2. Fork ukázkového úložiště na GitHubu

K dokončení nasazení z GitHubu potřebujete vlastní fork ukázkového úložiště. Během procesu forku stačí zkopírovat main jenom větev.

Vytvoření forku ukázkového úložiště: https://github.com/Azure-Samples/azure-typescript-e2e-apps.

3. Klonování rozvětvovaného ukázkového úložiště

V terminálu Bash naklonujte forkované úložiště do místního počítače. Nenaklonujte původní ukázkové úložiště. Příklad adresy URL je https://github.com/YOUR-ACCOUNT-NAME/azure-typescript-e2e-apps
```
git clone YOUR-FORKED-REPO-URL
```
Nainstalujte závislosti pro místní front-endovou aplikaci:
```
cd app-react-vite && npm install 
```
Nainstalujte závislosti pro místní back-endovou aplikaci:
```
cd ../api-inmemory && npm install && cd ..
```

4. Volitelné, sestavení a spuštění místní aplikace

Ukázkové úložiště má několik verzí front-endových a back-endových aplikací. Následující kroky používají verzi front-endu React 18 (Vite) a funkci Azure Functions v4 s back-endovou verzí node.js s trasami /status rozhraní API a /todo rozhraní API.

V kořenovém adresáři ukázkové aplikace pomocí rozhraní příkazového řádku SWA se souborem ./swa-cli.config.json sestavte front-endové a back-endové aplikace:
```
swa build
```
Pokud narazíte na chyby, ke kterým může dojít v závislosti na verzi různých balíčků a prostředí, opravte chyby před pokračováním. Před přechodem na nasazení do Azure Static Web Apps je důležité vědět, že se projekt úspěšně sestaví místně.
V kořenovém adresáři ukázkové aplikace pomocí rozhraní příkazového řádku SWA spusťte aplikace pomocí proxy serveru.
```
swa start
```

Když se v terminálu Bash zobrazí následující řádky, projekt se úspěšně spustil.

[swa] Serving static content:
[swa]   /workspaces/azure-typescript-e2e-apps/app-react-vite/dist
[swa] 
[swa] Serving API:
[swa]   /workspaces/azure-typescript-e2e-apps/api-inmemory
[swa] 
[swa] Azure Static Web Apps emulator started at http://0.0.0.0:4280. Press CTRL+C to exit.

Otevřete webový prohlížeč na adresu URL proxied, http://localhost:4280. Měla by se zobrazit následující stránka:
Můžete se přihlásit pomocí ověřování poskytnutého rozhraním příkazového řádku SWA. Proces napodobení ověřování v cloudových webových aplikacích Azure Static. Front-endový kód používá /.auth/me koncový bod k získání identity uživatele. Zadejte jakékoli falešné uživatelské jméno a neměňte zbývající pole.

Jakmile se uživatel ověří, front-end zobrazí soukromé informace, jako jsou proměnné prostředí rozhraní API.

Screenshot of local React app with authentication complete.

Zdrojový kód aplikace Azure Functions v4 pro toto rozhraní API je:

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";

import { name, version } from '../../package.json';
function isObject(v) {
    return '[object Object]' === Object.prototype.toString.call(v);
};
function sortJson(o){
    if (Array.isArray(o)) {
        return o.sort().map(sortJson);
    } else if (isObject(o)) {
        return Object
            .keys(o)
        .sort()
            .reduce(function(a, k) {
                a[k] = sortJson(o[k]);

                return a;
            }, {});
    }
    return o;
}

export async function status(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    context.log(`Http function processed request for url "${request.url}"`);

    const sortedEnv = sortJson(process.env);

    return { jsonBody: {
        name,
        version,
        env: sortedEnv,
        requestHeaders: request.headers 
    }};
};

app.http('status', {
    route: "status",
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: status
});

Rozbalením veřejných a privátních oddílů zobrazíte obsah z rozhraní API.

5. Vytvoření nové aplikace Azure Functions

Předchozí část spuštění statické webové aplikace s rozhraním API byla volitelná. Zbývající části článku jsou potřeba k nasazení aplikace a rozhraní API do cloudu Azure.

Pokud chcete použít verzi Preview modulu runtime Azure Functions v4, musíte vytvořit novou aplikaci Azure Functions. Statickou webovou aplikaci je také potřeba znovu vytvořit a nasadit, aby místo použitíxiovaného a spravovaného rozhraní API používala identifikátor URI aplikace Azure Functions v požadavcích na načtení rozhraní API.

Ve webovém prohlížeči otevřete web Azure Portal a vytvořte novou aplikaci Azure Functions: Vytvoření nové aplikace

K vytvoření aplikace funkcí použijte následující informace:

Tab:Setting	Hodnota
Základy: Předplatné	Vyberte předplatné, které chcete použít.
Základy: Skupina prostředků	Vytvořte novou skupinu prostředků, například `first-static-web-app-with-api`. Název se nepoužívá ve veřejné adrese URL aplikace. Skupiny prostředků pomáhají seskupovat a spravovat související prostředky Azure.
Základy: Podrobnosti o instanci: Název aplikace funkcí	Zadejte globálně jedinečný název, například `swa-api` se 3 náhodnými znaky přidanými na konec, například `swa-api-123`.
Základy: Podrobnosti instance: Kód nebo kontejner	Vyberte možnost `Code`.
Základy: Podrobnosti o instanci: Zásobník modulu runtime	Vyberte možnost `Node.js`.
Základy: Podrobnosti o instanci: Zásobník modulu runtime	Vyberte možnost `18LTS`.
Základy: Operační systém	Vyberte možnost `Linux`.
Základy: Hostování	Vyberte možnost `Consumption`.
Úložiště: Účet úložiště	Nic zde neměňte. Vytvoří se nový účet Azure Storage, který vám pomůže s událostmi funkcí.
Sítě	Nic neměňte.
Monitorování: Přehledy aplikací: Povolení Přehledy aplikací	Vyberte možnost `Yes`. Neměňte zadaný výchozí název.
Nasazení: Nastavení GitHub Actions: Průběžné nasazování	Vyberte možnost `Enable`.
Nasazení: Účet GitHubu	Vyberte svůj účet GitHubu.
Nasazení: Organizace	Vyberte svůj účet GitHubu, který jste použili při rozvětvování ukázkového úložiště.
Nasazení: Úložiště	Vyberte název `azure-typescript-e2e-apps`rozvětvovaného úložiště.
Nasazení: Větev	Vyberte možnost `main`.
Značky	Nic neměňte.
Kontrola a vytvoření	Vyberte možnost `Create`.

Tento krok přidá soubor pracovního postupu Yaml GitHubu do vašeho forku úložiště.

Po vytvoření prostředku vyberte Go to resource tlačítko.
Vyberte Nastavení –> Konfigurace a pak přidejte nastavení konfigurace pro modul runtime Node.js ve službě Azure Function Node.js v4 s názvem AzureWebJobsFeatureFlags a hodnotou EnableWorkerIndexing.
Vyberte Uložit a nastavení se uloží.
V terminálu Bash pomocí Gitu stáhněte nový soubor pracovního postupu yaml z vašeho forku úložiště GitHub do místního počítače.
```
git pull origin main
```
V editoru Visual Studio Code otevřete nový soubor pracovního postupu yaml umístěný na adrese ./.github/workflows/.

Výchozí soubor pracovního postupu zadaný pro vás předpokládá, že zdrojový kód funkce je v kořenovém adresáři úložiště a je jedinou aplikací v úložišti, ale to není případ této ukázky. Opravte to tak, že soubor upravíte. Řádky, které chcete upravit, jsou zvýrazněné v následujícím bloku yaml a jsou vysvětleny níže:

# Docs for the Azure Web Apps Deploy action: https://github.com/azure/functions-action
# More GitHub Actions for Azure: https://github.com/Azure/actions

# Deploy Azure Functions Node.js v4 runtime
# with api-inmemory subdir

name: Azure Function App - api-inmemory

on:
  push:
    branches:
      - main
    paths:
      - 'api-inmemory/**'
  workflow_dispatch:

env:
  AZURE_FUNCTIONAPP_PACKAGE_PATH: 'api-inmemory' # set this to the path to your web app project, defaults to the repository root
  NODE_VERSION: '18.x' # Azure Functions v4 runtime requires 18
  VERBOSE: true # For debugging

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 'Checkout GitHub Action'
        uses: actions/checkout@v2

      - name: Setup Node ${{ env.NODE_VERSION }} Environment
        uses: actions/setup-node@v1
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: 'Resolve Project Dependencies Using Npm'
        shell: bash
        run: |
          pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}'
          npm install
          npm run build --if-present
          npm run test --if-present
          popd
      - name: 'Upload artifact for deployment job' # For debugging
        uses: actions/upload-artifact@v3
        with:
          name: azure-function-v4-app
          path: |
            ${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}
            !${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}/node_modules
            !${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}/dist          
      - name: 'Run Azure Functions Action'
        uses: Azure/functions-action@v1
        id: fa
        with:
          app-name: 'swa-api' # change this to your Azure Function app name
          slot-name: 'Production'
          package: ${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_123 }}
          scm-do-build-during-deployment: false
          enable-oryx-build: false

Změna vlastnosti	Účel
`name`	Zkraťte název, abyste ho snadno našli v seznamu akcí GitHubu vašeho forku.
`paths`	Přidejte část cesty, která omezí nasazení tak, aby se spouštěla pouze v případech, kdy se změní kód rozhraní API služby Azure Functions. Při úpravě souboru pracovního postupu můžete nasazení aktivovat ručně.
`AZURE_FUNCTIONAPP_PACKAGE_PATH`	Při použití podadresáře pro zdrojový kód to musí být tato cesta a název podadresáře.
`VERBOSE`	Toto nastavení je užitečné pro ladění procesu sestavení a nasazení.
krok s názvem `Upload artifact for deployment job`	Tento krok vytvoří artefakt ke stažení. To je užitečné při přesném ladění souborů nasazených do vaší funkce Azure Functions.

Je Upload artifact for deployment job nepovinný. Používá se k pochopení a ladění souborů nasazených ve službě Azure Functions nebo k jejich použití v samostatném prostředí.

Uložte soubor a pak ho přidejte, potvrďte a nasdílejte zpět do GitHubu pomocí Gitu:
```
git add .
git commit -m "fix the workflow for a subdir"
git push origin main
```
V prohlížeči znovu spusťte pracovní postup na GitHubu v oblasti akcí forku.
Než budete pokračovat, počkejte na úspěšné dokončení akce.
Ve webovém prohlížeči pomocí externího koncového bodu rozhraní API vaší aplikace funkcí ověřte, že se aplikace úspěšně nasadila.
```
https://YOUR-FUNCTION-APP-NAME.azurewebsites.net/api/todo
```
Výsledek JSON vrácený pro data v paměti je:
```
{
    "1": "Say hello"
}
```
Poznamenejte si adresu URL vaší funkce. Potřebujete to v další části.
Víte, že vaše aplikace Funkcí Azure funguje v cloudu. Teď potřebujete vytvořit statickou webovou aplikaci v cloudu, aby bylo možné používat rozhraní API.

6. Vytvoření nové webové aplikace Azure Static

Tento proces vytváření nasadí stejné forkované ukázkové úložiště GitHubu do Azure. Nasazení nakonfigurujete tak, aby používalo pouze front-endovou aplikaci.

Otevřete Azure Portal a přihlaste se pomocí svého účtu Azure: Azure Portal.

K dokončení kroků vytvoření použijte následující informace:

Výzva	Nastavení
Předplatné	Vyberte předplatné, které chcete použít.
Skupina prostředků	Vyberte `Create new` a zadejte novou skupinu prostředků, například `first-static-web-app`. Název se nepoužívá ve veřejné adrese URL aplikace. Skupiny prostředků pomáhají seskupovat prostředky používané pro jeden projekt.
Typ plánu hostování	Vyberte `Free`
Podrobnosti o službě Azure Functions a přípravném prostředí	Výchozí nastavení neměňte. Rozhraní API funkce v rámci statické webové aplikace nenasazujete.
Podrobnosti o nasazení – zdroj	Vyberte `GitHub`
Podrobnosti o nasazení – GitHub	V případě potřeby se přihlaste k GitHubu.
Podrobnosti o nasazení – organizace	Vyberte svůj účet GitHubu.
Podrobnosti o nasazení – Úložiště	Vyberte rozvětvované úložiště s názvem `azure-typescript-e2e-apps`.
Podrobnosti o nasazení – větev	`main` Vyberte větev.
Podrobnosti o sestavení – sestavy	Vyberte možnost `Custom`.
Podrobnosti o sestavení – umístění aplikace	Zadejte `/app-react-vite`.
Podrobnosti o sestavení – umístění rozhraní API	Nechejte prázdné.
Podrobnosti o sestavení – umístění výstupu	Zadejte umístění výstupního adresáře front-endu . `dist`

Vyberte Zkontrolovat a vytvořit a pak Vytvořit.
Po vytvoření prostředku vyberte Go to resource tlačítko.
Na stránce Přehled si poznamenejte adresu URL vaší statické webové aplikace. Budete ho potřebovat v další části, když nastavíte nastavení CORS funkce Azure Functions.
Proces vytvoření vytvoří soubor pracovního postupu Yaml GitHubu ve vašem forku úložiště GitHub. Stáhněte si změnu dolů pomocí následujícího příkazu:
```
git pull origin main
```

Akce GitHubu, na ./.github/workflows/azure-static-web-apps-*.yml které se nachází, zodpovídá za sestavení a nasazení front-endové aplikace. Upravte soubor a přidejte proměnnou prostředí pro adresu URL cloudového back-endového rozhraní API. Řádky, které chcete upravit, jsou zvýrazněné v následujícím bloku yaml a jsou vysvětleny pod blokem yaml.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
    paths:
      - 'app-react-vite/**'
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main
    paths:
      - 'app-react-vite/**'      
  workflow_dispatch:

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || github.event_name == 'workflow_dispatch' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_123 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/app-react-vite" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "dist" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: 
          VITE_BACKEND_URI: https://swa-api-123.azurewebsites.net
          VITE_CLOUD_ENV: production

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_123 }}
          action: "close"

Změna vlastnosti	Účel
`paths`	Přidejte část cesty, která omezí nasazení tak, aby se spouštěla pouze v případech, kdy se změní kód rozhraní API služby Azure Functions. Při úpravě souboru pracovního postupu můžete nasazení aktivovat ručně.
`workflow_dispatch`	Přidejte `workflow_dispatch`pouze při učení procesu nasazení a ladění všech problémů v sestavení Vite. Odeberte tento řádek, pokud budete pokračovat v tomto zdrojovém kódu nad rámec tohoto článku.
`if ... \|\| github.event_name == 'workflow_dispatch'`	`workflow_dispatch` Událost zahrňte tak, aby se vygenerovala pouze při učení procesu nasazení a ladění všech problémů v sestavení Vite.
`env`	Přidejte proměnné prostředí potřebné k zahrnutí adresy URL rozhraní API služby Azure Functions do statického sestavení pomocí Vite. VITE_BACKEND_URL je adresa URL vaší aplikace Funkcí Azure. VITE_CLOUD_ENV je parametr, který označuje, kdy použít adresu URL VITE_BACKEND_URL. Nepoužívejte NODE_ENV pro tuto ukázku, protože má nežádoucí vliv na stranu.

Uložte soubor a pak ho přidejte, potvrďte a nasdílejte zpět do GitHubu pomocí Gitu:
```
git add .
git commit -m "fix the workflow for a subdir"
git push origin main
```
V prohlížeči znovu spusťte pracovní postup na GitHubu v oblasti akcí forku pro vaši statickou webovou aplikaci.
Front-endová aplikace se nasadí do Azure. Teď musíte nakonfigurovat aplikaci Azure Function App tak, aby umožňovala žádosti CORS ze statické webové aplikace.

7. Konfigurace CORS pro vaši aplikaci Funkcí Azure

Pokud používáte samostatnou aplikaci Azure Functions místo spravované aplikace funkcí, musíte CORS nakonfigurovat tak, aby umožňovala požadavky ze statické webové aplikace.

Na webu Azure Portal otevřete aplikaci Funkcí Azure.
V části API –> CORS přidejte adresu URL statické webové aplikace do seznamu povolených zdrojů.

8. Otestování statické webové aplikace

V prohlížeči otevřete statickou webovou aplikaci.
S aplikací se můžete přihlásit, zobrazit veřejné a soukromé informace a znovu se odhlásit.

9. Vyčištění všech prostředků použitých v této sérii článků

Vyčistěte všechny prostředky vytvořené v této sérii článků.

Na webu Azure Portal odstraňte skupinu prostředků, která odstraní statickou webovou aplikaci a aplikaci funkcí.
Na portálu GitHub odstraňte forkované úložiště.

Řešení problému

Tato ukázka uchovává seznam známých problémů a jejich řešení. Pokud váš problém tu není, otevřete problém.

Veřejné adresy URL statické webové aplikace a aplikace funkcí

Adresu URL statické webové aplikace a adresu URL vaší aplikace funkcí najdete na webu Azure Portal na stránce Přehled jednotlivých prostředků. Tyto adresy URL jsou ve výchozím nastavení veřejné.