Öğretici: Azure'da Node.js ve MongoDB uygulaması derleme

Öğrenecekleriniz:

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

Önkoşullar

Bu öğreticiyi tamamlamak için:

• Git'i yükleyin
• Node.js NPM'yi yükleme

• Azure Cloud Shell'Da Bash ortamını kullanın.

  

• Dilerseniz CLI başvuru komutlarını çalıştırmak için Azure CLI’yi yükleyebilirsiniz.

  • Yerel yükleme kullanıyorsanız az login komutunu kullanarak Azure CLI ile oturum açın. Kimlik doğrulama işlemini tamamlamak için terminalinizde görüntülenen adımları izleyin. Ek oturum açma seçenekleri için bkz. Azure CLI ile oturum açma.

  • İstendiğinde, ilk kullanımda Azure CLI uzantılarını yükleyin. Uzantılar hakkında daha fazla bilgi için bkz. Azure CLI ile uzantıları kullanma.

  • Yüklü sürümü ve bağımlı kitaplıkları bulmak için az version komutunu çalıştırın. En son sürüme yükseltmek için az upgrade komutunu çalıştırın.

Yerel Node.js uygulaması oluşturma

Bu adımda, yerel Node.js projesini ayarlarsınız.

Örnek uygulamayı kopyalama

Terminal penceresinde, cd ile bir çalışma dizinine gidin.

Örnek depoyu kopyalamak için aşağıdaki komutu çalıştırın.

git clone https://github.com/Azure-Samples/mean-todoapp.git

Uygulamayı çalıştırma

Gerekli paketleri yüklemek ve uygulamayı başlatmak için aşağıdaki komutları çalıştırın.

cd mean-todoapp
npm install
node app.js --alter

Uygulama tam olarak yüklendiğinde, şu iletiye benzer bir şey görürsünüz:

debug: -------------------------------------------------------
debug: :: Fri Jul 09 2021 13:10:34 GMT+0200 (Central European Summer Time)

debug: Environment : development
debug: Port        : 1337
debug: -------------------------------------------------------

Bir tarayıcıda http://localhost:1337 sayfasına gidin. Birkaç todo öğeleri ekleyin.

MEAN örnek uygulaması, kullanıcı verilerini veritabanında depolar. Varsayılan olarak, disk tabanlı bir geliştirme veritabanı kullanır. Todo öğeleri oluşturabilir ve görüyorsanız, uygulamanız verileri okur ve yazar.

Node.js’yi dilediğiniz zaman durdurmak için, terminalde Ctrl+C tuşlarına basın.

Üretim MongoDB’si oluşturma

Bu adımda, Azure’da bir MongoDB veritabanı oluşturursunuz. Uygulamanız Azure’da dağıtıldığında bu bulut veritabanını kullanır.

MongoDB için bu öğreticide Azure Cosmos DB kullanılır. Cosmos DB, MongoDB istemci bağlantılarını destekler.

Kaynak grubu oluşturma

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. Örneğin, daha sonra tek bir basit adımda kaynak grubun tamamını silmeyi seçebilirsiniz.

Cloud Shell, komutuyla bir kaynak grubu oluşturun az group create . Aşağıdaki örnek Batı Avrupa konumunda myResourceGroup adlı bir kaynak grubu oluşturur. Ü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.

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

Genellikle kaynak grubunuzu ve kaynakları kendinize yakın bir bölgede oluşturursunuz.

Komut tamamlandığında, bir JSON çıkışı size kaynak grubu özelliklerini gösterir.

Cosmos DB hesabı oluşturma

Aşağıdaki Cloud Shell komutuyla bir Cosmos DB hesabı az cosmosdb create oluşturun.

Aşağıdaki komutta, yer tutucusunu benzersiz Cosmos DB adı ile <cosmosdb-name> değiştirebilirsiniz. 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. Ad yalnızca küçük harf, rakam ve tire (-) karakteri içerebilir; 3 ila 50 karakter uzunluğunda olmalıdır.

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

