Megosztás a következőn keresztül:

Statikus webalkalmazás létrehozása kiszolgáló nélküli API-val

  • Cikk

Megtudhatja, hogyan futtathat helyileg, majd helyezhet üzembe egy statikus webalkalmazást kiszolgáló nélküli API-val az Azure-ban. Ez az oktatóanyag a legújabb Azure Functions Node.js programozási modell előzetes verzióját használja. Mivel ez a cikk az Azure Functions előzetes verzióját használja, a statikus webalkalmazástól különálló alkalmazásként lesz üzembe helyezve.

Az alábbiak végrehajtásának módját ismerheti meg:

  • Statikus webalkalmazás (SWA) helyi futtatása Azure-függvényalkalmazással
  • Helyi proxy előtér-kérések a helyi háttér API-hoz az SWA CLI használatával.
  • Telepítse és futtassa távolról ugyanazt a kódot.

A statikus webalkalmazás parancssori felülete által biztosított előtér és háttérrendszer közötti proxy a következőt biztosítja:

  • A React /api/todoURL-címe nem adja meg az API kiszolgálóját vagy portszámát. Az URL-címet használó kérelmek helyileg sikeresek, mert az SWA CLI kezeli a proxyt.
  • Helyi hitelesítési emulátor elérésekor /.auth/login/<provider>
  • Útvonalkezelés és engedélyezés

Hitelesítés ebben a mintában

A mintában szereplő hitelesítés az Azure Static Web Apps szolgáltatás előtérbeli felhasználói számára biztosított:

  • Bejelentkezés/kijelentkezés
  • Nyilvános és privát tartalom

Forráskód ebben a mintában

A minta forráskódjának célja, hogy megismerje, hogyan hozhat létre és helyezhet üzembe statikus webalkalmazásokat kiszolgáló nélküli API-val. A kód nem éles használatra készült.

A kódban számos olyan helyet talál, amely nem követi az ajánlott biztonsági eljárásokat. A kód például a böngészőkonzolra való írásra szolgál console.log .

Éles környezetbe való áttéréskor át kell tekintenie és el kell távolítania minden olyan kódot, amely sérti a szervezet biztonsági ajánlott eljárásait.

1. A fejlesztési környezet előkészítése

Hozza létre a következő fiókokat:

Telepítse a következőket a helyi fejlesztőszámítógépre:

2. A mintaadattár elágazása a GitHubon

A GitHubról történő üzembe helyezés befejezéséhez a mintaadattár saját elágazását kell használnia. Az elágazási folyamat során csak az main ágat kell másolnia.

A mintaadattár elágazása: https://github.com/Azure-Samples/azure-typescript-e2e-apps.

3. Klónozza az elágazott mintaadattárat

  1. Bash-terminálban klónozza az elágazott adattárat a helyi számítógépre. Ne klónozza az eredeti mintaadattárat. Egy példa URL-címe: https://github.com/YOUR-ACCOUNT-NAME/azure-typescript-e2e-apps

    git clone YOUR-FORKED-REPO-URL

  2. Telepítse a helyi előtérbeli alkalmazás függőségeit:

    cd app-react-vite && npm install

  3. Telepítse a helyi háttéralkalmazás függőségeit:

    cd ../api-inmemory && npm install && cd ..

4. Nem kötelező, helyi alkalmazás létrehozása és futtatása

A mintaadattár az előtér- és háttéralkalmazások több verziójával is rendelkezik. Az alábbi lépések az előtér React 18 (Vite) verzióját és az Azure Function 4-es verzióját használják Node.js háttérverzióval és /todo API-útvonalakkal/status.

  1. A mintaalkalmazás gyökeréből az SWA CLI és a ./swa-cli.config.json fájl segítségével hozza létre az előtér- és háttéralkalmazásokat:

    swa build

    Ha olyan hibákba ütközik, amelyek a különböző csomagok és a környezet verziójától függően fordulhatnak elő, a folytatás előtt javítsa ki a hibákat. Fontos tudni, hogy a projekt helyileg sikeresen működik, mielőtt továbblépne az Azure Static Web Apps üzembe helyezésére.

  2. A mintaalkalmazás gyökeréből az SWA CLI használatával indítsa el az alkalmazásokat proxyval.

    swa start

  3. Amikor az alábbi sorokat látja a bash terminálban, a projekt sikeresen elindult.

    [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.

  4. Nyisson meg egy webböngészőt a megadott URL-címre. http://localhost:4280 A következő oldalnak kell megjelennie:

    Képernyőkép a helyi React alkalmazásról a hitelesítés előtt.

  5. Az SWA CLI által biztosított hitelesítéssel jelentkezhet be. A folyamat szimulálja a hitelesítést a felhőalapú Azure Static-webalkalmazásokban. Az előtérbeli kód a /.auth/me végpontot használja a felhasználó identitásának lekéréséhez. Adjon meg hamis felhasználónevet, és ne módosítsa a többi mezőt.

    Képernyőkép a helyi React-alkalmazás szimulált hitelesítési űrlapról.

  6. A felhasználó hitelesítése után az előtér privát információkat jelenít meg, például az API környezeti változóit.

    Képernyőkép a helyi React alkalmazásról a hitelesítés befejezésével.

    Az Azure Function v4 alkalmazás forráskódja ehhez az API-hoz a következő:

    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
});

  7. Bontsa ki a nyilvános és privát szakaszokat, hogy megjelenjen az API tartalma.

