Samouczek: Tworzenie aplikacji node. js i MongoDB na platformie AzureTutorial: Build a Node.js and MongoDB app in Azure

Uwaga

W tym artykule opisano wdrażanie aplikacji w usłudze App Service w systemie Windows.This article deploys an app to App Service on Windows. Aby wdrożyć aplikację w usłudze App Service w systemie Linux, zobacz Tworzenie aplikacji środowiska Node.js i usługi MongoDB w usłudze Azure App Service dla systemu Linux.To deploy to App Service on Linux, see Build a Node.js and MongoDB app in Azure App Service on Linux.

Usługa Azure App Service oferuje wysoce skalowalną i samonaprawialną usługę hostingu w Internecie.Azure App Service provides a highly scalable, self-patching web hosting service. W tym samouczku pokazano, jak utworzyć aplikację środowiska Node.js w usłudze App Service i połączyć ją z bazą danych MongoDB.This tutorial shows how to create a Node.js app in App Service and connect it to a MongoDB database. Po zakończeniu aplikacja MEAN (MongoDB, Express, AngularJS i Node.js) będzie działać w usłudze Azure App Service.When you're done, you'll have a MEAN application (MongoDB, Express, AngularJS, and Node.js) running in Azure App Service. Dla uproszczenia przykładowa aplikacja używa platformy internetowej MEAN.js.For simplicity, the sample application uses the MEAN.js web framework.

Aplikacja MEAN.js uruchomiona w usłudze Azure App Service

Zawartość:What you'll learn:

  • Tworzenie bazy danych MongoDB na platformie AzureCreate a MongoDB database in Azure
  • Łączenie aplikacji Node.js z usługą MongoDBConnect a Node.js app to MongoDB
  • Wdrażanie aplikacji na platformie AzureDeploy the app to Azure
  • Aktualizowanie modelu danych i ponowne wdrażanie aplikacjiUpdate the data model and redeploy the app
  • Strumieniowe przesyłanie dzienników diagnostycznych z platformy AzureStream diagnostic logs from Azure
  • Zarządzanie aplikacją w witrynie Azure PortalManage the app in the Azure portal

Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.If you don't have an Azure subscription, create a free account before you begin.

Wymagania wstępnePrerequisites

W celu ukończenia tego samouczka:To complete this tutorial:

  1. Zainstaluj oprogramowanie GitInstall Git
  2. Zainstaluj środowisko Node.js i menedżer NPMInstall Node.js and NPM
  3. Zainstaluj program Bower (wymagany przez środowisko MEAN.js)Install Bower (required by MEAN.js)
  4. Zainstaluj środowisko Gulp.js (wymagane przez środowisko MEAN.js)Install Gulp.js (required by MEAN.js)
  5. Zainstaluj i uruchom usługę MongoDB Community EditionInstall and run MongoDB Community Edition

Testowanie lokalnej usługi MongoDBTest local MongoDB

Otwórz okno terminala i za pomocą polecenia cd przejdź do katalogu bin instalacji usługi MongoDB.Open the terminal window and cd to the bin directory of your MongoDB installation. W tym oknie terminala możesz uruchamiać wszystkie polecenia z tego samouczka.You can use this terminal window to run all the commands in this tutorial.

Uruchom w terminalu polecenie mongo, aby nawiązać połączenie z lokalnym serwerem usługi MongoDB.Run mongo in the terminal to connect to your local MongoDB server.

mongo

Jeśli połączenie zostanie pomyślnie nawiązane, baza danych MongoDB została już uruchomiona.If your connection is successful, then your MongoDB database is already running. Jeśli nie, upewnij się, że lokalna baza danych MongoDB została uruchomiona, postępując zgodnie z procedurą opisaną w artykule Install MongoDB Community Edition (Instalowanie usługi MongoDB Community Edition).If not, make sure that your local MongoDB database is started by following the steps at Install MongoDB Community Edition. Często się zdarza, że usługa MongoDB jest zainstalowana, ale trzeba ją jeszcze uruchomić za pomocą polecenia mongod.Often, MongoDB is installed, but you still need to start it by running mongod.

Gdy skończysz testowanie bazy danych MongoDB, naciśnij w terminalu klawisze Ctrl+C.When you're done testing your MongoDB database, type Ctrl+C in the terminal.

Tworzenie lokalnej aplikacji Node.jsCreate local Node.js app

W tym kroku skonfigurujesz lokalny projekt Node.js.In this step, you set up the local Node.js project.

Klonowanie przykładowej aplikacjiClone the sample application

W oknie terminalu dodaj element cd do katalogu roboczego.In the terminal window, cd to a working directory.

Uruchom następujące polecenie w celu sklonowania przykładowego repozytorium.Run the following command to clone the sample repository.

git clone https://github.com/Azure-Samples/meanjs.git

To przykładowe repozytorium zawiera kopię repozytorium MEAN.js.This sample repository contains a copy of the MEAN.js repository. Zostało ono zmodyfikowane pod kątem uruchamiania w usłudze App Service (aby uzyskać więcej informacji, zobacz plik README repozytorium MEAN.js).It is modified to run on App Service (for more information, see the MEAN.js repository README file).

