Öğretici: Node.js ve azure'da MongoDB uygulaması oluşturmaTutorial: Build a Node.js and MongoDB app in Azure

Not

Bu makalede bir uygulamanın Windows üzerinde App Service'e dağıtımı yapılır.This article deploys an app to App Service on Windows. App Service dağıtmak için Linux, bkz: Linux üzerinde Azure App Service'te bir Node.js ve MongoDB uygulaması oluşturma.To deploy to App Service on Linux, see Build a Node.js and MongoDB app in Azure App Service on Linux.

Azure App Service, yüksek oranda ölçeklenebilen, kendi kendine düzeltme eki uygulayan web barındırma hizmeti sağlar.Azure App Service provides a highly scalable, self-patching web hosting service. Bu öğreticide, App Service'te bir Node.js uygulaması oluşturma ve bir MongoDB veritabanına bağlanmak gösterilir.This tutorial shows how to create a Node.js app in App Service and connect it to a MongoDB database. İşiniz bittiğinde, Azure App Service’te çalışan bir MEAN uygulamanız (MongoDB, Express, AngularJS ve Node.js) olacaktır.When you're done, you'll have a MEAN application (MongoDB, Express, AngularJS, and Node.js) running in Azure App Service. Kolaylık olması için örnek uygulama MEAN.js web çerçevesi’ni kullanır.For simplicity, the sample application uses the MEAN.js web framework.

Azure App Service’te çalışan MEAN.js uygulaması

Öğrenecekleriniz:What you'll learn:

  • Azure’da MongoDB veritabanı oluşturmaCreate a MongoDB database in Azure
  • Node.js uygulamasını MongoDB’ye bağlamaConnect a Node.js app to MongoDB
  • Uygulamayı Azure'a dağıtmaDeploy the app to Azure
  • Veri modelini güncelleştirme ve uygulamayı yeniden dağıtmaUpdate the data model and redeploy the app
  • Azure’daki tanılama günlüklerinin akışını sağlamaStream diagnostic logs from Azure
  • Uygulamayı Azure portalında yönetmeManage the app in the Azure portal

Yoksa bir Azure aboneliği, oluşturun bir ücretsiz bir hesap başlamadan önce.If you don't have an Azure subscription, create a free account before you begin.

ÖnkoşullarPrerequisites

Bu öğreticiyi tamamlamak için:To complete this tutorial:

  1. Git'i yükleyinInstall Git
  2. Node.js ve NPM'yi yükleyinInstall Node.js and NPM
  3. Bower yükleme (MEAN.js için gerekli)Install Bower (required by MEAN.js)
  4. Gulp.js yükleme (MEAN.js için gerekli)Install Gulp.js (required by MEAN.js)
  5. MongoDB Community Edition’ı yükleyin ve çalıştırınInstall and run MongoDB Community Edition

Yerel MongoDB’yi test etmeTest local MongoDB

Terminal penceresini açın ve MongoDB yüklemenizin bin dizinine cd yazın.Open the terminal window and cd to the bin directory of your MongoDB installation. Bu öğreticideki tüm komutları çalıştırmak için bu terminal penceresini kullanabilirsiniz.You can use this terminal window to run all the commands in this tutorial.

Yerel MongoDB sunucunuza bağlanmak için terminalde mongo komutunu çalıştırın.Run mongo in the terminal to connect to your local MongoDB server.

mongo

Bağlantınız başarılı olursa, MongoDB veritabanınız zaten çalışıyor demektir.If your connection is successful, then your MongoDB database is already running. Aksi takdirde, yerel MongoDB veritabanınızın MongoDB Community Edition’ı yükleme konusundaki adımları izleyerek başlatıldığından emin olun.If not, make sure that your local MongoDB database is started by following the steps at Install MongoDB Community Edition. Bazen MongoDB yüklenmiş olsa da, mongod komutunu çalıştırarak başlatmak gerekir.Often, MongoDB is installed, but you still need to start it by running mongod.

MongoDB veritabanınızı test etmeyi bitirdiğinizde, terminale Ctrl+C yazın.When you're done testing your MongoDB database, type Ctrl+C in the terminal.