5. Új Azure Functions-alkalmazás létrehozása

A statikus webalkalmazás API-val való futtatásának előző szakasza nem kötelező. A cikk többi szakasza szükséges az alkalmazás és az API Azure-felhőben való üzembe helyezéséhez.

Az Azure Functions v4-es futtatókörnyezet előzetes verziójának használatához létre kell hoznia egy új Azure Functions-alkalmazást. A statikus webalkalmazást újra kell felépíteni és újra kell üzembe helyezni, hogy az Azure Functions-alkalmazás URI-ját használhassa a lekérési kérelmekben az API-ba ahelyett, hogy proxyzott és felügyelt API-t használ.

  1. Egy webböngészőben nyissa meg az Azure Portalt egy új Azure Functions-alkalmazás létrehozásához: Új alkalmazás létrehozása

  2. A függvényalkalmazás létrehozásához használja az alábbi információkat:

    Tab:Beállítás Érték
    Alapismeretek: Előfizetés Válassza ki a használni kívánt előfizetést.
    Alapismeretek: Erőforráscsoport Hozzon létre egy új erőforráscsoportot, például first-static-web-app-with-api. A név nem szerepel az alkalmazás nyilvános URL-címében. Az erőforráscsoportok segítenek a kapcsolódó Azure-erőforrások csoportosításában és kezelésében.
    Alapismeretek: Példány részletei: Függvényalkalmazás neve Adjon meg egy globálisan egyedi nevet, például swa-api 3 véletlenszerű karaktert ad hozzá a végén, például swa-api-123.
    Alapismeretek: Példány részletei: Kód vagy tároló Válassza ki Code.
    Alapismeretek: Példány részletei: Futtatókörnyezeti verem Válassza ki Node.js.
    Alapismeretek: Példány részletei: Futtatókörnyezeti verem Válassza ki 18LTS.
    Alapismeretek: Operációs rendszer Válassza ki Linux.
    Alapismeretek: Üzemeltetés Válassza ki Consumption.
    Tárolás: Tárfiók Ez ne módosítsa. Létrejön egy új Azure Storage-fiók, amely segít a függvényesemények elhárításában.
    Hálózat Ne változtass semmit.
    Figyelés: Application Insights: Application Insights engedélyezése Válassza ki Yes. Ne módosítsa az alapértelmezett nevet.
    Üzembe helyezés: GitHub Actions Settings: Folyamatos üzembe helyezés Válassza ki Enable.
    Üzembe helyezés: GitHub-fiók Válassza ki a GitHub-fiókját.
    Üzembe helyezés: Szervezet Válassza ki a GitHub-fiókját, amelyet a mintaadattár elágazásakor használt.
    Üzembe helyezés: Adattár Válassza ki az elágazott adattár nevét. azure-typescript-e2e-apps
    Üzembe helyezés: Ág Válassza ki main.
    Címkék Ne változtass semmit.
    Ellenőrzés és létrehozás Válassza ki Create.

    A lépés egy GitHub yaml-munkafolyamatfájlt ad hozzá az elágaztatott adattárhoz.

  3. Az erőforrás létrehozásakor válassza a Go to resource gombot.

  4. Válassza a Beállítások –> Konfiguráció lehetőséget, majd adjon hozzá egy konfigurációs beállítást az Azure-függvényhez Node.js v4-futtatókörnyezethez névvel AzureWebJobsFeatureFlags és értékkel EnableWorkerIndexing.

  5. A beállítás mentéséhez kattintson a Mentés gombra.

  6. Bash-terminálban a Git használatával lekérheti az új yaml munkafolyamat-fájlt a GitHub elágaztatott adattárából a helyi számítógépre.

    git pull origin main

  7. A Visual Studio Code-ban nyissa meg a következő helyen található új yaml-munkafolyamatfájlt ./.github/workflows/: .

  8. A megadott alapértelmezett munkafolyamat-fájl feltételezi, hogy a függvény forráskódja az adattár gyökerében található, és az adattárban az egyetlen alkalmazás, de ez a minta nem így van. A probléma megoldásához szerkessze a fájlt. A szerkeszteni kívánt vonalakat a következő yaml-blokk emeli ki, és az alábbiakban ismertetjük:

    # 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
    Tulajdonság módosítása Cél
    name Rövidítse le a nevet, hogy könnyen megtalálhassa az elágazás GitHub-műveletek listájában.
    paths Adja hozzá az elérési utak szakaszt, hogy az üzembe helyezés csak az Azure Functions API-kód módosításakor fusson. A munkafolyamat-fájl szerkesztésekor manuálisan is aktiválhatja az üzembe helyezést.
    AZURE_FUNCTIONAPP_PACKAGE_PATH Ha alkönyvtárat használ a forráskódhoz, ennek az alkönyvtár elérési útjának és nevének kell lennie.
    VERBOSE Ez a beállítás hasznos a buildelési és üzembe helyezési folyamat hibakereséséhez.
    lépés neve Upload artifact for deployment job Ez a lépés létrehoz egy letölthető összetevőt. Ez akkor hasznos, ha pontosan az Azure-függvényben üzembe helyezett fájlokat hibakereséssel hárítja el.

    Ez Upload artifact for deployment job nem kötelező. Az Azure Functionsben üzembe helyezett fájlok megértésére és hibakeresésére, illetve a fájlok külön környezetben való használatára szolgál.

  9. Mentse a fájlt, majd adja hozzá, véglegesítse és küldje vissza a GitHubra a gittel:

    git add .