Uruchamianie aplikacjiRun the application

Uruchom następujące polecenia, aby zainstalować wymagane pakiety i uruchomić aplikację.Run the following commands to install the required packages and start the application.

cd meanjs
npm install
npm start

Po całkowitym załadowaniu aplikacji zostanie wyświetlony komunikat podobny do następującego:When the app is fully loaded, you see something similar to the following message:

--
MEAN.JS - Development Environment

Environment:     development
Server:          http://0.0.0.0:3000
Database:        mongodb://localhost/mean-dev
App version:     0.5.0
MEAN.JS version: 0.5.0
--

W przeglądarce przejdź do adresu http://localhost:3000.Navigate to http://localhost:3000 in a browser. Kliknij pozycję Utwórz konto w górnym menu i utwórz użytkownika testowego.Click Sign Up in the top menu and create a test user.

Przykładowa aplikacja MEAN.js przechowuje dane użytkowników w bazie danych.The MEAN.js sample application stores user data in the database. Jeśli uda Ci się pomyślnie utworzyć użytkownika i zalogować, to znaczy, że aplikacja zapisuje dane w lokalnej bazie danych MongoDB.If you are successful at creating a user and signing in, then your app is writing data to the local MongoDB database.

Pomyślne połączenie MEAN.js z MongoDB

Wybierz pozycję Administrator -> Zarządzaj artykułami, aby dodać artykuły.Select Admin > Manage Articles to add some articles.

Aby w dowolnym momencie zatrzymać środowisko Node.js, naciśnij w terminalu klawisze Ctrl+C.To stop Node.js at any time, press Ctrl+C in the terminal.

Uwaga

W przewodniku Szybki start dotyczący środowiska Node.js wspomniano o konieczności utworzenia pliku web.config w głównym katalogu aplikacji.The Node.js quickstart mentions the need for a web.config in the root app directory. Jednak w tym samouczku plik web.config jest automatycznie generowany przez usługę App Service w przypadku wdrażania plików za pomocą lokalnego wdrożenia narzędzia Git zamiast wdrożenia pliku ZIP.However, in this tutorial, this web.config file will be automatically generated by App Service when you deploy your files using local Git deployment instead of ZIP file deployment.

Używanie usługi Azure Cloud ShellUse Azure Cloud Shell

Platforma Azure obsługuje Azure Cloud Shell, interaktywne środowisko powłoki, z którego można korzystać w przeglądarce.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Do pracy z usługami platformy Azure można używać bash lub PowerShell z Cloud Shell.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Możesz użyć wstępnie zainstalowanych poleceń Cloud Shell, aby uruchomić kod w tym artykule bez konieczności instalowania niczego w środowisku lokalnym.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Aby rozpocząć Azure Cloud Shell:To start Azure Cloud Shell:

OpcjaOption Przykład/linkExample/Link
Wybierz pozycję Wypróbuj w prawym górnym rogu bloku kodu.Select Try It in the upper-right corner of a code block. Wybranie przycisku Wypróbuj nie powoduje automatycznego skopiowania kodu do Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Przykład try dla Azure Cloud Shell
Przejdź do https://shell.azure.comlub wybierz przycisk Uruchom Cloud Shell , aby otworzyć Cloud Shell w przeglądarce.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. uruchamiania Cloud Shell w nowym oknieLaunch Cloud Shell in a new window
Wybierz przycisk Cloud Shell na pasku menu w prawym górnym rogu Azure Portal.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Przycisk Cloud Shell w witrynie Azure Portal

Aby uruchomić kod w tym artykule w Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Rozpocznij Cloud Shell.Start Cloud Shell.

  2. Aby skopiować kod, wybierz przycisk Kopiuj w bloku kodu.Select the Copy button on a code block to copy the code.

  3. Wklej kod do sesji Cloud Shell, wybierając kolejno pozycje Ctrl+SHIFT+v w systemach Windows i Linux lub wybierając polecenie cmd+SHIFT+v w macOS.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Wybierz klawisz ENTER , aby uruchomić kod.Select Enter to run the code.

Tworzenie produkcyjnej bazy danych MongoDBCreate production MongoDB

W tym kroku utworzysz bazę danych MongoDB na platformie Azure.In this step, you create a MongoDB database in Azure. Aplikacja wdrożona na platformie Azure używa tej bazy danych w chmurze.When your app is deployed to Azure, it uses this cloud database.

W przypadku bazy danych MongoDB w tym samouczku jest używana baza danych Azure Cosmos DB.For MongoDB, this tutorial uses Azure Cosmos DB. Usługa Cosmos DB obsługuje połączenia klienckie usługi MongoDB.Cosmos DB supports MongoDB client connections.

Utwórz grupę zasobówCreate a resource group

Grupa zasobów to logiczny kontener przeznaczony do wdrażania zasobów platformy Azure, takich jak aplikacje internetowe, bazy danych i konta magazynu, oraz zarządzania nimi.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Na przykład można później usunąć całą grupę zasobów w jednym prostym kroku.For example, you can choose to delete the entire resource group in one simple step later.