--kind MongoDB parametresi MongoDB istemci bağlantılarını etkinleştirir.

Cosmos DB hesabı oluşturulduğunda Azure CLI, aşağıdaki örneğe benzer bilgiler gösterir:

{
  "apiProperties": {
    "serverVersion": "3.6"
  },
  "backupPolicy": {
    "periodicModeProperties": {
      "backupIntervalInMinutes": 240,
      "backupRetentionIntervalInHours": 8,
      "backupStorageRedundancy": "Geo"
    },
    "type": "Periodic"
  },
  "capabilities": [
    {
      "name": "EnableMongo"
    }
  ],
  "connectorOffer": null,
  "consistencyPolicy": {
    "defaultConsistencyLevel": "Session",
    "maxIntervalInSeconds": 5,
    "maxStalenessPrefix": 100
  },
  "cors": [],
  "databaseAccountOfferType": "Standard",
  "defaultIdentity": "FirstPartyIdentity",
  "disableKeyBasedMetadataWriteAccess": false,
  "documentEndpoint": "https://<cosmosdb-name>.documents.azure.com:443/",
  ...
  < Output truncated for readability >
}

Üretim MongoDB’sine uygulama bağlama

Bu adımda, bir MongoDB bağlantı dizesini kullanarak örnek Cosmos veritabanınızı yeni oluşturduğunuz Cosmos DB veritabanına bağlayabilirsiniz.

Veritabanı anahtarını alma

Cosmos DB veritabanına bağlanmak için veritabanı anahtarı gerekir. Komut Cloud Shell, birincil anahtarı az cosmosdb keys list almak için komutunu kullanın.

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

Azure CLI aşağıdaki örneğe benzer bilgiler görüntüler:

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

primaryMasterKey değerini kopyalayın. Bu bilgiler sonraki adımda gerekli olacaktır.

Örnek uygulamanıza bağlantı dizesini yapılandırma

Yerel depoda, config/datastores.js dosyasında mevcut içeriği aşağıdaki kodla değiştirin ve değişikliklerinizi kaydedin.

module.exports.datastores = {
  default: {
    adapter: 'sails-mongo',
    url: process.env.MONGODB_URI,
    ssl: true,
  },
};

db ssl: true için TLS/SSL Cosmos seçeneği gereklidir. url bir ortam değişkenine ayarlanır ve bunu daha sonra ayarlayabilirsiniz.

Terminalde ortam MONGODB_URI değişkenlerini ayarlayın. İki yer tutucuyu veritabanı veritabanı adınızla Cosmos ve yer tutucusunu önceki adımda kopyalanan <cosmosdb-name> <cosmosdb-key> anahtarla değiştirebilirsiniz.

export MONGODB_URI=mongodb://<cosmosdb-name>:<cosmosdb-key>@<cosmosdb-name>.documents.azure.com:10250/todoapp

Uygulamayı MongoDB ile test etmek

Yerel terminal penceresinde yeniden node app.js --alter çalıştırın.

node app.js --alter

http://localhost:1337 sayfasına yeniden gidin. Todo öğeleri oluşturabilir ve görüyorsanız, uygulamanız Azure'daki Cosmos DB veritabanını kullanarak veri okuyor ve yazıyor.

Terminalde Ctrl+C yazarak Node.js’yi durdurun.

Uygulamayı Azure’da dağıtma

Bu adımda, MongoDB’ye bağlı Node.js uygulamanızı Azure App Service’e dağıtacaksınız.

Dağıtım kullanıcısı yapılandırma

FTP ve yerel git, bir dağıtım kullanıcısı kullanarak bir Azure Web uygulamasına dağıtabilir. Dağıtım kullanıcısını yapılandırdıktan sonra tüm Azure dağıtımlarınız için kullanabilirsiniz. Hesap düzeyinde dağıtım Kullanıcı adınız ve parolanız, Azure aboneliği kimlik bilgilerinizden farklı.