git commit -m "fix the workflow for a subdir"
git push origin main

  10. Egy böngészőből futtassa újra a munkafolyamatot a GitHubon az elágazás műveleti területén.

    A GitHub elágaztatott adattárának képernyőképe, amelyen egy GitHub-művelet újrafuttatása látható.

  11. A folytatás előtt várja meg, amíg a művelet sikeresen befejeződik.

  12. Webböngészőben használja a függvényalkalmazás külső API-végpontját az alkalmazás sikeres üzembe helyezésének ellenőrzéséhez.

    https://YOUR-FUNCTION-APP-NAME.azurewebsites.net/api/todo

    A memóriabeli adatok JSON-eredménye a következő:

    {
    "1": "Say hello"
}

  13. Jegyezze fel a függvény URL-címét. Erre a következő szakaszban van szükség.

  14. Tudja, hogy az Azure-függvényalkalmazás a felhőben működik. Most létre kell hoznia a statikus webalkalmazást a felhőben az API használatához.

6. Új Azure Static-webalkalmazás létrehozása

Ez a létrehozási folyamat ugyanazt az elágaztatott GitHub-mintaadattárat helyezi üzembe az Azure-ban. Az üzembe helyezést úgy konfigurálja, hogy csak az előtéralkalmazást használja.

  1. Nyissa meg az Azure Portalt, és jelentkezzen be az Azure-fiókjával: Azure Portal.

  2. A létrehozási lépések végrehajtásához használja az alábbi információkat:

    Felszólítás Beállítás
    Előfizetés Válassza ki a használni kívánt előfizetést.
    Erőforráscsoport Válassza ki Create new és adja meg az erőforráscsoport új elemét, például first-static-web-app. A név nem szerepel az alkalmazás nyilvános URL-címében. Az erőforráscsoportok segítségével csoportosíthatja az egyetlen projekthez használt erőforrásokat.
    Üzemeltetési terv típusa A következők szerint válasszon: Free
    Az Azure Functions és az előkészítés részletei Ne módosítsa az alapértelmezett beállítást. Nem telepíti a függvény API-t a statikus webalkalmazásban.
    Üzembe helyezés részletei – forrás A következők szerint válasszon: GitHub
    Üzembe helyezés részletei – GitHub Szükség esetén jelentkezzen be a GitHubra.
    Üzembe helyezés részletei – Szervezet Válassza ki a GitHub-fiókját.
    Üzembe helyezés részletei – Adattár Válassza ki a elágazott adattárat.azure-typescript-e2e-apps
    Üzembe helyezés részletei – Ág Válassza ki az main ágat.
    Build részletei – Összeállítási bemutatók Válassza ki Custom.
    Build részletei – Alkalmazás helye Írja be /app-react-vite.
    Build részletei – Api helye Hagyja üresen
    Build részletei – Kimeneti hely Adja meg az előtér kimeneti könyvtárának helyét. dist

  3. Válassza a Felülvizsgálat + létrehozás, majd a Létrehozás lehetőséget.

  4. Az erőforrás létrehozásakor válassza a Go to resource gombot.

  5. Az Áttekintés lapon jegyezze fel a statikus webalkalmazás URL-címét. Erre a következő szakaszban van szükség az Azure-függvény CORS-beállításának beállításakor.

  6. A létrehozási folyamat létrehoz egy GitHub yaml-munkafolyamatfájlt az elágaztatott GitHub-adattárban. A módosítás lekérése a következő paranccsal:

    git pull origin main

  7. A gitHub-művelet ./.github/workflows/azure-static-web-apps-*.yml felelős az előtérbeli alkalmazás létrehozásáért és üzembe helyezéséért. Szerkessze a fájlt, hogy környezeti változót adjon hozzá a felhőalapú háttér API URL-címéhez. A szerkeszteni kívánt vonalak a következő yaml-blokkban vannak kiemelve, és a yaml-blokk alatt vannak elmagyarázva.

    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"
    Tulajdonság módosítása Cél
    paths Adja hozzá az elérési utak szakaszt, hogy az üzembe helyezés csak az Azure Functions API-kód módosításakor fusson. A munkafolyamat-fájl szerkesztésekor manuálisan is aktiválhatja az üzembe helyezést.
    workflow_dispatch Csak az üzembehelyezési folyamat megismerése és a Vite-buildben felmerülő problémák hibakeresése során adja hozzá.workflow_dispatch Távolítsa el ezt a sort, ha ezt a forráskódot a cikken túl folytatja.
    if ... || github.event_name == 'workflow_dispatch' Vegye fel az workflow_dispatch eseményt úgy, hogy csak az üzembe helyezési folyamat megismerése és a Vite-buildben felmerülő problémák hibakeresése közben hozzon létre buildet.
    env Adja hozzá azOkat a környezeti változókat, amely ahhoz szükséges, hogy az Azure Function API URL-címét belefoglalja a statikus buildbe a Vite használatával. VITE_BACKEND_URL az Azure-függvényalkalmazás URL-címe. VITE_CLOUD_ENV egy paraméter, amely jelzi, hogy mikor érdemes használni a VITE_BACKEND_URL URL-címet. Ne használjon NODE_ENV ehhez a mintához, mert az nem szándékos hatással van rá.

  8. Mentse a fájlt, majd adja hozzá, véglegesítse és küldje vissza a GitHubra a gittel:

    git add .
