Samouczek: Połączenie aplikacji internetowej Node.js za pomocą usługi Azure Cosmos DB dla bazy danych MongoDB (rdzeń wirtualny)

Artykuł
04/19/2024

DOTYCZY: Rdzenie wirtualne bazy danych MongoDB

W tym samouczku utworzysz aplikację internetową Node.js, która łączy się z usługą Azure Cosmos DB for MongoDB w architekturze rdzeni wirtualnych. Stos MongoDB, Express, React.js, Node.js (MERN) to popularna kolekcja technologii używanych do tworzenia wielu nowoczesnych aplikacji internetowych. Za pomocą usługi Azure Cosmos DB dla bazy danych MongoDB (rdzeń wirtualny) możesz utworzyć nową aplikację internetową lub zmigrować istniejącą aplikację przy użyciu sterowników bazy danych MongoDB, które już znasz. W tym samouczku zostały wykonane następujące czynności:

Konfigurowanie środowiska
Testowanie aplikacji MERN przy użyciu lokalnego kontenera bazy danych MongoDB
Testowanie aplikacji MERN za pomocą klastra rdzeni wirtualnych
Wdrażanie aplikacji MERN w usłudze aplikacja systemu Azure

Wymagania wstępne

Do ukończenia tego samouczka potrzebne są następujące zasoby:

Istniejący klaster rdzeni wirtualnych.
Konto usługi GitHub.
- Usługa GitHub oferuje bezpłatne godziny usługi Codespaces dla wszystkich użytkowników.

Konfigurowanie środowiska programowania

Środowisko kontenera deweloperskiego jest dostępne ze wszystkimi zależnościami wymaganymi do wykonania każdego ćwiczenia w tym projekcie. Kontener deweloperski można uruchomić w usłudze GitHub Codespaces lub lokalnie przy użyciu programu Visual Studio Code.

GitHub Codespaces
Visual Studio Code

Usługa GitHub Codespaces uruchamia kontener deweloperski zarządzany przez usługę GitHub za pomocą programu Visual Studio Code dla sieci Web jako interfejsu użytkownika. W przypadku najprostszego środowiska programistycznego użyj usługi GitHub Codespaces, aby mieć wstępnie zainstalowane odpowiednie narzędzia deweloperskie i zależności, aby ukończyć ten moduł szkoleniowy.

Ważne

Wszystkie konta usługi GitHub mogą korzystać z usługi Codespaces przez maksymalnie 60 godzin bezpłatnych każdego miesiąca z 2 podstawowymi wystąpieniami.

Rozpocznij proces tworzenia nowego repozytorium GitHub Codespace main w azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app gałęzi repozytorium GitHub.
Na stronie Tworzenie przestrzeni kodu przejrzyj ustawienia konfiguracji przestrzeni kodu, a następnie wybierz pozycję Utwórz nową przestrzeń kodu
Poczekaj na uruchomienie przestrzeni kodu. Ten proces uruchamiania może potrwać kilka minut.
Otwórz nowy terminal w przestrzeni kodu.

Napiwek

Możesz użyć menu głównego, aby przejść do opcji menu Terminal, a następnie wybrać opcję Nowy terminal .
Sprawdź wersje narzędzi używanych w tym samouczku.
```
docker --version

node --version

npm --version

az --version
```
Uwaga

Ten samouczek wymaga następujących wersji każdego narzędzia, które są wstępnie zainstalowane w danym środowisku:

Narzędzie Wersja

Docker ≥ 20.10.0

Node.js ≥ 18.0150

NPM ≥ 9.5.0

Interfejs wiersza polecenia platformy Azure ≥ 2.46.0
Zamknij terminal.
Pozostałe kroki opisane w tym samouczku mają miejsce w kontekście tego kontenera deweloperskiego.

Narzędzie	Wersja
Docker	≥ 20.10.0
Node.js	≥ 18.0150
NPM	≥ 9.5.0
Interfejs wiersza polecenia platformy Azure	≥ 2.46.0

