MongoDB Express.js dağıtarak App Service'Visual Studio Code

  • Makale
  • Okumak için 4 dakika

MongoDB'Express.js (Linux üzerinde) ve Azure App Service veritabanına bağlanan Cosmos dağıtın.

Programlama çalışması sizin için yapılır. Bu öğreticide, Azure uzantılarıyla yerel ve uzak Azure ortamlarının içinden başarıyla Visual Studio Code odaklanmaktadır.

Sık kullanılan görevler

Bu öğretici, JavaScript geliştiricileri için en önemli Azure görevlerini içerir:

  • MongoDB Cosmos barındırmak için veritabanı kaynağı oluşturma
  • Uygulama barındırmak için App service Express.js oluşturma
  • Uygulama Express.js App Service'e dağıtma

Örnek uygulama

Uygulamanın Express.js aşağıdaki öğelerden oluşur:

  • Express.js 8080 üzerinde barındırılan sunucu
  • Basit React.js sunucu tarafı görünüm altyapısı
  • Veri eklemek, silmek ve bulmak için MongoDB yerel API işlevleri

MongoDB Node.js bağlı basit bir uygulamadır.

Mevcut Azure Aboneliğini oluşturma veya kullanma

Yazılımı yükleme

MongoDB için Cosmos DB veritabanı kaynağı oluşturma

İlk olarak Cosmos kaynağı oluşturun çünkü bu birkaç dakika sürer.

  1. Bu Visual Studio Code en sol menüden Azure simgesini ve ardından Veritabanları bölümünü seçin.

    Veritabanları bölümü görünmüyorsa, üst Azure ... menüsündeki bölümü kontrol edin.

    Uygulamanın uzak Visual Studio Code simgesinin kısmi ekran görüntüsü

  2. Azure gezgininin Veritabanları bölümünde sağ tıklayın ve ardından Sunucu Oluştur'u seçerek aboneliğinizi seçin.

  3. Yeni Azure Veritabanı Sunucusu Komut Paleti Oluştur'daMongoDB API için Azure Cosmos DB'yi seçin.

  4. Değerlerinizi nasıl kullandığınızı anlamak için aşağıdaki tabloyu kullanarak istemleri izleyin. Veritabanının oluşturularak 15 dakika kadar sürebilir.

    Özellik Değer
    Yeni kaynak için genel olarak benzersiz bir Hesap adı girin. Kaynağınız için gibi cosmos-mongodb-YOUR-NAME bir değer girin. yerine YOUR-NAME kendi adınızla veya benzersiz bir kimlik yazın. Bu benzersiz ad, kaynağa tarayıcıdan erişmek için URL'nin bir parçası olarak da kullanılır.
    Kaynak grubunu seçin veya oluşturun. adlı yeni bir kaynak grubu js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE oluşturun.
    Konum Kaynağın konumu. Bu öğretici için size yakın bir bölgesel konum seçin.

    Kaynağın oluşturulması 15 dakika kadar sürebilir. Zaman kısıtlaması varsa sonraki bölümü atlayabilirsiniz ama birkaç dakika içinde bu sonraki bölümü bitirmek için geri dönmeyi unutmayın.

Veritabanı Cosmos dizesini alma

Azure Veritabanları gezginindeyken kaynak adına sağ tıklayıp Bağlantı Dizesini Kopyala'yı seçerek bağlantı dizesini kopyalayın. Bu, öğreticide ortam değişkeni dosyanız için daha sonra gerekir.

Express.js MongoDB'den web uygulaması formu ve veri sonuçları.

Örnek uygulama Express.js kopyalama

Express.js web uygulaması sizin için sağlanır. Uygulamayı git ile kopya edin, ardından bağımlılıkları yükleyin ve uygulamayı çalıştırın.

  1. Örnek repo'nun kopyasını alın, bağımlılıkları yükleyin ve projeyi Visual Studio Code.

    git clone https://github.com/Azure-Samples/js-e2e-express-mongo.git && \
cd js-e2e-express-mongo && \
npm install && \
code .

  2. Ortam dosyasını düzenleyin ve özelliğin değeri olarak Cosmos .envDATABASE_URL DB'nizin bağlantı dizesi özelliğini ekler.

    DATABASE_URL=ADD-YOUR-CONNECTION-STRING_HERE

  3. Bu Visual Studio Code terminal penceresi açın ve aşağıdaki komutları çalıştırarak örneğin bağımlılıklarını yükleyin ve web uygulamasını çalıştırın.

    npm start

  4. Web uygulamasını yerel bilgisayarınızda bir tarayıcıda görüntüleme.

    http://localhost:8080/

    MongoDB Node.js bağlı basit bir uygulamadır.

Web uygulaması kaynağı oluşturma ve Express.js dağıtma

