Gyakorlat – Azure Functions-projekt létrehozása

  • 6 perc

A bevásárlólista-webalkalmazásnak API-ra van szüksége. 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 letöltése

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

API-ág létrehozása

Mielőtt módosítanál egy alkalmazást, célszerű új ágat létrehozni a módosításokhoz. Az alkalmazás API-jának befejezésére készül, ezért most érdemes létrehozni egy ágat.

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

  2. Válassza a Git: Checkout to... parancsot.

  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.

Most hozta létre az api git ágat.

Az Azure Functions API befejezése

Az API befejezéséhez először a kezdő API-kódot egy nevű apimappá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 található.

  4. Futtassa a következő git parancsot a api-starter mappa apiátnevezéséhez.

    git mv api-starter api

  5. Nyissa meg a parancskatalógust az F1 billentyű lenyomásával.

  6. Lépjen be és válassza a Git: Az összes véglegesítése.

  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 Módszer Útvonal
api/products-post POSZT products
api/products-put HELYEZ products/:id
api/products-delete TÖRÖL products/:id

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

Az API-nak vannak útvonalai a bevásárlólista termékeinek manipulálására, de nem rendelkezik a termékek lekérésére szolgáló útvonalsal. Adjunk hozzá most.

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.

Jegyzet

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.

Jegyzet

A Functions alkalmazás a api mappában található, amely elválasztja az egyes webalkalmazás-projektektől. Az előtérbeli keretrendszereket használó összes webalkalmazás ugyanarra az API-ra indít hívásokat. Eldöntheti, hogyan strukturálja az alkalmazást, de ebben a mintában segít elkülöníteni őket.

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

Figyelje meg, hogy az api/products-get mappa tartalmazza a fájltfunction.json. Ez a fájl tartalmazza a függvény konfigurációját.

Az útvonalvégpont neve megegyezik a függvényt tartalmazó mappával konvenció szerint. 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. Azt szeretné azonban, hogy a végpont termékek legyenek.

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

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

  2. Figyelje meg, hogy a metódusok lehetővé teszik GET és POSTis.

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

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

Most a függvény a GET irányuló HTTP-kéréskor aktiválódik. A function.json a következő 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énylogika frissítése

A mappában api/products-get fájl olyan logikát tartalmaz, amely akkor fut, amikor HTTP-kérelmet küld az útvonalra.

A termékek beszerzéséhez frissítenie kell a logikát. A JavaScript-modulban /shared/product-data.jsadatelérési logika található. A product-data modul egy getProducts függvényt tesz elérhetővé a bevásárlólista termékeinek lekéréséhez.

Most módosítsa a függvényvégpontot a termékek visszaadásához:

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

  2. A tartalmat cserélje 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, hogy fordított proxy használatával kommunikáljon az Azure-beli API-val. Helyi futtatáskor azonban konfigurálnia kell a CORS-t, hogy a webalkalmazás és az API kommunikálhasson.

Most kérje meg az Azure Functionst, hogy engedélyezze a webalkalmazásnak, hogy HTTP-kéréseket küldjön az API-nak a számítógépen.

  1. Hozzon létre egy api/local.settings.jsonnevű 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"
  }
}

Jegyzet

A local.settings.json fájl szerepel a .gitignore fájlban, ami megakadályozza, hogy a fájl le legyen küldve a GitHubra. A fájl azért szerepel a .gitignore-ban , mert olyan titkos kulcsokat tárolhat benne, amelyeket nem szeretne a GitHubon tárolni. Ez a listaelem az oka annak, hogy létre kellett hoznia a fájlt, amikor létrehozta az adattárat a sablonból.

Az API futtatása

Most ideje megnézni, hogy a webalkalmazás és az Azure Functions-projekt együttműködik-e. Kezdje az Azure Functions-projekt helyi futtatásával az alábbi lépésekkel:

Jegyzet

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 nyissa meg a api mappát:

    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érbeli alkalmazást, hogy http-kérést küldjön az API-nak. 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 biztonságosan proxyzhassa a HTTP-kéréseket egy porton.

A proxyport konfigurálása

Konfigurálja az előtérbeli alkalmazás proxyját az alábbi lépésekkel:

  1. Nyissa meg az angular-app/proxy.conf.jsonfá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.jsonfá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.jsfájlt.

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

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

  1. Nyissa meg a vue-app/vue.config.jsfá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. Az alábbi lépések követésével futtassa a webalkalmazást:

  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 a front-end kliensalkalmazást:

    npm start

    npm start

    npm run dev

    npm run serve

Tallózz az alkalmazásodra

Itt az ideje, hogy az alkalmazás helyileg fusson az Azure Functions API-val.

  1. Menjen a http://localhost:4200.
  1. Menjen a http://localhost:3000.
  1. Menjen a http://localhost:5000.
  1. Menjen a 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.