Yerel Node.js uygulaması oluşturmaCreate local Node.js app

Bu adımda, yerel Node.js projesini ayarlarsınız.In this step, you set up the local Node.js project.

Örnek uygulamayı kopyalamaClone the sample application

Terminal penceresinde, cd ile bir çalışma dizinine gidin.In the terminal window, cd to a working directory.

Örnek depoyu kopyalamak için aşağıdaki komutu çalıştırın.Run the following command to clone the sample repository.

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

Bu örnek depo, MEAN.js deposu’nun bir kopyasını içerir.This sample repository contains a copy of the MEAN.js repository. App Service’te çalıştırılması için değiştirilmiştir (daha fazla bilgi için MEAN.js deposu BENİOKU dosyasını görüntüleyin).It is modified to run on App Service (for more information, see the MEAN.js repository README file).

Uygulamayı çalıştırmaRun the application

Gerekli paketleri yüklemek ve uygulamayı başlatmak için aşağıdaki komutları çalıştırın.Run the following commands to install the required packages and start the application.

cd meanjs
npm install
npm start

Uygulama tam olarak yüklendiğinde, şu iletiye benzer bir şey görürsünüz: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
--

Bir tarayıcıda http://localhost:3000 sayfasına gidin.Navigate to http://localhost:3000 in a browser. Üst menüde Kaydol’a tıklayın ve bir test kullanıcısı oluşturun.Click Sign Up in the top menu and create a test user.

MEAN.js örnek uygulaması, kullanıcı verilerini veritabanında depolar.The MEAN.js sample application stores user data in the database. Kullanıcı oluşturma ve oturum açmada başarılı olursanız, uygulamanız yerel MongoDB veritabanına veri yazıyor demektir.If you are successful at creating a user and signing in, then your app is writing data to the local MongoDB database.

MEAN.js, MongoDB’ye başarıyla bağlanır

Birkaç makale eklemek için Yönetici > Makaleleri Yönet’i seçin.Select Admin > Manage Articles to add some articles.

Node.js’yi dilediğiniz zaman durdurmak için, terminalde Ctrl+C tuşlarına basın.To stop Node.js at any time, press Ctrl+C in the terminal.

Not

Node.js hızlı başlangıcında, kök uygulama dizininde bir web.config dosyası olması gerektiği belirtilmiştir.The Node.js quickstart mentions the need for a web.config in the root app directory. Ancak bu öğreticide, dosyalarınızı ZIP dosya dağıtımı yerine yerel Git dağıtımını kullanarak dağıttığınızda bu web.config dosyası App Service tarafından otomatik olarak oluşturulur.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.

Azure Cloud Shell kullanmaUse Azure Cloud Shell

Azure, tarayıcınız aracılığıyla kullanabileceğiniz etkileşimli bir kabuk ortamı Azure Cloud Shell.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell, ya da bash PowerShell Azure hizmetleriyle çalışmak için kullanmanıza olanak sağlar.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Bu makaledeki kodu, yerel ortamınıza herhangi bir şey yüklemeye gerek kalmadan çalıştırmak için Cloud Shell önceden yüklenmiş komutları kullanabilirsiniz.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell başlatmak için:To launch Azure Cloud Shell:

SeçenekOption Örnek/bağlantıExample/Link
Kod bloğunun sağ üst köşesindeki Deneyin’i seçin.Select Try It in the upper-right corner of a code block. Dene ' nin seçilmesi, kodu Cloud Shell otomatik olarak kopyalamaz.Selecting Try It doesn't automatically copy the code to Cloud Shell. Azure Cloud Shell için deneme örneği
Tarayıcınızda Cloud Shell açmak için Başlat Cloud Shell düğmesine gidin veyaseçin. https://shell.azure.comGo to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Cloud Shell yeni bir pencerede BaşlatLaunch Cloud Shell in a new window
Azure Portalsağ üstteki menü çubuğunda Cloud Shell düğmesini seçin.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Azure portaldaki Cloud Shell düğmesi