App Service Visual Studio Code oluşturmak ve App Service web uygulamasını kaynağa dağıtmak için Express.js için Express.js uzantısını kullanın.

  1. Azure gezginine gidin. Aboneliğe sağ tıklayın ve öğesini Create new web app...(Advanced) seçin.

    Web uygulaması Visual Studio Code Azure App Service uzantısını kullanan sanal ağ bağlantılarının kısmi ekran görüntüsü.

  2. Değerlerinizi nasıl kullandığınızı anlamak için aşağıdaki tabloyu kullanarak istemleri izleyin.

    Özellik Değer
    Yeni web uygulaması için genel olarak benzersiz bir ad girin. App Service kaynağınız için web-app-with-mongodb-YOUR-NAME gibi bir değer girin. yerine <YOUR-NAME> kendi adınızla veya benzersiz bir kimlik yazın. Bu benzersiz ad, kaynağa tarayıcıdan erişmek için URL'nin bir parçası olarak da kullanılır.
    Yeni kaynaklar için bir kaynak grubu seçin. veritabanı kaynağınız için oluşturduğunuz kaynak Cosmos yerine js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE adınız veya YOUR-NAME-HERE e-posta diğer adınız yazın.
    Linux uygulaması için bir çalışma zamanı seçin. Node 12 LTS öğesini seçin.
    Bir işletim sistemi seçin. Linux'ı seçin.
    Linux App Service Plan oluşturun. yerine adınız veya e-posta diğer js-demo-mongodb-web-app-plan-YOUR-NAME-HEREYOUR-NAME-HERE adınızla yeni bir hizmet planı oluşturun.
    Fiyatlandırma katmanı seçme Ücretsiz
    Bir Application Analizler seçin. Şimdilik atla.
    Yeni kaynaklar için bir konum seçin. Veritabanı kaynağınızı ve kaynak grubu Cosmos seçtiğiniz konumu seçin.

  3. Uygulama oluşturma işlemi tamamlandığında, uygulamanın sağ alt köşesinde veya seçeneğiyle Visual Studio Code bir durum iletisi DeployView output görüntülenir. Deploy öğesini seçin.

    Web uygulaması Visual Studio Code hemen sonra web uygulamasını dağıtmak için Azure App Service uzantısını kullanan uygulamanın kısmi ekran görüntüsü.

    Durum iletisi artık görünmüyorsa, Azure gezginini seçerek dağıtabilirsiniz, kaynak adına sağ tıklayın ve ardından Web Uygulamasına Dağıt... öğesini seçin.

  4. Dağıtım işlemi sırasında, bir bildirim çıkış penceresini görme seçeneğini seçmenize olanak sağlar. Bu, dağıtımın çalışırken durumunu görüntüler.

  5. Dağıtım tamamlandığında bir bildirim görüntülenir. Kayan günlükleri görmek için Akış günlükleri'ne bakın.

    Hizmet dağıtılır. 'Akış günlükleri'.

    Dağıtım tamamlandığında , 'Akış günlükleri' seçeneğini seçmenize olanak sağlayan bir bildirim görüntülenir.

Veritabanı App Service için ortam değişkenlerini yapılandırma

, dosyanız DATABASE_URL içinde yerel olarak depolanan ortam değişkeni web .env uygulamanıza dağıtıldı. Bunun nedeni, dosyada yoksayılan bir dosya olarak listelenmemiştir ./.vscode/settings.json :

{
    "appService.zipIgnorePattern": [
        "node_modules{,/**}",
        ".vscode{,/**}",
        ".env",
        "test{,/**}"
    ],
    "appService.deploySubpath": ".",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

  1. Etkinlik çubuğunda Azure simgesini seçin, sonra App Service ve abonelik altında Web uygulamanızı seçin.

  2. uygulama Ayarlarsağ tıklayın, ardından yeni ayar ekle' yi seçin.

  3. Dosyanızdaki aynı adı ve değeri ekleyin .env .

    Ayar adı Değer
    DATABASE_URL mongodb://...

  4. Azure Web uygulaması ' na sağ tıklayın ve Yeniden Başlat ' ı seçin.

Azure Web uygulamanızı bir tarayıcıda görüntüleme

  1. Web sitesini bir tarayıcıda açın, metni YOUR-RESOURCE_NAME kendi kaynak adınızla değiştirin: https://YOUR-RESOURCE_NAME.azurewebsites.net .
  2. Öğeleri ekleme ve silme Web uygulamasını kullanın.

Değişiklik yapma ve yeniden dağıtma

Uygulama hizmeti uzantısını kullanarak birkaç değişiklik yapın ve uygulamayı yeniden dağıtın .

Kaynakları temizleme

Bu Öğreticiyi tamamladıktan sonra kaynakları kaldırın.

Visual Studio Code ' de, kaynak grupları için Azure gezgini ' ni kullanın, kaynak grubuna (örneğin js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE , YOUR-NAME-HERE adınız veya e-posta diğer adınızla değiştirin) sağ tıklayın ve ardından js-demo-mongodb-web-app-resource-group-YOUR-NAME-HERE öğesini seçin.

Daha fazla bilgi edinmek istiyorsanız

Azure App Service uzantısı

Sonraki adımlar

App Service ve Cosmos DB hakkında öğrenmeye devam edin: