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

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

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.

1. Rozpocznij proces tworzenia nowego repozytorium GitHub Codespace main w azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app gałęzi repozytorium GitHub.

   

2. Na stronie Tworzenie przestrzeni kodu przejrzyj ustawienia konfiguracji przestrzeni kodu, a następnie wybierz pozycję Utwórz nową przestrzeń kodu

   

3. Poczekaj na uruchomienie przestrzeni kodu. Ten proces uruchamiania może potrwać kilka minut.

4. 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 .

   

5. 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

6. Zamknij terminal.

7. Pozostałe kroki opisane w tym samouczku mają miejsce w kontekście tego kontenera deweloperskiego.

Visual Studio Code

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.

1. Otwórz program Visual Studio Code w kontekście pustego katalogu.

2. Upewnij się, że masz zainstalowane rozszerzenie Dev Containers w programie Visual Studio Code.

3. 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 .

   

4. 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 .
   

5. 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.

   

6. 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

7. Zamknij terminal.

8. Pozostałe kroki opisane w tym samouczku mają miejsce w kontekście tego kontenera deweloperskiego.

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.

1. 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
   

2. Na pasku bocznym wybierz rozszerzenie MongoDB.

   

3. Dodaj nowe połączenie z rozszerzeniem MongoDB przy użyciu parametry połączenia mongodb://localhost.

   

4. Po pomyślnym nawiązaniu połączenia otwórz plik placu zabaw data/products.mongodb .

5. Wybierz ikonę Uruchom wszystko , aby wykonać skrypt.

   

6. 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.

7. W katalogu server/utwórz nowy plik env.

8. 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
   

9. Zmień kontekst terminalu na serwer/ folder.

   cd server
   

10. Zainstaluj zależności z Menedżer pakietów node (npm).

    npm install
    

11. Uruchom aplikację Node.js & Express.

    npm start
    

12. Interfejs API automatycznie otwiera okno przeglądarki, aby sprawdzić, czy zwraca tablicę dokumentów produktu.

13. Zamknij dodatkową kartę/okno przeglądarki.

14. 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.

1. Zaloguj się do witryny Azure Portal (https://portal.azure.com).

2. Przejdź do istniejącej strony klastra usługi Azure Cosmos DB for MongoDB (rdzenia wirtualnego).

3. Na stronie klastra usługi Azure Cosmos DB for MongoDB (rdzeń wirtualny) wybierz opcję menu nawigacji Parametry połączenia .

   

4. Zapisz wartość z pola Parametry połączenia.

   

   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.

5. Wróć do zintegrowanego środowiska projektowego (IDE), otwórz nowy terminal.

6. 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
   

7. 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({});
   

8. 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.

9. Zamknij powłokę bazy danych MongoDB.

   exit
   

10. W katalogu client/utwórz nowy plik env.

11. 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>
    

12. 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
    

13. Interfejs API automatycznie otwiera okno przeglądarki, aby sprawdzić, czy zwraca tablicę dokumentów produktu.

14. 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.

1. W zintegrowanym środowisku projektowym (IDE) otwórz nowy terminal.

2. Utwórz zmienną powłoki dla nazwy istniejącej grupy zasobów o nazwie resourceGroupName.

   # Variable for resource group name
   resourceGroupName="<existing-resource-group>"
   

3. 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"
   

4. Jeśli jeszcze tego nie zrobiono, zaloguj się do interfejsu az login --use-device-code wiersza polecenia platformy Azure przy użyciu polecenia .

5. Zmień bieżący katalog roboczy na serwer/ ścieżkę.

   cd server
   

6. 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"
   

7. Utwórz nowe ustawienie parametry połączenia dla aplikacji internetowej serwera o nazwie .CONNECTION_STRING az 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>"
   

8. 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)
   

9. 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.

10. Zmień katalog roboczy na ścieżkę klienta/ klienta.

    cd ../client
    

11. 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"
    

12. Utwórz nowe ustawienie aplikacji dla aplikacji internetowej klienta o nazwie .REACT_APP_API_ENDPOINT az 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"
    

13. 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)
    

14. 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.

15. 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.

1. Aby usunąć całą grupę zasobów, użyj polecenia az group delete.

   az group delete \
       --name $resourceGroupName \
       --yes
   

2. 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

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

1. Zaloguj się do pulpitu nawigacyjnego usługi GitHub Codespaces (https://github.com/codespaces).

2. Znajdź aktualnie uruchomione przestrzenie kodu pochodzące z azure-samples/msdocs-azure-cosmos-db-mongodb-mern-web-app repozytorium GitHub.

   

3. Otwórz menu kontekstowe dla przestrzeni kodu, a następnie wybierz pozycję Usuń.

   

Visual Studio Code

Nie musisz czyścić środowiska lokalnego, ale możesz zatrzymać uruchomiony kontener deweloperów i wrócić do uruchamiania programu Visual Studio Code w kontekście lokalnego obszaru roboczego.

1. Otwórz paletę poleceń, wyszukaj polecenia Dev Containers, a następnie wybierz pozycję Dev Containers: Otwórz ponownie folder lokalnie.

   

Napiwek

Program Visual Studio Code zatrzyma uruchomiony kontener deweloperów, ale kontener nadal istnieje na platformie Docker w stanie zatrzymanym. Zawsze możesz usunąć wystąpienie kontenera, obraz kontenera i woluminy z platformy Docker, aby zwolnić więcej miejsca na komputerze lokalnym.

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