W usłudze Cloud Shell utwórz grupę zasobów za pomocą polecenia az group create.In the Cloud Shell, create a resource group with the az group create command. Poniższy przykład obejmuje tworzenie grupy zasobów o nazwie myResourceGroup w lokalizacji West Europe (Europa Zachodnia).The following example creates a resource group named myResourceGroup in the West Europe location. Aby wyświetlić wszystkie obsługiwane lokalizacje dla usługi App Service w warstwie Bezpłatna, uruchom polecenie az appservice list-locations --sku FREE.To see all supported locations for App Service in Free tier, run the az appservice list-locations --sku FREE command.

az group create --name myResourceGroup --location "West Europe"

Zasadniczo grupy zasobów i zasoby są tworzone w pobliskim regionie.You generally create your resource group and the resources in a region near you.

Po zakończeniu działania polecenia zostaną wyświetlone dane wyjściowe JSON z właściwościami grupy zasobów.When the command finishes, a JSON output shows you the resource group properties.

Tworzenie konta usługi Cosmos DBCreate a Cosmos DB account

Uwaga

Tworzenie baz danych usługi Azure Cosmos DB w ramach tego samouczka z wykorzystaniem własnej subskrypcji platformy Azure wiąże się z kosztami.There is a cost to creating the Azure Cosmos DB databases in this tutorial in your own Azure subscription. Aby skorzystać z bezpłatnego konta usługi Azure Cosmos DB przez siedem dni, możesz użyć środowiska Wypróbuj usługę Azure Cosmos DB bezpłatnie.To use a free Azure Cosmos DB account for seven days, you can use the Try Azure Cosmos DB for free experience. Wystarczy kliknąć przycisk Utwórz na kafelku MongoDB, aby utworzyć bezpłatną bazę danych MongoDB na platformie Azure.Just click the Create button in the MongoDB tile to create a free MongoDB database on Azure. Po utworzeniu bazy danych przejdź do pozycji Parametry połączenia w portalu i pobierz parametry połączenia usługi Azure Cosmos DB do użycia w dalszej części tego samouczka.Once the database is created, navigate to Connection String in the portal and retrieve your Azure Cosmos DB connection string for use later in the tutorial.

W usłudze Cloud Shell utwórz konto usługi Cosmos DB za pomocą polecenia az cosmosdb create.In the Cloud Shell, create a Cosmos DB account with the az cosmosdb create command.

W poniższym poleceniu zamień symbol zastępczy <cosmosdb_name> na unikatową nazwę usługi Cosmos DB.In the following command, substitute a unique Cosmos DB name for the <cosmosdb_name> placeholder. Ta nazwa jest używana jako część punktu końcowego usługi Cosmos DB, https://<cosmosdb_name>.documents.azure.com/, więc musi być unikatowa w obrębie wszystkich kont usługi Cosmos DB na platformie Azure.This name is used as the part of the Cosmos DB endpoint, https://<cosmosdb_name>.documents.azure.com/, so the name needs to be unique across all Cosmos DB accounts in Azure. Nazwa może zawierać tylko małe litery, cyfry oraz znak łącznika (-) i musi się składać z 3–50 znaków.The name must contain only lowercase letters, numbers, and the hyphen (-) character, and must be between 3 and 50 characters long.

az cosmosdb create --name <cosmosdb_name> --resource-group myResourceGroup --kind MongoDB

Parametr --kind MongoDB umożliwia tworzenie połączeń klienckich MongoDB.The --kind MongoDB parameter enables MongoDB client connections.

Po utworzeniu konta usługi Cosmos DB w interfejsie wiersza polecenia platformy Azure zostaną wyświetlone informacje podobne do następujących:When the Cosmos DB account is created, the Azure CLI shows information similar to the following example:

{
  "consistencyPolicy":
  {
    "defaultConsistencyLevel": "Session",
    "maxIntervalInSeconds": 5,
    "maxStalenessPrefix": 100
  },
  "databaseAccountOfferType": "Standard",
  "documentEndpoint": "https://<cosmosdb_name>.documents.azure.com:443/",
  "failoverPolicies": 
  ...
  < Output truncated for readability >
}

Łączenie aplikacji z produkcyjną bazą danych MongoDBConnect app to production MongoDB

W tym kroku połączysz swoją przykładową aplikację MEAN.js z nowo utworzoną bazą danych Cosmos DB przy użyciu parametrów połączenia MongoDB.In this step, you connect your MEAN.js sample application to the Cosmos DB database you just created, using a MongoDB connection string.

Pobieranie klucza bazy danychRetrieve the database key

Aby nawiązać połączenie z bazą danych Cosmos DB, niezbędny jest klucz bazy danych.To connect to the Cosmos DB database, you need the database key. W usłudze Cloud Shell pobierz klucz podstawowy przy użyciu polecenia az cosmosdb list-keys.In the Cloud Shell, use the az cosmosdb list-keys command to retrieve the primary key.

az cosmosdb list-keys --name <cosmosdb_name> --resource-group myResourceGroup