Bu makaledeki kodu Azure Cloud Shell çalıştırmak için:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell başlatın.Launch Cloud Shell.
  2. Kodu kopyalamak için bir kod bloğunda Kopyala düğmesini seçin.Select the Copy button on a code block to copy the code.
  3. Kodu Windows ve Linux 'ta CTRL+SHIFT+v veya MacOS 'ta cmd+Shift+v ile Cloud Shell oturumuna yapıştırın.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Kodu çalıştırmak için ENTER tuşuna basın.Press Enter to run the code.

Üretim MongoDB’si oluşturmaCreate production MongoDB

Bu adımda, Azure’da bir MongoDB veritabanı oluşturursunuz.In this step, you create a MongoDB database in Azure. Uygulamanız Azure’da dağıtıldığında bu bulut veritabanını kullanır.When your app is deployed to Azure, it uses this cloud database.

MongoDB için bu öğreticide Azure Cosmos DB kullanılır.For MongoDB, this tutorial uses Azure Cosmos DB. Cosmos DB, MongoDB istemci bağlantılarını destekler.Cosmos DB supports MongoDB client connections.

Kaynak grubu oluşturunCreate a resource group

Kaynak grubu web uygulamaları, veritabanları ve depolama hesapları gibi Azure kaynaklarının dağıtıldığı ve yönetildiği bir mantıksal kapsayıcıdır.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Örneğin, daha sonra tek bir basit adımda kaynak grubun tamamını silmeyi seçebilirsiniz.For example, you can choose to delete the entire resource group in one simple step later.

Cloud Shell içinde az group create komutuyla bir kaynak grubu oluşturun.In the Cloud Shell, create a resource group with the az group create command. Aşağıdaki örnek Batı Avrupa konumunda myResourceGroup adlı bir kaynak grubu oluşturur.The following example creates a resource group named myResourceGroup in the West Europe location. Ücretsiz katmanda App Service için desteklenen tüm konumları görüntülemek için az appservice list-locations --sku FREE komutunu çalıştırın.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"

Genellikle kaynak grubunuzu ve kaynakları kendinize yakın bir bölgede oluşturursunuz.You generally create your resource group and the resources in a region near you.

Komut tamamlandığında, bir JSON çıkışı size kaynak grubu özelliklerini gösterir.When the command finishes, a JSON output shows you the resource group properties.

Cosmos DB hesabı oluşturmaCreate a Cosmos DB account

Not

Bu öğreticideki Azure Cosmos DB veritabanlarını kendi Azure aboneliğinizde oluşturmanız halinde ücret alınır.There is a cost to creating the Azure Cosmos DB databases in this tutorial in your own Azure subscription. Azure Cosmos DB hesabını yedi gün boyunca ücretsiz kullanmak için Azure Cosmos DB'yi ücretsiz deneyin deneyimini kullanabilirsiniz.To use a free Azure Cosmos DB account for seven days, you can use the Try Azure Cosmos DB for free experience. Azure'da ücretsiz bir MongoDB veritabanı oluşturmak için MongoDB kutucuğundaki Oluştur düğmesine tıklamanız yeterlidir.Just click the Create button in the MongoDB tile to create a free MongoDB database on Azure. Veritabanı oluşturulduktan sonra portalda Bağlantı Dizesi sayfasına giderek öğreticinin sonraki bölümlerinde kullanmak üzere Azure Cosmos DB bağlantı dizenizi alın.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.

Cloud Shell'de, az cosmosdb create komutuyla bir Cosmos DB hesabı oluşturun.In the Cloud Shell, create a Cosmos DB account with the az cosmosdb create command.

Aşağıdaki komutta, <cosmosdb_name> yer tutucusunu benzersiz bir Cosmos DB adıyla değiştirin.In the following command, substitute a unique Cosmos DB name for the <cosmosdb_name> placeholder. Bu ad, Cosmos DB uç noktasının bir parçası olan https://<cosmosdb_name>.documents.azure.com/ olarak kullanıldığından, adın Azure’daki tüm Cosmos DB hesaplarında benzersiz olması gerekir.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. Ad yalnızca küçük harf, rakam ve tire (-) karakteri içerebilir; 3 ila 50 karakter uzunluğunda olmalıdır.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

--kind MongoDB parametresi MongoDB istemci bağlantılarını etkinleştirir.The --kind MongoDB parameter enables MongoDB client connections.