Rozszerzenie Dev Containers dla programu Visual Studio Code wymaga zainstalowania platformy Docker na komputerze lokalnym. Rozszerzenie hostuje kontener dewelopera lokalnie przy użyciu hosta platformy Docker z odpowiednimi narzędziami deweloperów i wstępnie zainstalowanymi zależnościami w celu ukończenia tego modułu szkoleniowego.

Otwórz program Visual Studio Code w kontekście pustego katalogu.
Upewnij się, że masz zainstalowane rozszerzenie Dev Containers w programie Visual Studio Code.
Otwórz nowy terminal w edytorze.

Napiwek

Możesz użyć menu głównego, aby przejść do opcji menu Terminal, a następnie wybrać opcję Nowy terminal .
Sklonuj azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app repozytorium GitHub do bieżącego katalogu.
```
git clone https://github.com/azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app.git .
```
Otwórz paletę poleceń, wyszukaj polecenia Dev Containers, a następnie wybierz pozycję Dev Containers: Otwórz ponownie w kontenerze.

Napiwek

Program Visual Studio Code może automatycznie monitować o ponowne otwarcie istniejącego folderu w kontenerze programistycznym. Jest to funkcjonalnie równoważne użyciu palety poleceń w celu ponownego otwarcia bieżącego obszaru roboczego w kontenerze.
Sprawdź wersje narzędzi używanych w tym samouczku.
```
docker --version

node --version

npm --version

az --version
```
Uwaga

Ten samouczek wymaga następujących wersji każdego narzędzia, które są wstępnie zainstalowane w danym środowisku:

Narzędzie Wersja

Docker ≥ 20.10.0

Node.js ≥ 18.0150

NPM ≥ 9.5.0

Interfejs wiersza polecenia platformy Azure ≥ 2.46.0
Zamknij terminal.
Pozostałe kroki opisane w tym samouczku mają miejsce w kontekście tego kontenera deweloperskiego.

Narzędzie	Wersja
Docker	≥ 20.10.0
Node.js	≥ 18.0150
NPM	≥ 9.5.0
Interfejs wiersza polecenia platformy Azure	≥ 2.46.0

Testowanie interfejsu API aplikacji MERN za pomocą kontenera bazy danych MongoDB

Zacznij od uruchomienia interfejsu API przykładowej aplikacji z lokalnym kontenerem bazy danych MongoDB, aby sprawdzić, czy aplikacja działa.

Uruchamianie kontenera bazy danych MongoDB przy użyciu platformy Docker i publikowanie typowego portu bazy danych MongoDB (27017).
```
docker pull mongo:6.0

docker run --detach --publish 27017:27017 mongo:6.0
```
Na pasku bocznym wybierz rozszerzenie MongoDB.
Dodaj nowe połączenie z rozszerzeniem MongoDB przy użyciu parametry połączenia mongodb://localhost.
Po pomyślnym nawiązaniu połączenia otwórz plik placu zabaw data/products.mongodb .
Wybierz ikonę Uruchom wszystko , aby wykonać skrypt.

Uruchomienie placu zabaw powinno spowodować wyświetlenie listy dokumentów w lokalnej kolekcji bazy danych MongoDB. Oto obcięty przykład danych wyjściowych.

[
  {
    "_id": { "$oid": "640a146e89286b79b6628eef" },
    "name": "Confira Watch",
    "category": "watches",
    "price": 105
  },
  {
    "_id": { "$oid": "640a146e89286b79b6628ef0" },
    "name": "Diannis Watch",
    "category": "watches",
    "price": 98,
    "sale": true
  },
  ...
]

Uwaga

Identyfikatory obiektów (_id) są generowane losowo i różnią się od tych obciętych przykładowych danych wyjściowych.

W katalogu server/utwórz nowy plik env.

W pliku server/.env dodaj zmienną środowiskową dla tej wartości:

Zmienna środowiskowa	Wartość
`CONNECTION_STRING`	Parametry połączenia do klastra usługi Azure Cosmos DB dla bazy danych MongoDB (rdzenia wirtualnego). Na razie używaj funkcji `mongodb://localhost:27017?directConnection=true`.

CONNECTION_STRING=mongodb://localhost:27017?directConnection=true

Zmień kontekst terminalu na serwer/ folder.
```
cd server
```
Zainstaluj zależności z Menedżer pakietów node (npm).
```
npm install
```
Uruchom aplikację Node.js & Express.
```
npm start
```
Interfejs API automatycznie otwiera okno przeglądarki, aby sprawdzić, czy zwraca tablicę dokumentów produktu.
Zamknij dodatkową kartę/okno przeglądarki.
Zamknij terminal.

Testowanie aplikacji MERN za pomocą klastra usługi Azure Cosmos DB dla bazy danych MongoDB (rdzenia wirtualnego)

Teraz zweryfikujmy, czy aplikacja bezproblemowo współpracuje z usługą Azure Cosmos DB dla bazy danych MongoDB (rdzeń wirtualny). W tym zadaniu wypełnij wstępnie istniejący klaster danymi inicjacyjnymi przy użyciu powłoki Bazy danych MongoDB, a następnie zaktualizuj parametry połączenia interfejsu API.

