Övning – Analysera begränsningarna för en avsökningsbaserad webbapp

15 minuter

Innan du ändrar prototypen måste du köra den för att verifiera antagandena. Prototypen finns i en källkodslagringsplats på GitHub.

Skapa Azure-resurser

I en separat webbläsarflik eller ett fönster förgrenar du exempellagringsplatsen på GitHub med följande länk: mslearn-advocates.azure-functions-and-signalr. På så sätt kan du skicka ändringarna till din egen version av källkoden. Det här är ett obligatoriskt steg för att distribuera källkoden till Azure senare i modulen.

Klona lagringsplatsen i terminalen. Ersätt med ditt konto i följande kommando MicrosoftDocs :

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

Installera beroendena i mappen setup-resources .
```
cd stock-prototype/setup-resources && npm install
```
Om du får varningar om EBADENGINEkan du ignorera dem.
Logga in på Azure med Azure CLI.
```
az login
```
Visa dina prenumerationer och ange din standardprenumeration för Azure.

Visa prenumerationerna.
```
az account list --output json | jq -r '.[] | .name' | sort
```
Om du vill ange standardprenumerationen ersätter du YOUR-SUBSCRIPTION-ID med ett prenumerations-ID från föregående Azure CLI-utdata.
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
Den här standardprenumerationen används för att skapa Azure-resurserna.
Skapa Azure-resurserna och ladda upp exempeldata till databasen. Processen kan ta några minuter att slutföra.
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
Se till att du omsluter namnet med dubbla citattecken.
Kopiera nödvändig information, du behöver dessa för att köra prototypen.

Resurstyp Miljövariabel

Azure Cosmos DB Kallas COSMOSDB_CONNECTION_STRING

Azure Storage Kallas STORAGE_CONNECTION_STRING

Resursgrupp Kallas RESOURCE_GROUP_NAME.
Använd ett Node.js skript för att ladda upp exempeldata till databasen med följande kommando.
```
npm start
```
I terminalen navigerar du till rotmappen.
```
cd ..
```

Resurstyp	Miljövariabel
Azure Cosmos DB	Kallas COSMOSDB_CONNECTION_STRING
Azure Storage	Kallas STORAGE_CONNECTION_STRING
Resursgrupp	Kallas RESOURCE_GROUP_NAME.

Installera beroenden och kör prototypen

Installera beroenden.

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

Om du uppmanas att välja en Azure Functions-app för arbetsytan väljer du start/server. Det här är funktionsappen som du använder för att köra koden på serversidan.
Om du får ett meddelande om att installera de senaste Azure Functions Core-verktygen väljer du Installera.

Hämta klient- och server-URL:er

När de körs lokalt måste klient- och serverprogrammen veta var de ska hitta varandra. URL:erna är:

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

Uppdatera lokala inställningar för Azure Functions-appen

Lägg till anslutningssträng i prototypens Azure Functions-app.

Skapa filen ./start/server/local.settings.json och klistra in följande. Den här filen har konfigurationsinställningarna för det lokala funktionsprojektet.

{
  "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
  }
}

Uppdatera följande variabler med värden som du kopierade från ovan.

Property Värde

AzureWebJobsStorage Ersätt med Storage-anslutningssträng.

COSMOSDB_CONNECTION_STRING Ersätt med Cosmos DB-anslutningssträng.

Nu kan Functions-appen ta emot begäranden från klienten och sedan ansluta till databasen och hantera timerutlösaren korrekt.

Property	Värde
AzureWebJobsStorage	Ersätt med Storage-anslutningssträng.
COSMOSDB_CONNECTION_STRING	Ersätt med Cosmos DB-anslutningssträng.

Lägga till lokala inställningar för klientappen

Lägg till server-URL:en i prototypens klientprogram.

Öppna ./start/client och skapa en .env fil med följande innehåll.

BACKEND_URL=http://localhost:7071

Kör serverprogrammet

Starta Azure Functions-programmet i terminalen.
```
cd start/server && npm start
```

Vänta tills terminalen visar API-slutpunkterna.

Functions:

        getStocks: [GET] http://localhost:7071/api/getStocks

        setPrice: timerTrigger

Kör klientprogrammet

Starta klientprogrammet i en ny terminal.
```
cd start/client && npm start
```
När meddelandet visar att programmet körs väljer du Öppna i webbläsare för att använda prototypen.
Ordna webbläsarfönstren så att du kan se terminalen och prototypen av aktiekurserna samtidigt.
Öppna webbläsarens utvecklarverktyg i prototypwebbläsarens fönster. Observera att webbläsaren skickar en begäran till API:et var femte sekund för alla data, även om data inte har ändrats.
I webbläsarfönstret tittar du på utdata för Azure Functions-appen. En enda aktiekurs ändras varje minut. När priset i API:et ändras inkluderar nästa klienthämtning av alla data den ändringen.
I både startklient- och startserverterminalerna stoppar du programmen med Ctrl + C eller avslutar terminalen genom att välja papperskorgsikonen.

I den här lektionen körde du prototypen. Även om klienten körs är den inte effektiv. Även om varje enskild klient kanske inte märker detta med ett så litet antal aktier, kommer det att ändras när antalet aktier växer och antalet klienter hämtar från servern. Prototypen kan förbättras. Nu ska vi lära oss mer i nästa lektion.

Fortsätt