Dağıtım kullanıcısını yapılandırmak için, Azure Cloud Shell bölümünde az WebApp Deployment User set komutunu çalıştırın. <username>Ve öğesini <password> bir dağıtım kullanıcısı Kullanıcı adı ve parolasıyla değiştirin.

• Kullanıcı adı Azure içinde benzersiz olmalıdır ve yerel git gönderimleri için ' @ ' sembolünü içermemelidir.
• Parola en az sekiz karakter uzunluğunda olmalıdır ve şu üç öğeden ikisi vardır: harfler, rakamlar ve semboller.

az webapp deployment user set --user-name <username> --password <password>

JSON çıktısı parolayı olarak gösterir null . 'Conflict'. Details: 409 hatası alırsanız kullanıcı adını değiştirin. 'Bad Request'. Details: 400 hatası alırsanız daha güçlü bir parola kullanın.

Web uygulamalarınızı dağıtmak için kullanmak üzere Kullanıcı adınızı ve parolanızı kaydedin.

App Service planı oluşturma

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

{ 
  "freeOfferExpirationTime": null,
  "geoRegion": "UK West",
  "hostingEnvironmentProfile": null,
  "hyperV": false,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "isSpot": false,
  "isXenon": false,
  "kind": "app",
  "location": "ukwest",
  "maximumElasticWorkerCount": 1,
  "maximumNumberOfWorkers": 0,
  < JSON data removed for brevity. >
} 

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux

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

Web uygulaması oluşturma

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime 'NODE|14-lts' --deployment-local-git

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

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app-name> --runtime 'NODE|14-lts' --deployment-local-git

Local git is configured with url of 'https://<username>@<app-name>.scm.azurewebsites.net/<app-name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "clientCertExclusionPaths": null,
  "clientCertMode": "Required",
  "cloningInfo": null,
  "containerSize": 0,
  "customDomainVerificationId": "54184270DF7B3B4BF30221B6303E789C324E4783C8DF1FBAA3D111FC72328CE9",
  "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. >
}

Ortam değişkeni yapılandırma

Örnek uygulamanın içinde ortam değişkenlerini kullanmak üzere zaten MONGODB_URI yapılandırılmış olduğunu config/datastores.js unutmayın. Bu App Service, bir uygulama ayarı kullanarak bu değişkeni eksersiniz.

Uygulama ayarlarını ayarlamak için, az webapp config appsettings set uygulamanın Cloud Shell.

Aşağıdaki örnek, MONGODB_URI Azure uygulamanıza bir uygulama ayarı yapılandırıyor. , <app-name> ve <cosmosdb-name> yer <cosmosdb-key> tutucularını değiştirin.

az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings MONGODB_URI='mongodb://<cosmosdb-name>:<cosmosdb-key>@<cosmosdb-name>.documents.azure.com:10250/todoapp' DEPLOYMENT_BRANCH='main'

Git üzerinden Azure'a gönderme

1. Dalı dağıtıyorsanız, App Service uygulamanızın varsayılan dağıtım dalını olarak main main ayarlamalısınız (bkz. Dağıtım dalını değiştirme). Komut Cloud Shell uygulama DEPLOYMENT_BRANCH ayarını komutuyla az webapp config appsettings set ayarlayın.

   az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings DEPLOYMENT_BRANCH='main'
   

2. Yerel terminal penceresine dönüp yerel Git deponuza bir Azure uzak deposu ekleyin. yerine <deploymentLocalGitUrl-from-create-step> Web uygulaması oluşturma sayfasından kaydedilen Git uzak url'sini yazın.

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