Zaloguj się do witryny Azure Portal (https://portal.azure.com).
Przejdź do istniejącej strony klastra usługi Azure Cosmos DB for MongoDB (rdzenia wirtualnego).
Na stronie klastra usługi Azure Cosmos DB for MongoDB (rdzeń wirtualny) wybierz opcję menu nawigacji ciągów Połączenie ion.
Zapisz wartość z pola ciągu Połączenie ion.

Ważne

Parametry połączenia w portalu nie zawiera wartości nazwy użytkownika i hasła. Symbole zastępcze i <password> należy zastąpić <user> poświadczeniami użytymi podczas tworzenia klastra.
Wróć do zintegrowanego środowiska projektowego (IDE), otwórz nowy terminal.
Uruchom powłokę MongoDB przy użyciu mongosh polecenia i zarejestrowanego wcześniej parametry połączenia. Pamiętaj, aby zastąpić <user> symbole zastępcze i <password> poświadczeniami użytymi podczas tworzenia klastra.
```
mongosh "<mongodb-cluster-connection-string>"
```
Uwaga

Może być konieczne zakodowanie określonych wartości dla parametry połączenia. W tym przykładzie nazwa klastra to , nazwa użytkownika to msdocs-cosmos-tutorialclusteradmin, a hasło to P@ssw.rd. W haśle @ znak musi być zakodowany przy użyciu metody %40. Przykładowy parametry połączenia jest podany tutaj z poprawnym kodowaniem hasła.
```
CONNECTION_STRING=mongodb+srv://clusteradmin:P%40ssw.rd@msdocs-cosmos-tutorial.mongocluster.cosmos.azure.com/?tls=true&authMechanism=SCRAM-SHA-256&retrywrites=false&maxIdleTimeMS=120000
```

W powłoce uruchom następujące polecenia, aby utworzyć bazę danych, utworzyć kolekcję i zainicjować dane początkowe.

use('cosmicworks');

db.products.drop();

db.products.insertMany([
  { name: "Confira Watch", category: "watches", price: 105.00 },
  { name: "Diannis Watch", category: "watches", price: 98.00, sale: true },
  { name: "Sterse Gloves", category: "gloves", price: 42.00 },
  { name: "Peache Sunglasses", category: "eyewear", price: 32.00, sale: false, sizes: [ "S", "M", "L" ] },
  { name: "Icento Pack", category: "bags", price: 58.00 },
  { name: "Iroowl Bracelet", category: "watches", price: 66.00 },
  { name: "Glaark Bag", category: "bags", price: 56.00, sale: true },
  { name: "Windry Mittens", category: "gloves", price: 35.00 },
  { name: "Tuvila Hat", category: "hats", price: 120.00 },
  { name: "Klinto Hat", category: "hats", subcategory: "hats-beanies", price: 65.00 }
]);

db.products.find({});

Polecenia powinny spowodować wyświetlenie listy dokumentów w lokalnej kolekcji bazy danych MongoDB. Oto obcięty przykład danych wyjściowych.

[
  {
    "_id": { "$oid": "640a146e89286b79b6628eef" },
    "name": "Confira Watch",
    "category": "watches",
    "price": 105
  },
  {
    "_id": { "$oid": "640a146e89286b79b6628ef0" },
    "name": "Diannis Watch",
    "category": "watches",
    "price": 98,
    "sale": true
  },
  ...
]

Uwaga

Identyfikatory obiektów (_id) są generowane losowo i różnią się od tych obciętych przykładowych danych wyjściowych.

Zamknij powłokę bazy danych MongoDB.
```
exit
```
W katalogu client/utwórz nowy plik env.

W pliku client/.env dodaj zmienną środowiskową dla tej wartości:

Zmienna środowiskowa	Wartość
`CONNECTION_STRING`	Parametry połączenia do klastra usługi Azure Cosmos DB dla bazy danych MongoDB (rdzenia wirtualnego). Użyj tego samego parametry połączenia, którego użyto w powłoce mongo.

CONNECTION_STRING=<your-connection-string>

Sprawdź, czy aplikacja korzysta z usługi bazy danych, zmieniając kontekst terminalu na serwer/folder, instalując zależności z węzła Menedżer pakietów (npm), a następnie uruchamiając aplikację.
```
cd server

npm install

npm start
```
Interfejs API automatycznie otwiera okno przeglądarki, aby sprawdzić, czy zwraca tablicę dokumentów produktu.
Zamknij dodatkową kartę/okno przeglądarki. Następnie zamknij terminal.

Wdrażanie aplikacji MERN w usłudze aplikacja systemu Azure

Wdróż usługę i klienta w usłudze aplikacja systemu Azure, aby udowodnić, że aplikacja działa kompleksowo. Użyj wpisów tajnych w aplikacjach internetowych, aby przechowywać zmienne środowiskowe z poświadczeniami i punktami końcowymi interfejsu API.

W zintegrowanym środowisku projektowym (IDE) otwórz nowy terminal.
Utwórz zmienną powłoki dla nazwy istniejącej grupy zasobów o nazwie resourceGroupName.
```
# Variable for resource group name
resourceGroupName="<existing-resource-group>"
```

Utwórz zmienne powłoki dla dwóch aplikacji internetowych o nazwie serverAppName i clientAppName.

# Variable for randomnly generated suffix
let suffix=$RANDOM*$RANDOM

# Variable for web app names with a randomnly generated suffix
serverAppName="server-app-$suffix"
clientAppName="client-app-$suffix"

Jeśli jeszcze tego nie zrobiono, zaloguj się do interfejsu az login --use-device-code wiersza polecenia platformy Azure przy użyciu polecenia .
Zmień bieżący katalog roboczy na serwer/ ścieżkę.
```
cd server
```

Utwórz nową aplikację internetową dla składnika serwera aplikacji MERN za pomocą polecenia az webapp up.

az webapp up \
    --resource-group $resourceGroupName \
    --name $serverAppName \
    --sku F1 \
    --runtime "NODE|18-lts"

Utwórz nowe ustawienie parametry połączenia dla aplikacji internetowej serwera o nazwie .CONNECTION_STRINGaz webapp config connection-string set Użyj tej samej wartości dla parametry połączenia, które były używane z powłoką MongoDB i plikiem env wcześniej w tym samouczku.
```
az webapp config connection-string set \
    --resource-group $resourceGroupName \
    --name $serverAppName \
    --connection-string-type custom \
    --settings "CONNECTION_STRING=<mongodb-connection-string>"
```

Pobierz identyfikator URI aplikacji az webapp show internetowej serwera i zapisz go w nazwie zmiennej powłoki d serverUri.

serverUri=$(az webapp show \
    --resource-group $resourceGroupName \
    --name $serverAppName \
    --query hostNames[0] \
    --output tsv)

open-cli Użyj pakietu i polecenia z narzędzia NuGet, npx aby otworzyć okno przeglądarki przy użyciu identyfikatora URI dla aplikacji internetowej serwera. Sprawdź, czy aplikacja serwera zwraca dane tablicy JSON z klastra bazy danych MongoDB (rdzenia wirtualnego).
```
npx open-cli "https://$serverUri/products" --yes
```
Napiwek

Czasami wdrożenia mogą zakończyć się asynchronicznie. Jeśli nie widzisz oczekiwanej wartości, poczekaj kolejną minutę i odśwież okno przeglądarki.
Zmień katalog roboczy na ścieżkę klienta/ klienta.
```
cd ../client
```

Utwórz nową aplikację internetową dla składnika klienta aplikacji MERN za pomocą polecenia az webapp up.

az webapp up \
    --resource-group $resourceGroupName \
    --name $clientAppName \
    --sku F1 \
    --runtime "NODE|18-lts"

Utwórz nowe ustawienie aplikacji dla aplikacji internetowej klienta o nazwie .REACT_APP_API_ENDPOINTaz webapp config appsettings set Użyj punktu końcowego interfejsu API serwera przechowywanego w zmiennej powłoki serverUri .
```
az webapp config appsettings set \
    --resource-group $resourceGroupName \
    --name $clientAppName \
    --settings "REACT_APP_API_ENDPOINT=https://$serverUri"
```

Pobierz identyfikator URI aplikacji az webapp show internetowej klienta i zapisz go w nazwie zmiennej powłoki d clientUri.

clientUri=$(az webapp show \
    --resource-group $resourceGroupName \
    --name $clientAppName \
    --query hostNames[0] \
    --output tsv)

open-cli Użyj pakietu i polecenia z narzędzia NuGet, npx aby otworzyć okno przeglądarki przy użyciu identyfikatora URI aplikacji internetowej klienta. Sprawdź, czy aplikacja kliencka renderuje dane z interfejsu API aplikacji serwera.
```
npx open-cli "https://$clientUri" --yes
```
Napiwek

Czasami wdrożenia mogą zakończyć się asynchronicznie. Jeśli nie widzisz oczekiwanej wartości, poczekaj kolejną minutę i odśwież okno przeglądarki.
Zamknij terminal.

Czyszczenie zasobów

Gdy pracujesz we własnej subskrypcji, na końcu projektu warto usunąć zasoby, których już nie potrzebujesz. Uruchomione zasoby mogą generować koszty. Zasoby możesz usuwać pojedynczo lub jako grupę zasobów, usuwając cały zestaw zasobów.

Aby usunąć całą grupę zasobów, użyj polecenia az group delete.
```
az group delete \
    --name $resourceGroupName \
    --yes
```
Sprawdź, czy grupa zasobów została usunięta przy użyciu polecenia az group list.
```
az group list
```

Czyszczenie środowiska deweloperskiego

Możesz również wyczyścić środowisko deweloperskie lub zwrócić je do jego typowego stanu.

GitHub Codespaces
Visual Studio Code

Usunięcie środowiska Usługi GitHub Codespaces gwarantuje, że możesz zmaksymalizować ilość bezpłatnych godzin na godziny korzystania z konta.

Zaloguj się do pulpitu nawigacyjnego usługi GitHub Codespaces (https://github.com/codespaces).
Znajdź aktualnie uruchomione przestrzenie kodu pochodzące z azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app repozytorium GitHub.
Otwórz menu kontekstowe dla przestrzeni kodu, a następnie wybierz pozycję Usuń.

Następny krok

Teraz, gdy utworzono pierwszą aplikację dla klastra bazy danych MongoDB (rdzenia wirtualnego), dowiedz się, jak migrować dane do usługi Azure Cosmos DB.

Migrowanie danych