git commit -m "fix the workflow for a subdir"
git push origin main

  9. Egy böngészőből futtassa újra a munkafolyamatot a GitHubon az elágazáshoz tartozó műveletek területén a statikus webalkalmazáshoz.

  10. Az előtérbeli alkalmazás üzembe helyezése az Azure-ban történik. Most konfigurálnia kell az Azure-függvényalkalmazást, hogy engedélyezze a CORS-kérelmeket a statikus webalkalmazásból.

7. A CORS konfigurálása az Azure-függvényalkalmazáshoz

Ha egy különálló Azure-függvényalkalmazást használ felügyelt függvényalkalmazás helyett, konfigurálnia kell a CORS-t a statikus webalkalmazás kéréseinek engedélyezéséhez.

  1. Nyissa meg az Azure-függvényalkalmazást az Azure Portalon.
  2. Az API -> CORS szakaszban adja hozzá a statikus webalkalmazás URL-címét az engedélyezett források listájához.

8. A statikus webalkalmazás tesztelése

  1. Nyissa meg a statikus webalkalmazást egy böngészőben.
  2. Lépjen kapcsolatba az alkalmazással a bejelentkezéshez, a nyilvános és a privát adatok megtekintéséhez, valamint a kijelentkezéshez.

9. A cikksorozatban használt összes erőforrás eltávolítása

Törölje a cikksorozatban létrehozott összes erőforrást.

  1. Az Azure Portalon törölje az erőforráscsoportot, amely törli a statikus webalkalmazást és a függvényalkalmazást.
  2. A GitHub portálon törölje az elágaztatott adattárat.

Hibaelhárítás

Ez a minta az ismert problémákat és megoldásokat tartalmazza. Ha a probléma nem szerepel a listában, nyisson meg egy problémát.

Statikus webalkalmazás és függvényalkalmazás nyilvános URL-címei

A statikus webalkalmazás URL-címét és a függvényalkalmazás URL-címét mindig megtalálhatja az Azure Portalon, az egyes erőforrások Áttekintés lapján. Ezek az URL-címek alapértelmezés szerint nyilvánosak.

Következő lépések