W interfejsie wiersza polecenia platformy Azure zostaną wyświetlone informacje podobne do następującego przykładu:The Azure CLI shows information similar to the following example:

{
  "primaryMasterKey": "RS4CmUwzGRASJPMoc0kiEvdnKmxyRILC9BWisAYh3Hq4zBYKr0XQiSE4pqx3UchBeO4QRCzUt1i7w0rOkitoJw==",
  "primaryReadonlyMasterKey": "HvitsjIYz8TwRmIuPEUAALRwqgKOzJUjW22wPL2U8zoMVhGvregBkBk9LdMTxqBgDETSq7obbwZtdeFY7hElTg==",
  "secondaryMasterKey": "Lu9aeZTiXU4PjuuyGBbvS1N9IRG3oegIrIh95U6VOstf9bJiiIpw3IfwSUgQWSEYM3VeEyrhHJ4rn3Ci0vuFqA==",
  "secondaryReadonlyMasterKey": "LpsCicpVZqHRy7qbMgrzbRKjbYCwCKPQRl0QpgReAOxMcggTvxJFA94fTi0oQ7xtxpftTJcXkjTirQ0pT7QFrQ=="
}

Skopiuj wartość primaryMasterKey. Ta informacja będzie potrzebna w następnym kroku.You need this information in the next step.

Konfigurowanie parametrów połączenia w aplikacji Node.jsConfigure the connection string in your Node.js application

W lokalnym repozytorium MEAN.js utwórz w folderze config/env/ plik o nazwie local-production.js.In your local MEAN.js repository, in the config/env/ folder, create a file named local-production.js. Domyślnie plik gitignore skonfigurowano w celu przechowywania tego pliku poza repozytorium.By default, .gitignore is configured to keep this file out of the repository.

Skopiuj do niego poniższy kod.Copy the following code into it. Pamiętaj o zastąpieniu dwóch symboli zastępczych <cosmosdb_name> nazwą bazy danych Cosmos DB i zastąpieniu symbolu zastępczego <primary_master_key> kluczem skopiowanym w poprzednim kroku.Be sure to replace the two <cosmosdb_name> placeholders with your Cosmos DB database name, and replace the <primary_master_key> placeholder with the key you copied in the previous step.

module.exports = {
  db: {
    uri: 'mongodb://<cosmosdb_name>:<primary_master_key>@<cosmosdb_name>.documents.azure.com:10250/mean?ssl=true&sslverifycertificate=false'
  }
};

Opcja ssl=true jest wymagana, ponieważ usługa Cosmos DB wymaga protokołu SSL.The ssl=true option is required because Cosmos DB requires SSL.

Zapisz zmiany.Save your changes.

Testowanie aplikacji w trybie produkcyjnymTest the application in production mode

Uruchom poniższe polecenie, aby zminifikować i dołączyć skrypty dla środowiska produkcyjnego.Run the following command to minify and bundle scripts for the production environment. Ten proces generuje pliki wymagane przez środowisko produkcyjne.This process generates the files needed by the production environment.

gulp prod

Uruchom następujące polecenie, aby użyć parametrów połączenia skonfigurowanych w pliku config/env/local-production.js.Run the following command to use the connection string you configured in config/env/local-production.js.

# Bash
NODE_ENV=production node server.js

# Windows PowerShell
$env:NODE_ENV = "production" 
node server.js

Instrukcja NODE_ENV=production ustawia zmienną środowiskową, która informuje środowisko Node.js, aby działało w środowisku produkcyjnym.NODE_ENV=production sets the environment variable that tells Node.js to run in the production environment. Instrukcja node server.js uruchamia serwer Node.js przy użyciu pliku server.js w katalogu głównym repozytorium.node server.js starts the Node.js server with server.js in your repository root. W ten sposób aplikacja Node.js jest ładowana na platformie Azure.This is how your Node.js application is loaded in Azure.

Po załadowaniu aplikacji upewnij się, że została ona uruchomiona w środowisku produkcyjnym:When the app is loaded, check to make sure that it's running in the production environment:

--
MEAN.JS

Environment:     production
Server:          http://0.0.0.0:8443
Database:        mongodb://<cosmosdb_name>:<primary_master_key>@<cosmosdb_name>.documents.azure.com:10250/mean?ssl=true&sslverifycertificate=false
App version:     0.5.0
MEAN.JS version: 0.5.0

W przeglądarce przejdź do adresu http://localhost:8443.Navigate to http://localhost:8443 in a browser. Kliknij pozycję Utwórz konto w górnym menu i utwórz użytkownika testowego.Click Sign Up in the top menu and create a test user. Jeśli uda Ci się pomyślnie utworzyć użytkownika i zalogować, to znaczy, że aplikacja zapisuje dane w bazie danych Cosmos DB na platformie Azure.If you are successful creating a user and signing in, then your app is writing data to the Cosmos DB database in Azure.

W terminalu zatrzymaj środowisko Node.js, naciskając klawisze Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Wdrażanie aplikacji na platformie AzureDeploy app to Azure