Cosmos DB hesabı oluşturulduğunda Azure CLI, aşağıdaki örneğe benzer bilgiler gösterir: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 >
}

Üretim MongoDB’sine uygulama bağlamaConnect app to production MongoDB

Bu adımda, MEAN.js örnek uygulamanızı, MongoDB bağlantı dizesi kullanarak yeni oluşturduğunuz Cosmos DB veritabanına bağlayacaksınız.In this step, you connect your MEAN.js sample application to the Cosmos DB database you just created, using a MongoDB connection string.

Veritabanı anahtarını almaRetrieve the database key

Cosmos DB veritabanına bağlanmak için veritabanı anahtarı gerekir.To connect to the Cosmos DB database, you need the database key. Cloud Shell'de, birincil anahtarı almak için az cosmosdb list-keys komutunu kullanın.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

Azure CLI aşağıdaki örneğe benzer bilgiler görüntüler:The Azure CLI shows information similar to the following example:

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

primaryMasterKey değerini kopyalayın. Bu bilgiler sonraki adımda gerekli olacaktır.You need this information in the next step.

Node.js uygulamanızda bağlantı dizesini yapılandırmaConfigure the connection string in your Node.js application

Yerel MEAN.js deponuzda, config/env/ klasöründe local-production.js adlı bir dosya oluşturun.In your local MEAN.js repository, in the config/env/ folder, create a file named local-production.js. Varsayılan olarak, .gitignore bu dosyayı deponun dışında tutmak için yapılandırılmıştır.By default, .gitignore is configured to keep this file out of the repository.

Şu kodu içine kopyalayın.Copy the following code into it. İki <cosmosdb_name> yer tutucusunu Cosmos DB veritabanı adınız ile, <primary_master_key> yer tutucusunu da önceki adımda kopyaladığınız anahtar ile değiştirdiğinizden emin olun.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'
  }
};

Cosmos DB, SSL gerektirdiğinden ssl=true seçeneği gereklidir.The ssl=true option is required because Cosmos DB requires SSL.

Yaptığınız değişiklikleri kaydedin.Save your changes.

Uygulamayı üretim modunda test etmeTest the application in production mode

Üretim ortamı için şu komutu çalıştırarak betikleri küçültün ve paketleyin.Run the following command to minify and bundle scripts for the production environment. Bu işlem, üretim ortamı tarafından gerekli olan dosyaları oluşturur.This process generates the files needed by the production environment.

gulp prod

config/env/local-production.js konumunda yapılandırdığınız bağlantı dizesini kullanmak için şu komutu çalıştırın.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

NODE_ENV=production, Node.js’ye üretim ortamında çalışmasını söyleyen ortam değişkenini ayarlar.NODE_ENV=production sets the environment variable that tells Node.js to run in the production environment. node server.js, Node.js sunucusunu server.js ile depo kökünüzde başlatır.node server.js starts the Node.js server with server.js in your repository root. Node.js uygulamanız Azure’a bu şekilde yüklenir.This is how your Node.js application is loaded in Azure.

Uygulama yüklendiğinde, üretim ortamında çalıştığından emin olmak için kontrol edin: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

Bir tarayıcıda http://localhost:8443 sayfasına gidin.Navigate to http://localhost:8443 in a browser. Üst menüde Kaydol’a tıklayın ve bir test kullanıcısı oluşturun.Click Sign Up in the top menu and create a test user. Kullanıcı oluşturma ve oturum açmada başarılı olursanız, uygulamanız Azure’da Cosmos DB veritabanına veri yazıyor demektir.If you are successful creating a user and signing in, then your app is writing data to the Cosmos DB database in Azure.

Terminalde Ctrl+C yazarak Node.js’yi durdurun.In the terminal, stop Node.js by typing Ctrl+C.

Uygulamayı Azure’da dağıtmaDeploy app to Azure

Bu adımda, MongoDB’ye bağlı Node.js uygulamanızı Azure App Service’e dağıtacaksınız.In this step, you deploy your MongoDB-connected Node.js application to Azure App Service.

Dağıtım kullanıcısı yapılandırmaConfigure a deployment user

