Cvičení – analýza omezení webové aplikace založené na dotazování

Dokončeno

Než změníte prototyp, musíte ho spustit, abyste ověřili předpoklady. Prototyp je v úložišti zdrojového kódu na GitHubu.

Vytvoření zdrojů Azure

1. V samostatné kartě nebo okně prohlížeče vytvořte fork ukázkového úložiště na GitHubu pomocí následujícího odkazu: mslearn-advocates.azure-functions-and-signalr. To vám umožní nasdílit změny do vlastní verze zdrojového kódu. Toto je povinný krok pro pozdější nasazení zdrojového kódu do Azure.

2. V terminálu naklonujte úložiště. V následujícím příkazu nahraďte MicrosoftDocs svým účtem:

   git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr stock-prototype
   

3. Nainstalujte závislosti do složky setup-resources .

   cd stock-prototype/setup-resources && npm install
   

   Pokud se zobrazí upozornění, EBADENGINEmůžete je ignorovat.

4. Přihlaste se k Azure pomocí Azure CLI.

   az login
   

5. Zobrazte si předplatná a nastavte výchozí předplatné Azure.

   Zobrazte předplatná.

   az account list --output json | jq -r '.[] | .name' | sort
   

   Pokud chcete nastavit výchozí předplatné, nahraďte YOUR-SUBSCRIPTION-ID ID předplatného z předchozího výstupu Azure CLI.

   az account set --subscription <YOUR-SUBSCRIPTION-ID>
   

   Toto výchozí předplatné slouží k vytvoření prostředků Azure.

6. Vytvořte prostředky Azure a nahrajte ukázková data do databáze. Dokončení procesu může trvat několik minut.

   bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
   

   Nezapomeňte název zabalit do dvojitých uvozovek. Pokud dojde k chybě skriptu s chybou o umístění, které nemá dostupné prostředky, upravte skript tak, aby změnil umístění: LOCATION=<NEW LOCATION>.

7. Zkopírujte požadované informace, budete je potřebovat ke spuštění prototypu.

   Typ prostředku	Proměnná prostředí
   Azure Cosmos DB	Označuje se jako COSMOSDB_CONNECTION_STRING
   Azure Storage	Označuje se jako STORAGE_CONNECTION_STRING
   Skupina prostředků	Označuje se jako RESOURCE_GROUP_NAME.

8. Pomocí skriptu Node.js nahrajte ukázková data do databáze pomocí následujícího příkazu.

   npm start
   

9. V terminálu přejděte do kořenové složky.

   cd ..
   

Instalace závislostí a spuštění prototypu

1. Nainstalujte závislosti.

   cd start/client && npm install && cd ../..
   cd start/server && npm install && cd ../..
   

2. Pokud vás oznámení požádá o výběr aplikace Azure Functions pro pracovní prostor, vyberte start/server. Toto je aplikace funkcí, kterou použijete ke spuštění kódu na straně serveru.

3. Pokud se zobrazí oznámení o instalaci nejnovějších nástrojů Azure Functions Core Tools, vyberte Nainstalovat.

Získání adres URL klienta a serveru

Při místním spuštění musí klientské a serverové aplikace vědět, kde se vzájemně najít. Adresy URL jsou:

• Klient: http://localhost:3000
• Server: http://localhost:7071

Aktualizace místního nastavení pro aplikaci Azure Functions

Přidejte připojovací řetězec do aplikace Azure Functions prototypu.

1. Vytvořte soubor ./start/server/local.settings.json a vložte následující. Tento soubor obsahuje nastavení konfigurace pro projekt místních funkcí.

   {
     "IsEncrypted": false,
     "Values": {
       "AzureWebJobsStorage": "<STORAGE_CONNECTION_STRING>",
       "FUNCTIONS_WORKER_RUNTIME": "node",
       "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
       "COSMOSDB_CONNECTION_STRING": "<COSMOSDB_CONNECTION_STRING>"
     },
     "Host" : {
       "LocalHttpPort": 7071,
       "CORS": "http://localhost:3000",
       "CORSCredentials": true
     }
   }
   

2. Aktualizujte následující proměnné hodnotami, které jste zkopírovali výše.

   Vlastnost	Hodnota
   AzureWebJobsStorage	Nahraďte připojovací řetězec úložiště.
   COSMOSDB_CONNECTION_STRING	Nahraďte připojovací řetězec Cosmos DB.

   Aplikace Functions teď může přijímat žádosti od klienta a pak se připojit k databázi a správně spravovat trigger časovače.

Přidání místního nastavení pro klientskou aplikaci

Přidejte adresu URL serveru do klientské aplikace prototypu.

Otevřete soubor ./start/client a vytvořte .env soubor s následujícím obsahem.

BACKEND_URL=http://localhost:7071

Spuštění serverové aplikace

1. V terminálu spusťte aplikaci Azure Functions.

   cd start/server && npm start
   

2. Počkejte, až terminál zobrazí koncové body rozhraní API.

   Functions:
   
           getStocks: [GET] http://localhost:7071/api/getStocks
   
           setPrice: timerTrigger
   

Spuštění klientské aplikace

1. V novém terminálu spusťte klientskou aplikaci.

   cd start/client && npm start
   
   

2. Když se v oznámení zobrazí, že je aplikace spuštěná, vyberte Otevřít v prohlížeči a použijte prototyp.

   

3. Uspořádejte okna prohlížeče, abyste viděli terminál a prototyp cen akcií najednou.

4. V okně prototypu prohlížeče otevřete vývojářské nástroje prohlížeče. Všimněte si, že prohlížeč každých 5 sekund požaduje rozhraní API pro všechna data, i když se data nezměnila.

5. V okně prohlížeče sledujte výstup aplikace Azure Functions. Jedna cena akcií se mění každou minutu. Když se cena v rozhraní API změní, další klient načte všechna data, která se změní.

   

6. V terminálech start-client a start serveru zastavte aplikace pomocí ctrl + C nebo ukončete terminál výběrem ikony koše.

V této lekci jste spustili prototyp. I když se klient úspěšně spustí, není efektivní. I když si každý jednotlivý klient nemusí všimnout takového malého počtu akcií, který se změní, jak roste počet akcií a počet klientů načítá ze serveru. Prototyp je možné vylepšit. Pojďme se naučit, jak v další lekci.