W tym kroku wdrożysz aplikację Node.js połączoną z bazą danych MongoDB w usłudze Azure App Service.In this step, you deploy your MongoDB-connected Node.js application to Azure App Service.

Konfigurowanie użytkownika wdrożeniaConfigure a deployment user

FTP i lokalnego narzędzia Git można wdrożyć aplikację internetową platformy Azure przy użyciu użytkownika wdrożenia.FTP and local Git can deploy to an Azure web app by using a deployment user. Po skonfigurowaniu użytkownika wdrożenia, można użyć go we wszystkich wdrożeniach platformy Azure.Once you configure your deployment user, you can use it for all your Azure deployments. Nazwy wdrażania na poziomie konta użytkownika i hasła różnią się od poświadczeń subskrypcji platformy Azure.Your account-level deployment username and password are different from your Azure subscription credentials.

Aby skonfigurować użytkownika wdrożenia, uruchom Ustaw użytkownika wdrożenia aplikacji sieci Web az polecenia w usłudze Azure Cloud Shell.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Zastąp <username > i <hasło > Nazwa użytkownika wdrożenia użytkownika i hasłem.Replace <username> and <password> with a deployment user username and password.

  • Nazwa użytkownika musi być unikatowa na platformie Azure, i dla lokalnego narzędzia Git nie może zawierać wypchnięciom, ' @' symboli.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Hasło musi mieć co najmniej ośmiu znaków i zawierać dwa z następujących trzech elementów: litery, cyfry i symbole.The password must be at least eight characters long, with two of the following three elements: letters, numbers, and symbols.
az webapp deployment user set --user-name <username> --password <password>

Dane wyjściowe JSON zawiera hasło jako null.The JSON output shows the password as null. Jeśli wystąpił błąd 'Conflict'. Details: 409, zmień nazwę użytkownika.If you get a 'Conflict'. Details: 409 error, change the username. Jeśli wystąpił błąd 'Bad Request'. Details: 400, użyj silniejszego hasła.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Zapisz nazwę użytkownika i hasło służące do wdrażania aplikacji sieci web.Record your username and password to use to deploy your web apps.

Tworzenie planu usługi App ServiceCreate an App Service plan

W usłudze Cloud Shell utwórz plan usługi App Service za pomocą polecenia az appservice plan create.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

W poniższym przykładzie jest tworzony plan usługi App Service o nazwie myAppServicePlan przy użyciu warstwy cenowej Bezpłatna:The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

Po utworzeniu planu usługi App Service interfejs wiersza polecenia platformy Azure wyświetli informacje podobne do następujących:When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Tworzenie aplikacji internetowejCreate a web app

Utwórz aplikację internetową w planie usługi App Service myAppServicePlan.Create a web app in the myAppServicePlan App Service plan.

W usłudze Cloud Shell można użyć polecenia az webapp create.In the Cloud Shell, you can use the az webapp create command. W poniższym przykładzie zastąp ciąg <app-name> globalnie unikatową nazwą aplikacji (prawidłowe znaki to a-z, 0-9 i -).In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -). Środowisko uruchomieniowe ma ustawioną wartość NODE|6.9.The runtime is set to NODE|6.9. Aby wyświetlić wszystkie obsługiwane środowiska uruchomieniowe, uruchom polecenie az webapp list-runtimes.To see all supported runtimes, run az webapp list-runtimes.

# Bash
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git
# PowerShell
az --% webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime "NODE|6.9" --deployment-local-git

Po utworzeniu aplikacji internetowej w interfejsie wiersza polecenia platformy Azure zostaną wyświetlone dane wyjściowe podobne do następujących:When the web app has been created, the Azure CLI shows output similar to the following example:

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app-name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

Utworzona została pusta aplikacja internetowa z włączonym wdrażaniem git.You’ve created an empty web app, with git deployment enabled.

Uwaga

Adres URL zdalnego repozytorium Git jest wyświetlany we właściwości deploymentLocalGitUrl w formacie https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git.The URL of the Git remote is shown in the deploymentLocalGitUrl property, with the format https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git. Zapisz ten adres URL, ponieważ będzie on potrzebny później.Save this URL as you need it later.

Konfigurowanie zmiennej środowiskowejConfigure an environment variable

Domyślnie w projekcie MEAN.js plik config/env/local-production.js jest przechowywany poza repozytorium Git.By default, the MEAN.js project keeps config/env/local-production.js out of the Git repository. W przypadku aplikacji platformy Azure parametry połączenia bazy danych MongoDB określa się za pomocą ustawień aplikacji.So for your Azure app, you use app settings to define your MongoDB connection string.

Aby określić ustawienia aplikacji, użyj polecenia az webapp config appsettings set w usłudze Cloud Shell.To set app settings, use the az webapp config appsettings set command in the Cloud Shell.

W poniższym przykładzie pokazano konfigurowanie ustawienia aplikacji MONGODB_URI w aplikacji platformy Azure.The following example configures a MONGODB_URI app setting in your Azure app. Zastąp symbole zastępcze <app_name> , <cosmosdb_name> i <primary_master_key> .Replace the <app_name>, <cosmosdb_name>, and <primary_master_key> placeholders.