FTP ve yerel Git için bir Azure web uygulaması kullanarak dağıtabilirsiniz bir dağıtım kullanıcısı.FTP and local Git can deploy to an Azure web app by using a deployment user. Dağıtım kullanıcı yapılandırdıktan sonra tüm Azure dağıtımlarınız için kullanabilirsiniz.Once you configure your deployment user, you can use it for all your Azure deployments. Hesap düzeyinde dağıtım kullanıcı adı ve parola, Azure aboneliği kimlik bilgilerinizden farklıdır.Your account-level deployment username and password are different from your Azure subscription credentials.

Dağıtım kullanıcısı yapılandırma için çalıştırın az webapp deployment kullanıcı kümesi Azure Cloud shell'de komutu.To configure the deployment user, run the az webapp deployment user set command in Azure Cloud Shell. Değiştirin <username > ve <parola > Dağıtım kullanıcı adı ve parola ile.Replace <username> and <password> with a deployment user username and password.

  • Kullanıcı adı Azure içinde benzersiz olmalıdır ve yerel Git için bildirim içermemelidir ' @' sembolü.The username must be unique within Azure, and for local Git pushes, must not contain the ‘@’ symbol.
  • Parola en az sekiz karakter uzunluğunda olmalı, şu üç öğeyi sahip olmalıdır: harf, rakam ve semboller.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>

Parola olarak JSON çıktısını gösterir null.The JSON output shows the password as null. 'Conflict'. Details: 409 hatası alırsanız kullanıcı adını değiştirin.If you get a 'Conflict'. Details: 409 error, change the username. 'Bad Request'. Details: 400 hatası alırsanız daha güçlü bir parola kullanın.If you get a 'Bad Request'. Details: 400 error, use a stronger password.

Kullanıcı adı ve web uygulamalarınızı dağıtmak için kullanılacak parolayı kaydedin.Record your username and password to use to deploy your web apps.

App Service planı oluşturmaCreate an App Service plan

Cloud Shell’de, az appservice plan create komutuyla bir App Service planı oluşturun.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

Aşağıdaki örnekte, Ücretsiz fiyatlandırma katmanı kullanılarak myAppServicePlan adlı bir App Service planı oluşturulmaktadır: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

App Service planı oluşturulduğunda Azure CLI, aşağıdaki örneğe benzer bilgiler gösterir: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
} 

Web uygulaması oluşturunCreate a web app

myAppServicePlan App Service planında bir web uygulaması oluşturun.Create a web app in the myAppServicePlan App Service plan.

Cloud Shell'de, az webapp create komutunu kullanabilirsiniz.In the Cloud Shell, you can use the az webapp create command. Aşağıdaki örnekte <app-name> kısmını genel olarak benzersiz bir uygulama adıyla değiştirin (geçerli karakterler a-z, 0-9 ve - şeklindedir).In the following example, replace <app-name> with a globally unique app name (valid characters are a-z, 0-9, and -). Çalışma zamanı NODE|6.9 olarak ayarlanmıştır.The runtime is set to NODE|6.9. Desteklenen tüm çalışma zamanları görmek için az webapp list-runtimes komutunu çalıştırın.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

Web uygulaması oluşturulduğunda Azure CLI aşağıda yer alan çıktıdaki gibi bilgiler gösterir: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. >
}

Git dağıtımı etkin boş bir web uygulaması oluşturdunuz.You’ve created an empty web app, with git deployment enabled.

Not

Git uzak URL’si deploymentLocalGitUrl özelliği içinde https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git biçiminde gösterilir.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. Bu URL’ye daha sonra ihtiyacınız olacağı için URL’yi kaydedin.Save this URL as you need it later.

Ortam değişkeni yapılandırmaConfigure an environment variable

Varsayılan olarak, MEAN.js projesi config/env/local-production.js öğesini Git deposu dışında tutar.By default, the MEAN.js project keeps config/env/local-production.js out of the Git repository. Bu nedenle Azure uygulamanız için uygulama ayarlarını kullanarak MongoDB bağlantı dizenizi tanımlamak için kullanın.So for your Azure app, you use app settings to define your MongoDB connection string.

