Gyakorlat – Azure Functions-projekt létrehozása

  • 6 perc

A bevásárlólista-webalkalmazáshoz szükség van egy API-ra. Ebben a gyakorlatban egy Azure Functions-projekt használatával hozhatja létre és futtathatja az API-t. Innen egy új függvénnyel bővítheti az API-t a Visual Studio Code Azure Functions-bővítményével.

Ebben a gyakorlatban a következő lépéseket kell elvégeznie:

  1. Hozzon létre egy ágat a webalkalmazás módosításának előkészítésekor.
  2. Ismerkedjen meg az Azure Functions-projektel.
  3. Hozza létre a HTTP GET függvényt.
  4. A termékek lekéréséhez cserélje le a függvényindító kódot a logikára.
  5. Konfigurálja a webalkalmazást ÚGY, hogy HTTP-kéréseket proxyzjon az API-nak.
  6. Futtassa az API-t és a webalkalmazást.

A függvényalkalmazás beszerzése

Most vegyen fel egy API-t, és csatlakoztassa az előtér-alkalmazáshoz. Az api-starter mappa egy hiányos Azure Functions-projektet tartalmaz. Szóval, fejezzük be most.

API-ág létrehozása

Az alkalmazás módosítása előtt érdemes létrehozni egy új ágat a módosításokhoz. Az alkalmazás API-jának befejezésére készül, így most itt az ideje, hogy létrehozzon egy ágat.

  1. A Visual Studio Code-ban nyissa meg a parancspalettát az F1 billentyű lenyomásával.

  2. Adja meg és válassza a Git: Checkout to....

  3. Válassza az Új ág létrehozása lehetőséget.

  4. Adja meg az api-t az új ágnévhez, és nyomja le az Enter billentyűt.

Ezzel létrehozta az api git-ágat.

Az Azure Functions API befejezése

Az API befejezéséhez először a kezdő API-kódot egy API nevű mappába kell áthelyeznie. A Static Web Apps-példány létrehozásakor megadta a api_location mappanevét.

  1. A Visual Studio Code-ban nyissa meg a parancspalettát az F1 billentyű lenyomásával.

  2. Adja meg és válassza a Terminál: Új terminál létrehozása (aktív munkaterületen) lehetőséget.

  3. Győződjön meg arról, hogy a projekt gyökérmappájában van.

  4. Futtassa a következő Git-parancsot az api-starter mappa api-ra való átnevezéséhez.

    git mv api-starter api

  5. Nyissa meg a parancskatalógust az F1 billentyűvel.

  6. Adja meg és válassza a Git: Az összes véglegesítése lehetőséget.

  7. Írja be a véglegesítési üzenet API-t , és nyomja le az Enter billentyűt.

Most megjelenik egy API-mappa a Visual Studio Code Explorerben. Az api mappa tartalmazza az Azure Functions-projektet, valamint három függvényt.

Mappa és fájl Metódus Útvonal
api/products-post POST products
api/products-put PUT products/:id
api/products-delete Törlés... products/:id

A GET HTTP-függvény létrehozása

Az API tartalmaz útvonalakat a termékek a bevásárlólistához való kezeléséhez, de nem tartalmaz a termékek beolvasásához szükséges útvonalat. Most vizsgáljuk meg.

A Visual Studio Code Azure Functions-bővítményének telepítése

Azure Functions-alkalmazásokat a Visual Studio Code Azure Functions-bővítményével hozhat létre és kezelhet.

  1. Nyissa meg a Visual Studio Marketplace-t, és telepítse a Visual Studio Code Azure Functions-bővítményét .

  2. Amikor a Bővítmény lap betöltődik a Visual Studio Code-ban, válassza a Telepítés lehetőséget.

  3. A telepítés befejezése után válassza az Újratöltés lehetőséget.

Feljegyzés

Mindenképpen telepítse az Azure Functions Core Toolst, amely lehetővé teszi az Azure Functions helyi futtatását.

A függvény létrehozása

Most kiterjesztheti az Azure-függvényalkalmazást egy függvénnyel a termékek beszerzéséhez.

  1. A Visual Studio Code-ban nyissa meg a parancspalettát az F1 billentyű lenyomásával.

  2. Adja meg és válassza ki az Azure Functions: Függvény létrehozása lehetőséget.

  3. Amikor a rendszer függvény létrehozására kéri, válassza a HTTP-eseményindítót.

  4. Adja meg a products-get függvény nevét.

  5. Hitelesítési szintként válassza a Névtelen lehetőséget.

Feljegyzés

A függvényalkalmazás az api mappában található, amely elválasztja az egyes webalkalmazás-projektektől. Az összes előtér-keretrendszereket használó webalkalmazás ugyanazt az API-t hívja meg. Eldöntheti, hogyan strukturálja az alkalmazást, azonban ebben a mintában célszerűbb külön-külön megtekinteni őket.

A HTTP-metódus és az útvonalvégpont konfigurálása

Fontos megjegyezni, hogy az api/products-get mappa tartalmazza a function.json fájlt. Ez a fájl tartalmazza a függvény konfigurációját.

A konvenció alapján az útvonal végpontja ugyanazzal a névvel rendelkezik, mint a függvényt tartalmazó mappa. Mivel a függvény a products-get mappában jön létre, az útvonalvégpont alapértelmezés szerint termékek lekéréseként jön létre. Azonban azt szeretné, hogy a végpont neve legyen products.

A függvény konfigurálása:

  1. Nyissa meg az api/products-get/function.json fájlt.

  2. Figyelje meg, hogy a metódusok mind GET a POST.

  3. Módosítsa a metódustömböt úgy, hogy csak a kéréseket engedélyezze GET .

  4. Adjon hozzá egy bejegyzést "route": "products" a metódustömb után.