az webapp config appsettings set --name <app_name> --resource-group myResourceGroup --settings MONGODB_URI="mongodb://<cosmosdb_name>:<primary_master_key>@<cosmosdb_name>.documents.azure.com:10250/mean?ssl=true"

W kodzie Node.js dostęp do tego ustawienia aplikacji uzyskuje się za pomocą instrukcji process.env.MONGODB_URI, podobnie jak w przypadku uzyskiwania dostępu do zmiennej środowiskowej.In Node.js code, you access this app setting with process.env.MONGODB_URI, just like you would access any environment variable.

W lokalnym repozytorium MEAN.js otwórz plik config/env/production.js (nie config/env/local-production.js), w którym znajduje się konfiguracja specyficzna dla środowiska produkcyjnego.In your local MEAN.js repository, open config/env/production.js (not config/env/local-production.js), which has production-environment specific configuration. Domyślna aplikacja MEAN.js jest już skonfigurowana do używania utworzonej zmiennej środowiskowej MONGODB_URI.The default MEAN.js app is already configured to use the MONGODB_URI environment variable that you created.

db: {
  uri: ... || process.env.MONGODB_URI || ...,
  ...
},

Wypychanie z narzędzia Git na platformę AzurePush to Azure from Git

Wróć do okna terminalu lokalnego, Dodaj element zdalny Azure do lokalnego repozytorium git.Back in the local terminal window, add an Azure remote to your local Git repository. Zastąp ciąg <deploymentLocalGitUrl-from-create-step> adresem URL zdalnego repozytorium Git zapisanym w sekcji Tworzenie aplikacji internetowej.Replace <deploymentLocalGitUrl-from-create-step> with the URL of the Git remote that you saved from Create a web app.

git remote add azure <deploymentLocalGitUrl-from-create-step>

Wypchnij na zdalną platformę Azure w celu wdrożenia aplikacji za pomocą następującego polecenia.Push to the Azure remote to deploy your app with the following command. Gdy program git Credential Manager poprosi o podanie poświadczeń, upewnij się, że wprowadzono poświadczenia utworzone w obszarze Konfigurowanie użytkownika wdrożenia, a nie poświadczenia, których używasz do logowania się do Azure Portal.When Git Credential Manager prompts you for credentials, make sure you enter the credentials you created in Configure a deployment user, not the credentials you use to sign in to the Azure portal.

git push azure master

Wykonanie tego polecenia może potrwać kilka minut.This command may take a few minutes to run. Podczas wykonywania polecenie wyświetli informacje podobne do następującego przykładu:While running, it displays information similar to the following example:

Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 489 bytes | 0 bytes/s, done.
Total 5 (delta 3), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id '6c7c716eee'.
remote: Running custom deployment command...
remote: Running deployment command...
remote: Handling node.js deployment.
.
.
.
remote: Deployment successful.
To https://<app_name>.scm.azurewebsites.net/<app_name>.git
 * [new branch]      master -> master

Możesz zauważyć, że w procesie wdrażania środowisko Gulp jest uruchamiane po wykonaniu polecenia npm install.You may notice that the deployment process runs Gulp after npm install. Usługa App Service nie uruchamia zadań Gulp ani Grunt podczas wdrażania, dlatego w katalogu głównym tego przykładowego repozytorium znajdują się 2 dodatkowe pliki włączające tę funkcję:App Service does not run Gulp or Grunt tasks during deployment, so this sample repository has two additional files in its root directory to enable it:

  • deployment — ten plik informuje usługę App Service, aby uruchomiła skrypt bash deploy.sh jako skrypt wdrożenia niestandardowego..deployment - This file tells App Service to run bash deploy.sh as the custom deployment script.
  • deploy.sh — skrypt wdrożenia niestandardowego.deploy.sh - The custom deployment script. Jeśli przejrzysz plik, zauważysz, że uruchamia on polecenie gulp prod po poleceniach npm install i bower install.If you review the file, you will see that it runs gulp prod after npm install and bower install.

Korzystając z tego podejścia, możesz dodać dowolny krok do wdrożenia opartego na usłudze Git.You can use this approach to add any step to your Git-based deployment. Jeśli w dowolnym momencie ponownie uruchomisz aplikację platformy Azure, usługa App Service nie uruchomi ponownie tych zadań automatyzacji.If you restart your Azure app at any point, App Service doesn't rerun these automation tasks.

Przechodzenie do aplikacji platformy AzureBrowse to the Azure app

Przejdź do wdrożonej aplikacji w przeglądarce internetowej.Browse to the deployed app using your web browser.

http://<app_name>.azurewebsites.net 

Kliknij pozycję Utwórz konto w górnym menu i utwórz użytkownika fikcyjnego.Click Sign Up in the top menu and create a dummy user.

Jeśli się to powiedzie i aplikacja automatycznie zaloguje się na konto utworzonego użytkownika, to znaczy, że aplikacja MEAN.js na platformie Azure ma łączność z interfejsem API z bazą danych MongoDB (Cosmos DB).If you are successful and the app automatically signs in to the created user, then your MEAN.js app in Azure has connectivity to the MongoDB (Cosmos DB) database.