Uygulama ayarlarını belirlemek için Cloud Shell'de az webapp config appsettings set komutunu kullanın.To set app settings, use the az webapp config appsettings set command in the Cloud Shell.

Aşağıdaki örnek yapılandırır bir MONGODB_URI Azure uygulamanızda uygulama ayarı.The following example configures a MONGODB_URI app setting in your Azure app. <app_name> , <cosmosdb_name> ve <primary_master_key> yer tutucularını değiştirin.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"

Node.js kodunda, her ortam değişkenine eriştiğiniz gibi bu uygulama ayarına da process.env.MONGODB_URI ile erişirsiniz.In Node.js code, you access this app setting with process.env.MONGODB_URI, just like you would access any environment variable.

Yerel MEAN.js deponuzda, üretim ortamına özel yapılandırma içeren config/env/production.js (config/env/local-production.js değil) dosyasını açın.In your local MEAN.js repository, open config/env/production.js (not config/env/local-production.js), which has production-environment specific configuration. Varsayılan MEAN.js uygulaması, zaten MONGODB_URI ortam değişkenini kullanmak üzere yapılandırılmıştır.The default MEAN.js app is already configured to use the MONGODB_URI environment variable that you created.

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

Git üzerinden Azure'a göndermePush to Azure from Git

Yerel terminal penceresine dönüp yerel Git deponuza bir Azure uzak deposu ekleyin.Back in the local terminal window, add an Azure remote to your local Git repository. <deploymentLocalGitUrl-from-create-step> değerini Web uygulaması oluşturma bölümünde kaydettiğiniz Git uzak URL’si ile değiştirin.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>

Aşağıdaki komutla uygulamanızı dağıtmak için Azure uzak deposuna gönderin.Push to the Azure remote to deploy your app with the following command. Git kimlik bilgisi Yöneticisi kimlik bilgileri istendiğinde, Azure portalında oturum açmak için kullandığınız kimlik bilgilerini değil bir dağıtım kullanıcısı Yapılandır oluşturduğunuz kimlik bilgilerini girdiğinizden emin olun.When prompted for credentials by Git Credential Manager, make sure that 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

Bu komutun çalıştırılması birkaç dakika sürebilir.This command may take a few minutes to run. Çalıştırıldığında, aşağıdaki örneğe benzer bilgiler görüntüler: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

Dağıtım işleminin npm install komutundan sonra Gulp’ı çalıştırdığını fark etmişsinizdir.You may notice that the deployment process runs Gulp after npm install. App Service, dağıtım sırasında Gulp veya Grunt görevlerini çalıştırmadığı için bu örnek depoyu etkinleştirmek üzere kök dizinde iki ek dosya bulunur: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 - Bu dosya, App Service’ten özel dağıtım betiği olarak bash deploy.sh komutunu çalıştırmasını ister..deployment - This file tells App Service to run bash deploy.sh as the custom deployment script.
  • deploy.sh - Özel dağıtım betiği.deploy.sh - The custom deployment script. Dosyayı gözden geçirirseniz, npm install ve bower install komutundan sonra gulp prod çalıştırdığını görürsünüz.If you review the file, you will see that it runs gulp prod after npm install and bower install.

Git tabanlı dağıtımınıza herhangi bir adım eklemek için bu yaklaşımı kullanabilirsiniz.You can use this approach to add any step to your Git-based deployment. Azure uygulamanızı herhangi bir noktada yeniden başlatırsanız, App Service bu Otomasyon görevlerini yeniden çalıştırmaz.If you restart your Azure app at any point, App Service doesn't rerun these automation tasks.

Azure uygulamasına göz atmaBrowse to the Azure app

Web tarayıcınızı kullanarak dağıtılan uygulamaya gidin.Browse to the deployed app using your web browser.

http://<app_name>.azurewebsites.net 

Üst menüde Kaydol’a tıklayın ve bir işlevsiz kullanıcı oluşturun.Click Sign Up in the top menu and create a dummy user.

Başarılı olursanız ve uygulama otomatik olarak oluşturulan kullanıcıda oturum açarsa, Azure'daki MEAN.js uygulamanızın MongoDB (Cosmos DB) veritabanına bağlantısı vardır.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.

