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 v4-es verzióját használják a háttér node.js verziójával és /todo az /status API-útvonalakkal.

  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:

    Screenshot of local React app prior to authentication.

  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.

    Screenshot of local React app's mock authentication form.

  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.

    Screenshot of local React app with authentication complete.

    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.
    Networking Ne változtass semmit.
    Figyelés: Alkalmazás Elemzések: Alkalmazás Elemzések engedélyezése Válassza ki Yes. Ne módosítsa az alapértelmezett nevet.
    Üzembe helyezés: GitHub Actions Gépház: 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.
    Tags 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 Gépház –> Konfiguráció lehetőséget, majd adjon hozzá egy konfigurációs beállítást az Azure Function Node.js v4 futtatókörnyezethez névvel AzureWebJobsFeatureFlags és értékkelEnableWorkerIndexing.

  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.

    Screenshot of GitHub forked repository, showing how to rerun a GitHub action.

  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:

    Adatkérés Setting
    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.

További lépések