Aplikacja MEAN.js uruchomiona w usłudze Azure App Service

Wybierz pozycję Administrator -> Zarządzaj artykułami, aby dodać artykuły.Select Admin > Manage Articles to add some articles.

Gratulacje!Congratulations! Używasz opartej na danych aplikacji Node.js w usłudze Azure App Service.You're running a data-driven Node.js app in Azure App Service.

Aktualizowanie modelu danych i ponowne wdrażanieUpdate data model and redeploy

W tym kroku zmienisz model danych article i opublikujesz zmiany na platformie Azure.In this step, you change the article data model and publish your change to Azure.

Aktualizowanie modelu danychUpdate the data model

Otwórz plik modules/articles/server/models/article.server.model.js.Open modules/articles/server/models/article.server.model.js.

W schemacie ArticleSchema dodaj typ String o nazwie comment.In ArticleSchema, add a String type called comment. Gdy skończysz, kod schematu powinien wyglądać następująco:When you're done, your schema code should look like this:

const ArticleSchema = new Schema({
  ...,
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  },
  comment: {
    type: String,
    default: '',
    trim: true
  }
});

Aktualizowanie kodu artykułówUpdate the articles code

Zaktualizuj pozostałą część kodu articles, aby używany był typ comment.Update the rest of your articles code to use comment.

Należy zmodyfikować 5 plików: plik kontrolera serwera i 4 pliki widoków klienta.There are five files you need to modify: the server controller and the four client views.

Otwórz plik modules/articles/server/controllers/articles.server.controller.js.Open modules/articles/server/controllers/articles.server.controller.js.

W funkcji update dodaj przypisanie dla zmiennej article.comment.In the update function, add an assignment for article.comment. W poniższym kodzie przedstawiono ukończoną funkcję update:The following code shows the completed update function:

exports.update = function (req, res) {
  let article = req.article;

  article.title = req.body.title;
  article.content = req.body.content;
  article.comment = req.body.comment;

  ...
};

Otwórz plik modules/articles/client/views/view-article.client.view.html.Open modules/articles/client/views/view-article.client.view.html.

Tuż nad tagiem zamykającym </section> dodaj poniższy wiersz, aby wyświetlić typ comment i resztę danych artykułu:Just above the closing </section> tag, add the following line to display comment along with the rest of the article data:

<p class="lead" ng-bind="vm.article.comment"></p>

Otwórz plik modules/articles/client/views/list-articles.client.view.html.Open modules/articles/client/views/list-articles.client.view.html.

Tuż nad tagiem zamykającym </a> dodaj poniższy wiersz, aby wyświetlić typ comment i resztę danych artykułu:Just above the closing </a> tag, add the following line to display comment along with the rest of the article data:

<p class="list-group-item-text" ng-bind="article.comment"></p>

Otwórz plik modules/articles/client/views/admin/list-articles.client.view.html.Open modules/articles/client/views/admin/list-articles.client.view.html.

Wewnątrz elementu <div class="list-group"> i tuż nad tagiem zamykającym </a> dodaj poniższy wiersz, aby wyświetlić typ comment i resztę danych artykułu:Inside the <div class="list-group"> element and just above the closing </a> tag, add the following line to display comment along with the rest of the article data:

<p class="list-group-item-text" data-ng-bind="article.comment"></p>

Otwórz plik modules/articles/client/views/admin/form-article.client.view.html.Open modules/articles/client/views/admin/form-article.client.view.html.

Znajdź element <div class="form-group"> zawierający przycisk przesyłania, który wygląda następująco:Find the <div class="form-group"> element that contains the submit button, which looks like this:

<div class="form-group">
  <button type="submit" class="btn btn-default">{{vm.article._id ? 'Update' : 'Create'}}</button>
</div>

Tuż nad tym tagiem dodaj kolejny element <div class="form-group"> umożliwiający użytkownikom edytowanie pola comment.Just above this tag, add another <div class="form-group"> element that lets people edit the comment field. Nowy element powinien wyglądać następująco:Your new element should look like this:

<div class="form-group">
  <label class="control-label" for="comment">Comment</label>
  <textarea name="comment" data-ng-model="vm.article.comment" id="comment" class="form-control" cols="30" rows="10" placeholder="Comment"></textarea>
</div>

Lokalne testowanie zmianTest your changes locally

Zapisz wszystkie zmiany.Save all your changes.

W oknie lokalnego terminala ponownie przetestuj zmiany w trybie produkcyjnym.In the local terminal window, test your changes in production mode again.

# Bash
gulp prod
NODE_ENV=production node server.js

# Windows PowerShell
gulp prod
$env:NODE_ENV = "production" 
node server.js

Przejdź do adresu http://localhost:8443 w przeglądarce i upewnij się, że użytkownik jest zalogowany.Navigate to http://localhost:8443 in a browser and make sure that you're signed in.