3. Aşağıdaki komutla uygulamanızı dağıtmak için Azure uzak deposuna gönderin. Git Kimlik Bilgileri Yöneticisi sizden kimlik bilgileri istendiğinde, dağıtım kullanıcısını yapılandırma'da oluşturduğunuz kimlik bilgilerini, kullanıcı arabiriminde oturum a açma için değil , kimlik bilgilerini Azure portal.

   git push azure main
   

   Bu komutun çalıştırılması birkaç dakika sürebilir. Çalıştırıldığında, aşağıdaki örneğe benzer bilgiler görüntüler:

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 318 bytes | 318.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Updating branch 'main'.
remote: Updating submodules.
remote: Preparing deployment for commit id '4eb0ca7190'.
remote: Generating deployment script.
remote: Running deployment command...
remote: Handling node.js deployment.
remote: Creating app_offline.htm
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Copying file: 'package.json'
remote: Deleting app_offline.htm
remote: Looking for app.js/server.js under site root.
remote: Using start-up script app.js
remote: Generated web.config.
.
.
.
remote: Deployment successful.
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
 * [new branch]      main -> main

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 347 bytes | 347.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Deploy Async
remote: Updating branch 'main'.
remote: Updating submodules.
remote: Preparing deployment for commit id 'f776be774a'.
remote: Repository path is /home/site/repository
remote: Running oryx build...
remote: Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
remote: You can report issues at https://github.com/Microsoft/Oryx/issues
remote: 
remote: Oryx Version: 0.2.20210420.1, Commit: 85c6e9278aae3980b86cb1d520aaad532c814ed7, ReleaseTagName: 20210420.1
remote: 
remote: Build Operation ID: |qwejn9R4StI=.5e8a3529_
remote: Repository Commit : f776be774a3ea8abc48e5ee2b5132c037a636f73
.
.
.
remote: Deployment successful.
remote: Deployment Logs : 'https://<app-name>.scm.azurewebsites.net/newui/jsonviewer?view_url=/api/deployments/a6fcf811136739f145e0de3be82ff195bca7a68b/log'
To https://<app-name>.scm.azurewebsites.net/<app-name>.git
   4f7e3ac..a6fcf81  main -> main

Azure uygulamasına göz atma

Web tarayıcınızı kullanarak dağıtılan uygulamaya göz atma.

https://<app-name>.azurewebsites.net 

Tarayıcıda todo öğeleri oluşturabilir ve görüyorsanız, Azure'daki örnek uygulamanız MongoDB (Cosmos DB) veritabanına bağlanabilir.

Tebrikler! Azure App Service’te veri temelli bir Node.js uygulaması çalıştırıyorsunuz.

Veri modelini güncelleştirme ve yeniden dağıtma

Bu adımda, Todo veri modelini değiştiriyorsunuz ve değişikliklerinizi Azure'da yayımlıyorsunuz.

Sunucu tarafı modelini güncelleştirme

Bu Sails.js model ve API kodunu değiştirmek veri modelini değiştirmek kadar kolaydır çünkü Sails.js varsayılan olarak modelin ortak yollarını zaten tanımlar.

Yerel depoda api/models/Todo.js açın ve bir öznitelik done ekleyin. İşiniz bittiğinde, şema kodunuz şu şekilde görünür:

module.exports = {

  attributes: {
    value: {type: 'string'},
    done: {type: 'boolean', defaultsTo: false}
  },

};

İstemci kodunu güncelleştirme

Değiştirmeniz gereken üç dosya vardır: istemci modeli, HTML şablonu ve bileşen dosyası.

client/src/app/todo.ts'yi açın ve bir özellik done ekleyin. Bitirin, modeliniz şu şekilde gösterir:

export class Todo {
    id!: String;
    value!: String;
    done!: Boolean;
}

client/src/app/app.component.html'i açın. Tek öğenin hemen üzerine, her todo öğesinin başına bir onay <span> kutusu eklemek için aşağıdaki kodu ekleyin:

<input class="form-check-input me-2" type="checkbox" [checked]="todo.done" (click)="toggleDone(todo.id, i)" [disabled]="isProcessing">