Így a függvény a products lapra irányuló HTTP GET-kérelem esetén aktiválódik. A function.json fájlnak most az alábbi kódhoz hasonlóan kell kinéznie:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

A függvény logikájának frissítése

Az api/products-get mappában található index.js fájl azt a logikát tartalmazza, amely akkor fut le, amikor az útvonalra vonatkozó HTTP-kérelmet küld.

A termékek beszerzéséhez frissítenie kell a logikát. A JavaScript-modulban /shared/product-data.js adatelérési logika található. A product-data modul elérhetővé teszi a getProducts függvényt a termékek bevásárlólistához való beolvasásához.

Most módosítsa a függvény végpontját úgy, hogy az a termékeket adja vissza:

  1. Nyissa meg az api/products-get/index.js fájlt.

  2. Cserélje le a tartalmát a következő kódra:

    const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

A függvény lekéri a termékeket, és sikeres esetben 200-os állapotkóddal adja vissza őket.

Forrásközi erőforrásmegosztás (CORS) konfigurálása helyileg

Az Azure Static Web Appsben való közzétételkor nem kell aggódnia a CORS miatt. Az Azure Static Web Apps automatikusan konfigurálja az alkalmazást úgy, hogy az egy fordított proxyval tudjon kommunikálni az Azure-beli API-val. Ha azonban helyileg futtatja, konfigurálnia kell a CORS-t ahhoz, hogy lehetővé tegye a webalkalmazás és az API közötti kommunikációt.

Most arra kell utasítania az Azure Functions szolgáltatást, hogy engedélyezze a webalkalmazás számára, hogy HTTP-kérelmeket küldjön az API-nak a számítógépen.

  1. Hozzon létre egy api/local.settings.json nevű fájlt.

  2. Adja hozzá a következő tartalmat a fájlhoz:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Feljegyzés

A local.settings.json fájl szerepel a .gitignore fájlban, amely megakadályozza ennek a fájlnak a leküldését a GitHubra. Ennek az az oka, hogy ebben a fájlban olyan titkos kulcsokat tárolhat, amelyeket nem szeretne a GitHubon tárolni. Ezért kellett létrehoznia a fájlt, amikor létrehozta az adattárat a sablonból.

Az API futtatása

Eljött az ideje, hogy megtekintse a webalkalmazás és az Azure Functions-projekt együttműködését. Először futtassa az Azure Functions-projektet helyileg a következő lépésekkel:

Feljegyzés

Mindenképpen telepítse az Azure Functions Core Toolst, amely lehetővé teszi az Azure Functions helyi futtatását.

  1. Nyisson meg egy git-terminált, és lépjen az API mappába:

    cd api

  2. Futtassa helyileg az Azure Functions alkalmazást:

    npm install

    npm start

A webalkalmazás futtatása

Az API fut. Most konfigurálnia kell az előtér-alkalmazást arra, hogy az az API-nak küldje el a HTTP-kérelmét. Az előtérbeli alkalmazás egy porton fut, az API pedig egy másik porton (7071). Minden előtér-keretrendszer konfigurálható úgy, hogy a HTTP-kérelmeket biztonságosan továbbítsa egy portra egy proxy használatával.

A proxyport konfigurálása

Konfigurálja a proxyt az előtér-alkalmazáshoz a következő lépésekkel:

  1. Nyissa meg az angular-app/proxy.conf.json fájlt.

  2. Keresse meg a target: 'http://localhost:7071' beállítást.

  3. Figyelje meg, hogy a cél portja a 7071-re mutat.

  1. Nyissa meg a react-app/package.json fájlt.

  2. Keresse meg a "proxy": "http://localhost:7071/", beállítást.

  3. Figyelje meg, hogy a proxy portja a 7071-re mutat.

  1. Nyissa meg a svelte-app/rollup.config.js fájlt.

  2. Keresse meg a kódsort const api = 'http://localhost:7071/api';.

  3. Figyelje meg, hogy az API portja a 7071-esre mutat.

  1. Nyissa meg a vue-app/vue.config.js fájlt.

  2. Keresse meg a target: 'http://localhost:7071', beállítást.

  3. Figyelje meg, hogy a cél portja a 7071-re mutat.

Az előtérbeli webalkalmazás futtatása

Az API már fut a 7071-es porton. Most, amikor futtatja a webalkalmazást, az a HTTP-kéréseit az API-nak küldi el. Futtassa a webalkalmazást a következő lépésekkel:

  1. Nyisson meg egy második Git-terminálpéldányt.

  2. Ezután adja meg ezt a parancsot, hogy a kívánt előtér-keretrendszer mappájába lépjen:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  3. Futtassa az előtérbeli ügyfélalkalmazást:

    npm start

    npm start

    npm run dev

    npm run serve

Az alkalmazás megnyitása a böngészőben

Eljött az ideje, hogy megtekintse a helyileg futó alkalmazást a Azure Functions API-val.

  1. Nyissa meg a következő címet: http://localhost:4200.
  1. Nyissa meg a következő címet: http://localhost:3000.
  1. Nyissa meg a következő címet: http://localhost:5000.
  1. Nyissa meg a következő címet: http://localhost:8080.
  1. Elkészítette az alkalmazást, és most helyileg fut, és HTTP GET-kéréseket küld az API-nak. Most állítsa le a futó alkalmazást és API-t a Ctrl-C billentyűkombináció lenyomásával a terminálokon.

Következő lépések

Az alkalmazás helyileg működik, a következő lépés pedig az alkalmazás közzététele az API-val.