Wybierz pozycję Administrator > Zarządzaj artykułami i dodaj artykuł, wybierając przycisk + .Select Admin > Manage Articles, then add an article by selecting the + button.

Zostanie wyświetlone nowe pole tekstowe Comment.You see the new Comment textbox now.

Dodane pole komentarza na stronie Artykuły

W terminalu zatrzymaj środowisko Node.js, naciskając klawisze Ctrl+C.In the terminal, stop Node.js by typing Ctrl+C.

Publikowanie zmian na platformie AzurePublish changes to Azure

W oknie lokalnego terminala zatwierdź zmiany w usłudze Git i wypchnij zmiany kodu na platformę Azure.In the local terminal window, commit your changes in Git, then push the code changes to Azure.

git commit -am "added article comment"
git push azure master

Po ukończeniu operacji git push przejdź do aplikacji platformy Azure i wypróbuj nowe funkcje.Once the git push is complete, navigate to your Azure app and try out the new functionality.

Zmiany w modelu i bazie danych opublikowane na platformie Azure

Jeśli dodano wcześniej artykuły, nadal będą widoczne.If you added any articles earlier, you still can see them. Istniejące dane w bazie danych Cosmos DB nie zostaną utracone.Existing data in your Cosmos DB is not lost. Ponadto aktualizacje schematu danych pozostawiają istniejące dane bez zmian.Also, your updates to the data schema and leaves your existing data intact.

Przesyłanie strumieniowe dzienników diagnostycznychStream diagnostic logs

Gdy aplikacja Node.js działa w usłudze Azure App Service, dzienniki konsoli można przesłać potokiem do terminala.While your Node.js application runs in Azure App Service, you can get the console logs piped to your terminal. W ten sposób można użyć komunikatów diagnostycznych w celu ułatwienia debugowania błędów aplikacji.That way, you can get the same diagnostic messages to help you debug application errors.

Aby rozpocząć przesyłanie strumieniowe dzienników, użyj polecenia az webapp log tail w usłudze Cloud Shell.To start log streaming, use the az webapp log tail command in the Cloud Shell.

az webapp log tail --name <app_name> --resource-group myResourceGroup

Po rozpoczęciu przesyłania strumieniowego dzienników odśwież aplikację platformy Azure w przeglądarce, aby wywołać pewien ruch w Internecie.Once log streaming has started, refresh your Azure app in the browser to get some web traffic. Teraz można zobaczyć dzienniki konsoli przesłane potokiem do terminala.You now see console logs piped to your terminal.

Przesyłanie strumieniowe dzienników można zatrzymać w dowolnym momencie, naciskając klawisze Ctrl+C.Stop log streaming at any time by typing Ctrl+C.

Zarządzanie aplikacją platformy AzureManage your Azure app

Przejdź do witryny Azure Portal, aby wyświetlić utworzoną aplikację.Go to the Azure portal to see the app you created.

W menu po lewej stronie kliknij pozycję App Services, a następnie kliknij nazwę swojej aplikacji na platformie Azure.From the left menu, click App Services, then click the name of your Azure app.

Nawigacja w portalu do aplikacji platformy Azure

Domyślnie portal pokazuje stronę Przegląd aplikacji.By default, the portal shows your app's Overview page. Ta strona udostępnia widok sposobu działania aplikacji.This page gives you a view of how your app is doing. Tutaj możesz również wykonywać podstawowe zadania zarządzania, takie jak przeglądanie, zatrzymywanie, uruchamianie, ponowne uruchamianie i usuwanie.Here, you can also perform basic management tasks like browse, stop, start, restart, and delete. Na kartach po lewej stronie strony są pokazane poszczególne strony konfiguracji, które można otworzyć.The tabs on the left side of the page show the different configuration pages you can open.

Strona usługi App Service w witrynie Azure Portal

Oczyszczanie zasobówClean up resources

W poprzednich krokach utworzono zasoby platformy Azure w grupie zasobów.In the preceding steps, you created Azure resources in a resource group. Jeśli te zasoby nie będą raczej potrzebne w przyszłości, usuń grupę zasobów, uruchamiając następujące polecenie w usłudze Cloud Shell:If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

Wykonanie tego polecenia może potrwać około minutę.This command may take a minute to run.

Następne krokiNext steps

Które czynności umiesz wykonać:What you learned:

  • Tworzenie bazy danych MongoDB na platformie AzureCreate a MongoDB database in Azure
  • Łączenie aplikacji Node.js z usługą MongoDBConnect a Node.js app to MongoDB
  • Wdrażanie aplikacji na platformie AzureDeploy the app to Azure
  • Aktualizowanie modelu danych i ponowne wdrażanie aplikacjiUpdate the data model and redeploy the app
  • Strumieniowe przesyłanie dzienników z platformy Azure do terminalaStream logs from Azure to your terminal
  • Zarządzanie aplikacją w witrynie Azure PortalManage the app in the Azure portal

Przejdź do następnego samouczka, aby dowiedzieć się, jak zmapować niestandardową nazwę DNS na aplikację.Advance to the next tutorial to learn how to map a custom DNS name to the app.