Azure App Service’te çalışan MEAN.js uygulaması

Birkaç makale eklemek için Yönetici > Makaleleri Yönet’i seçin.Select Admin > Manage Articles to add some articles.

Tebrikler!Congratulations! Azure App Service’te veri temelli bir Node.js uygulaması çalıştırıyorsunuz.You're running a data-driven Node.js app in Azure App Service.

Veri modelini güncelleştirme ve yeniden dağıtmaUpdate data model and redeploy

Bu adımda, article veri modelini değiştiriyorsunuz ve değişikliklerinizi Azure'da yayımlıyorsunuz.In this step, you change the article data model and publish your change to Azure.

Veri modelini güncelleştirmeUpdate the data model

modules/articles/server/models/article.server.model.js öğesini açın.Open modules/articles/server/models/article.server.model.js.

ArticleSchema içinde, bir String type called comment ekleyin.In ArticleSchema, add a String type called comment. İşiniz bittiğinde, şema kodunuz şu şekilde görünür: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
  }
});

Makaleler kodunu güncelleştirmeUpdate the articles code

comment kullanmak için articles kodunuzun kalanını güncelleştirin.Update the rest of your articles code to use comment.

Değiştirmeniz gereken beş dosya vardır: sunucu denetleyici ve dört istemci görünümü.There are five files you need to modify: the server controller and the four client views.

modules/articles/server/controllers/articles.server.controller.js dosyasını açın.Open modules/articles/server/controllers/articles.server.controller.js.

update işlevinde, article.comment için bir atama ekleyin.In the update function, add an assignment for article.comment. Şu kod tamamlanmış update işlevini gösterir: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;

  ...
};

modules/articles/client/views/view-article.client.view.html dosyasını açın.Open modules/articles/client/views/view-article.client.view.html.

</section> kapanış etiketinin hemen üzerinde, comment öğesini makale verilerinin geri kalanı ile birlikte görüntülemek için şu satırı ekleyin: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>

modules/articles/client/views/list-articles.client.view.html dosyasını açın.Open modules/articles/client/views/list-articles.client.view.html.

</a> kapanış etiketinin hemen üzerinde, comment öğesini makale verilerinin geri kalanı ile birlikte görüntülemek için şu satırı ekleyin: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>

modules/articles/client/views/admin/list-articles.client.view.html dosyasını açın.Open modules/articles/client/views/admin/list-articles.client.view.html.

<div class="list-group"> öğesinin içinde ve </a> kapanış etiketinin hemen üzerinde, comment öğesini makale verilerinin geri kalanıyla birlikte görüntülemek için şu satırı ekleyin: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>

modules/articles/client/views/admin/form-article.client.view.html öğesini açın.Open modules/articles/client/views/admin/form-article.client.view.html.

Gönder düğmesini içeren ve şuna benzeyen <div class="form-group"> öğesini bulun: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>

Bu etiketin hemen üzerinde, kişilerin comment alanını düzenleyebilmesini sağlayan başka bir <div class="form-group"> öğesi ekleyin.Just above this tag, add another <div class="form-group"> element that lets people edit the comment field. Yeni öğeniz şöyle görünmelidir: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>

Değişikliklerinizi yerel olarak test etmeTest your changes locally

Yaptığınız tüm değişiklikleri kaydedin.Save all your changes.

Yerel terminal penceresinde, değişikliklerinizi üretim modunda yeniden test edin.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

Bir tarayıcıda http://localhost:8443 konumuna gidin ve oturum açtığınızdan emin olun.Navigate to http://localhost:8443 in a browser and make sure that you're signed in.

Yönetici > Makaleleri Yönet’i seçin, ardından + düğmesini seçerek bir makale ekleyin.Select Admin > Manage Articles, then add an article by selecting the + button.

Artık yeni Comment metin kutusunu görebilirsiniz.You see the new Comment textbox now.

Makalelere eklenen açıklama alanı

Terminalde Ctrl+C yazarak Node.js’yi durdurun.In the terminal, stop Node.js by typing Ctrl+C.

Değişiklikleri Azure’da yayımlamaPublish changes to Azure