client/src/app/app.component.ts'i açın. Son kapanış küme ayracı ( ) hemen } üzerine aşağıdaki yöntemi ekler. Yukarıdaki şablon kodu, onay kutusuna tıklar ve sunucu tarafı verilerini lerken çağrılır.

toggleDone(id:any, i:any) {
  console.log("Toggled checkbox for " + id);
  this.isProcessing = true;
  this.Todos[i].done = !this.Todos[i].done;
  this.restService.updateTodo(id, this.Todos[i])
  .subscribe((res) => {
      console.log('Data updated successfully!');
      this.isProcessing = false;
    }, (err) => {
      console.log(err);
      this.Todos[i].done = !this.Todos[i].done;
  });
}

Değişikliklerinizi yerel olarak test etme

Yerel terminal penceresinde, içinde tanımlanan derleme betiğiyle Angular istemci kodunu package.json derle.

npm run build

Değişikliklerinizi ile yeniden test node app.js --alter etmek. Sunucu tarafı modelinizi değiştirdiğiniz için bayrağı, --alter Cosmos Sails.js DB veritabanınız için veri yapısını değiştirmenizi sağlar.

node app.js --alter

http://localhost:1337 sayfasına gidin. Şimdi todo öğesinin önünde bir onay kutusu görüyor gerekir. Bir onay kutusunu işaretlediğinde veya temizlediğinde, Azure'Cosmos veritabanı, yapılacaklar öğesinin tamam olduğunu belirtmek için güncelleştirilir.

Terminalde Ctrl+C yazarak Node.js’yi durdurun.

Değişiklikleri Azure’da yayımlama

Yerel terminal penceresinde, değişikliklerinizi Git’e işleyin ve ardından kod değişikliklerini Azure’a gönderin.

git commit -am "added done field"
git push azure main

tamamlandıktan git push sonra Azure uygulamanıza gidin ve yeni işlevselliği deneyin.

Önceden makale eklediyseniz, bunları yine de görüntüleyebilirsiniz. Cosmos DB’nizdeki mevcut veriler kaybolmaz. Ayrıca, veri şemasına yaptığınız güncelleştirmeler de kaybolmadığı gibi, mevcut verileriniz olduğu gibi bırakılır.

Tanılama günlüklerini akışla aktarma

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

az webapp log config --resource-group <resource-group-name> --name <app-name> --docker-container-logging filesystem --level Verbose

az webapp log tail --resource-group <resource-group-name> --name <app-name>

Azure uygulamalarınızı yönetme

Oluşturduğunuz uygulamayı Azure portal için uygulamanın son kullanıcıya gidin.

Sol menüden Uygulama Hizmetleri'ne ve ardından Azure uygulamanıza tıklayın.

Varsayılan olarak portalda uygulamanın Genel Bakış sayfası görüntülenir. Bu sayfa, uygulamanızın nasıl çalıştığını gösterir. Buradan ayrıca göz atma, durdurma, başlatma, yeniden başlatma ve silme gibi temel yönetim görevlerini gerçekleştirebilirsiniz. Sayfanın sol tarafındaki sekmeler, açabileceğiniz farklı yapılandırma sayfalarını gösterir.

Kaynakları temizleme

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz. Bu kaynakların gelecekte gerekli olacağını düşünmüyorsanız, Cloud Shell’de aşağıdaki komutu çalıştırarak kaynak grubunu silin:

az group delete --name myResourceGroup

Bu komutun çalıştırılması bir dakika sürebilir.

Sonraki adımlar

Öğrendikleriniz:

Uygulamaya özel bir DNS adı eşlemeyle ilgili bilgi edinmek için sonraki öğreticiye geçin.

Veya diğer kaynaklara göz atarak:

• Uygulama Node.js yapılandırma
• Ortam değişkenleri ve uygulama ayarları başvurusu