Yerel terminal penceresinde, değişikliklerinizi Git’e işleyin ve ardından kod değişikliklerini Azure’a gönderin.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

Bir kez git push tamamlandığında, Azure uygulamanıza gidin ve yeni işlevleri deneyin.Once the git push is complete, navigate to your Azure app and try out the new functionality.

Azure’da yayımlanan model ve veritabanı değişiklikleri

Önceden makale eklediyseniz, bunları yine de görüntüleyebilirsiniz.If you added any articles earlier, you still can see them. Cosmos DB’nizdeki mevcut veriler kaybolmaz.Existing data in your Cosmos DB is not lost. Ayrıca, veri şemasına yaptığınız güncelleştirmeler de kaybolmadığı gibi, mevcut verileriniz olduğu gibi bırakılır.Also, your updates to the data schema and leaves your existing data intact.

Tanılama günlüklerini akışla aktarmaStream diagnostic logs

Node.js uygulamanız Azure App Service'te çalışırken, terminalinize yönlendirilen konsol günlüklerini alabilirsiniz.While your Node.js application runs in Azure App Service, you can get the console logs piped to your terminal. Böylece, uygulama hatalarını ayıklamanıza yardımcı olan tanılama iletilerinin aynısını alabilirsiniz.That way, you can get the same diagnostic messages to help you debug application errors.

Günlük akışını başlatmak için Cloud Shell’de az webapp log tail komutunu kullanın.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

Günlük akışı başlatıldıktan sonra biraz web trafiği almak için tarayıcıda Azure uygulamanızı yenileyin.Once log streaming has started, refresh your Azure app in the browser to get some web traffic. Artık konsol günlüklerinin terminalinize yönlendirildiğini görebilirsiniz.You now see console logs piped to your terminal.

Ctrl+C yazarak günlük akışını istediğiniz zaman durdurabilirsiniz.Stop log streaming at any time by typing Ctrl+C.

Azure uygulamanızı yönetmeManage your Azure app

Git Azure portalında oluşturduğunuz uygulamayı görmek için.Go to the Azure portal to see the app you created.

Sol menüden uygulama hizmetleri, ardından Azure uygulamanızın adına tıklayın.From the left menu, click App Services, then click the name of your Azure app.

Azure uygulamasına portal gezintisi

Varsayılan olarak, uygulamanızın portal gösterir genel bakış sayfası.By default, the portal shows your app's Overview page. Bu sayfa, uygulamanızın nasıl çalıştığını gösterir.This page gives you a view of how your app is doing. Buradan ayrıca göz atma, durdurma, başlatma, yeniden başlatma ve silme gibi temel yönetim görevlerini gerçekleştirebilirsiniz.Here, you can also perform basic management tasks like browse, stop, start, restart, and delete. Sayfanın sol tarafındaki sekmeler, açabileceğiniz farklı yapılandırma sayfalarını gösterir.The tabs on the left side of the page show the different configuration pages you can open.

Azure portalında App Service sayfası

Kaynakları temizlemeClean up resources

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz.In the preceding steps, you created Azure resources in a resource group. Bu kaynakların gelecekte gerekli olacağını düşünmüyorsanız, Cloud Shell’de aşağıdaki komutu çalıştırarak kaynak grubunu silin: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

Bu komutun çalıştırılması bir dakika sürebilir.This command may take a minute to run.

Sonraki adımlarNext steps

Öğrendikleriniz:What you learned:

  • Azure’da MongoDB veritabanı oluşturmaCreate a MongoDB database in Azure
  • Node.js uygulamasını MongoDB’ye bağlamaConnect a Node.js app to MongoDB
  • Uygulamayı Azure'a dağıtmaDeploy the app to Azure
  • Veri modelini güncelleştirme ve uygulamayı yeniden dağıtmaUpdate the data model and redeploy the app
  • Azure’daki günlüklerin terminalinize akışını sağlamaStream logs from Azure to your terminal
  • Uygulamayı Azure portalında yönetmeManage the app in the Azure portal

Uygulamaya özel bir DNS adı eşlemeyle ilgili bilgi edinmek için sonraki öğreticiye geçin.Advance to the next tutorial to learn how to map a custom DNS name to the app.