Hızlı Başlangıç: Visual Studio Code kullanarak Azure'da JavaScript işlevi oluşturma

HTTP isteklerine yanıt veren bir JavaScript işlevi oluşturmak için Visual Studio Code'u kullanın. Kodu yerel olarak test edin ve ardından Azure İşlevleri sunucusuz ortamına dağıtın.

Önemli

Bu makalenin içeriği, sayfanın üst kısmındaki seçicideki Node.js programlama modeli seçiminize göre değişir. Genel kullanıma sunulan v4 modeli, JavaScript ve TypeScript geliştiricileri için daha esnek ve sezgisel bir deneyime sahip olacak şekilde tasarlanmıştır. Geçiş kılavuzunda v3 ve v4 arasındaki farklar hakkında daha fazla bilgi edinin.

Bu hızlı başlangıcın tamamlanması, Azure hesabınızda birkaç ABD doları veya daha az bir maliyete neden olur.

Bu makalenin CLI tabanlı bir sürümü de vardır.

Ortamınızı yapılandırma

Kullanmaya başlamadan önce aşağıdaki gereksinimleri karşıladığınızdan emin olun:

Çekirdek Araçları'nı yükleme veya güncelleştirme

Visual Studio Code için Azure İşlevleri uzantısı, Azure İşlevleri Core Tools ile tümleştirilir; böylece Azure İşlevleri çalışma zamanını kullanarak işlevlerinizi Visual Studio Code'da yerel olarak çalıştırabilir ve hatalarını ayıklayabilirsiniz. Başlamadan önce Core Tools'u yerel olarak yüklemek veya mevcut bir yüklemeyi en son sürümü kullanacak şekilde güncelleştirmek iyi bir fikirdir.

Visual Studio Code'da F1'i seçerek komut paletini açın ve ardından Azure İşlevleri: Yükleme veya Güncelleştirme Çekirdek Araçları komutunu arayın ve çalıştırın.

Bu komut, Core Tools'un en son sürümünün paket tabanlı yüklemesini başlatır.

Yerel projenizi oluşturma

Bu bölümde, JavaScript'te yerel bir Azure İşlevleri projesi oluşturmak için Visual Studio Code'u kullanacaksınız. Bu makalenin ilerleyen bölümlerinde işlev kodunuzu Azure'da yayımlayacaksınız.

  1. Etkinlik çubuğunda Azure simgesini seçin. Ardından Çalışma Alanı (yerel) alanında düğmeyi + seçin ve açılan listede İşlev Oluştur'u seçin. İstendiğinde Yeni proje oluştur'u seçin.

    Yeni proje oluşturma penceresinin ekran görüntüsü.

  2. Proje çalışma alanınız için dizin konumunu seçin ve Seç'i seçin. Yeni bir klasör oluşturmanız veya proje çalışma alanı için boş bir klasör seçmeniz gerekir. Zaten bir çalışma alanının parçası olan bir proje klasörünü seçmeyin.

  1. İstemlerde aşağıdaki bilgileri sağlayın:

    İstem Seçim
    İşlev projeniz için bir dil seçin JavaScript öğesini seçin.
    JavaScript programlama modeli seçme Model V3 öğesini seçin
    Projenizin ilk işlevi için bir şablon seçin HTTP trigger öğesini seçin.
    İşlev adı belirtin HttpExample yazın.
    Yetkilendirme düzeyi herkesin işlev uç noktanızı çağırmasını sağlayan öğesini seçin Anonymous. Yetkilendirme düzeyi hakkında bilgi edinmek için bkz . Yetkilendirme anahtarları.
    Projenizi nasıl açmak istediğinizi seçin Open in current window öğesini seçin.

    Visual Studio Code bu bilgileri kullanarak HTTP tetikleyicisi olan bir Azure İşlevleri projesi oluşturur. Yerel proje dosyalarını Gezgin'de görüntüleyebilirsiniz. Oluşturulan dosyalar hakkında daha fazla bilgi edinmek için bkz . Oluşturulan proje dosyaları.

  1. İstemlerde aşağıdaki bilgileri sağlayın:

    İstem Seçim
    İşlev projeniz için bir dil seçin JavaScript öğesini seçin.
    JavaScript programlama modeli seçme Model V4 öğesini seçin
    Projenizin ilk işlevi için bir şablon seçin HTTP trigger öğesini seçin.
    İşlev adı belirtin HttpExample yazın.
    Projenizi nasıl açmak istediğinizi seçin Open in current window öğesini seçin

    Visual Studio Code bu bilgileri kullanarak HTTP tetikleyicisi olan bir Azure İşlevleri projesi oluşturur. Yerel proje dosyalarını Gezgin'de görüntüleyebilirsiniz. Oluşturulan dosyalar hakkında daha fazla bilgi edinmek için bkz. JavaScript geliştirici kılavuzu Azure İşlevleri.

İşlevi yerel olarak çalıştırma

Visual Studio Code, Azure'da yayımlamadan önce bu projeyi yerel geliştirme bilgisayarınızda çalıştırmanıza olanak sağlamak için Azure İşlevleri Core araçlarıyla tümleştirilir.

  1. İşlevi yerel olarak başlatmak için F5 tuşuna veya sol taraftaki Etkinlik çubuğundaki Çalıştır ve Hata Ayıkla simgesine basın. Terminal panelinde Çekirdek Araçlardan Çıktı görüntülenir. Uygulamanız Terminal panelinde başlar. HTTP ile tetiklenen işlevinizin URL uç noktasının yerel olarak çalıştığını görebilirsiniz.

    Yerel işlev VS Code çıkışının ekran görüntüsü.

    Windows'da çalışırken sorun yaşıyorsanız Visual Studio Code için varsayılan terminalin WSL Bash olarak ayarlı olmadığından emin olun.

  2. Temel Araçlar hala Terminal'de çalışırken etkinlik çubuğundaki Azure simgesini seçin. Çalışma Alanı alanında Yerel Proje>İşlevleri'ni genişletin. (Windows) veya Ctrl tuşuna sağ tıklayın - yeni işleve (macOS) tıklayın ve İşlevi Şimdi Yürüt...'i seçin.

    İşlevi şimdi Visual Studio Code'dan yürüt

  3. İstek gövdesini girin bölümünde istek iletisi gövdesi değerini { "name": "Azure" }görürsünüz. Bu istek iletisini işlevinize göndermek için Enter tuşuna basın.

  4. İşlev yerel olarak yürütür ve bir yanıt döndürürse, Visual Studio Code'da bir bildirim oluşturulur. İşlev yürütme hakkındaki bilgiler Terminal panelinde gösterilir.

  5. Terminal paneli odaklanmış durumdayken, Çekirdek Araçlar'ı durdurmak ve hata ayıklayıcının bağlantısını kesmek için Ctrl + C tuşlarına basın.

İşlevin yerel bilgisayarınızda doğru şekilde çalıştığını doğruladıktan sonra, visual studio code kullanarak projeyi doğrudan Azure'da yayımlamanın zamanı geldi.

Azure'da oturum açma

Azure kaynakları oluşturabilmeniz veya uygulamanızı yayımlayabilmeniz için önce Azure'da oturum açmanız gerekir.

  1. Henüz oturum açmadıysanız Etkinlik çubuğunda Azure simgesini seçin. Ardından Kaynaklar alanında Azure'da oturum aç... seçeneğini belirleyin.

    VS Code içinde Azure'da oturum açma penceresinin ekran görüntüsü.

    Zaten oturum açtıysanız ve mevcut aboneliklerinizi görebiliyorsanız sonraki bölüme gidin. Henüz bir Azure hesabınız yoksa Azure Hesabı Oluştur... seçeneğini belirleyin. Öğrenciler Öğrenciler için Azure Hesabı Oluştur'u seçebilir....

  2. Tarayıcıda sorulduğunda Azure hesabınızı seçin ve Azure hesabı kimlik bilgilerinizi kullanarak oturum açın. Yeni bir hesap oluşturursanız, hesabınız oluşturulduktan sonra oturum açabilirsiniz.

  3. Başarıyla oturum açtıktan sonra yeni tarayıcı penceresini kapatabilirsiniz. Azure hesabınıza ait abonelikler kenar çubuğunda görüntülenir.

Azure'da işlev uygulamasını oluşturma

Bu bölümde, Azure aboneliğinizde bir işlev uygulaması ve ilgili kaynaklar oluşturacaksınız.

  1. Etkinlik çubuğunda Azure simgesini seçin. Ardından Kaynaklar alanında simgeyi + seçin ve Azure'da İşlev Uygulaması Oluştur seçeneğini belirleyin.

    Azure aboneliğinizde kaynak oluşturma

  2. İstemlerde aşağıdaki bilgileri sağlayın:

    İstem Seçim
    Aboneliği seçin Kullanılacak aboneliği seçin. Kaynaklar altında yalnızca bir aboneliğiniz olduğunda bu istemi görmezsiniz.
    İşlev uygulaması için genel olarak benzersiz bir ad girin URL yolunda geçerli bir ad yazın. Yazdığınız ad, Azure İşlevleri benzersiz olduğundan emin olmak için doğrulanır.
    Çalışma zamanı yığını seçme Yerel olarak çalıştırdığınız dil sürümünü seçin.
    Yeni kaynaklar için bir konum seçin Daha iyi performans için size yakın bir bölge seçin.

    Uzantı, Azure'da oluşturulan tek tek kaynakların durumunu Azure : Etkinlik Günlüğü panelinde gösterir.

    Azure kaynak oluşturma günlüğü

  3. Oluşturma işlemi tamamlandığında aboneliğinizde aşağıdaki Azure kaynakları oluşturulur. Kaynaklar, işlev uygulamanızın adına göre adlandırılır:

    • İlgili kaynaklar için mantıksal bir kapsayıcı olan kaynak grubu.
    • Projeleriniz hakkındaki durumu ve diğer bilgileri koruyan standart bir Azure Depolama hesabı.
    • İşlev kodunuzu yürütmek için ortam sağlayan bir işlev uygulaması. İşlev uygulaması, aynı barındırma planı içindeki kaynakların daha kolay yönetilmesi, dağıtılması ve paylaşılması için işlevleri mantıksal birim olarak gruplandırmanıza olanak tanır.
    • İşlev uygulamanız için temel konağı tanımlayan bir App Service planı.
    • uygulamadaki işlevlerinizin kullanımını izleyen işlev uygulamasına bağlı bir Uygulama Analizler örneği.

    İşlev uygulamanız oluşturulduktan sonra bir bildirim görüntülenir ve dağıtım paketi uygulanır.

    İpucu

    Varsayılan olarak, işlev uygulamanızın gerektirdiği Azure kaynakları, sağladığınız işlev uygulaması adına göre oluşturulur. Varsayılan olarak, bunlar işlev uygulamasıyla aynı yeni kaynak grubunda da oluşturulur. Bu kaynakların adlarını özelleştirmek veya mevcut kaynakları yeniden kullanmak istiyorsanız, bunun yerine projeyi gelişmiş oluşturma seçenekleriyle yayımlamanız gerekir.

Projeyi Azure’a dağıtma

Önemli

Mevcut bir işlev uygulamasına dağıtılması her zaman Azure'da bu uygulamanın içeriğinin üzerine yazılır.

  1. Azure etkinliğinin Kaynaklar alanında, yeni oluşturduğunuz işlev uygulaması kaynağını bulun, kaynağa sağ tıklayın ve İşlev uygulamasına dağıt... öğesini seçin.

  2. Önceki dağıtımların üzerine yazmanız istendiğinde, işlev kodunuzu yeni işlev uygulaması kaynağına dağıtmak için Dağıt'ı seçin.

  3. Dağıtım tamamlandıktan sonra, oluşturduğunuz Azure kaynakları da dahil olmak üzere oluşturma ve dağıtım sonuçlarını görüntülemek için Çıkışı Görüntüle'yi seçin. Bildirimi kaçırırsanız, yeniden görmek için sağ alt köşedeki zil simgesini seçin.

    Çıktıyı Görüntüle penceresinin ekran görüntüsü.

İşlevi Azure'da çalıştırma

  1. Yan çubuktaki Kaynaklar alanına dönün, aboneliğinizi, yeni işlev uygulamanızı ve İşlevler'i genişletin. (Windows) veya Ctrl tuşuna sağ tıklayın - İşleve HttpExample (macOS) tıklayın ve İşlevi Şimdi Yürüt...'i seçin.

    Visual Studio Code'dan Azure'da işlevi yürütme işleminin ekran görüntüsü.

  2. İstek gövdesini girin bölümünde istek iletisi gövdesi değerini { "name": "Azure" }görürsünüz. Bu istek iletisini işlevinize göndermek için Enter tuşuna basın.

  3. İşlev Azure'da yürütür ve bir yanıt döndürürse Visual Studio Code'da bir bildirim oluşturulur.

Kodu değiştirme ve Azure'a yeniden dağıtma

  1. Gezgin görünümünde Visual Studio Code'da dosyayı seçin ./HttpExample/index.js .

  2. JSON nesnesi oluşturmak ve döndürmek için dosyasını aşağıdaki kodla değiştirin.

    module.exports = async function (context, req) {
    
        try {
            context.log('JavaScript HTTP trigger function processed a request.');
    
            // Read incoming data
            const name = (req.query.name || (req.body && req.body.name));
            const sport = (req.query.sport || (req.body && req.body.sport));
    
            // fail if incoming data is required
            if (!name || !sport) {
    
                context.res = {
                    status: 400
                };
                return;
            }
    
            // Add or change code here
            const message = `${name} likes ${sport}`;
    
            // Construct response
            const responseJSON = {
                "name": name,
                "sport": sport,
                "message": message,
                "success": true
            }
    
            context.res = {
                // status: 200, /* Defaults to 200 */
                body: responseJSON,
                contentType: 'application/json'
            };
        } catch(err) {
            context.res = {
                status: 500
            };
        }
    }
    
  3. İşlev uygulamasını yerel olarak yeniden çalıştırın.

  4. İstek gövdesini girin isteminde, istek iletisi gövdesini { "name": "Tom","sport":"basketball" } olarak değiştirin. Bu istek iletisini işlevinize göndermek için Enter tuşuna basın.

  5. Bildirimde yanıtı görüntüleyin:

    {
      "name": "Tom",
      "sport": "basketball",
      "message": "Tom likes basketball",
      "success": true
    }
    
  6. İşlevi Azure'a yeniden dağıtın.

Sorun giderme

Bu hızlı başlangıcı kullanırken karşılaşılan en yaygın sorunları çözmek için aşağıdaki tabloyu kullanın.

Sorun Çözüm
Yerel işlev projesi oluşturamıyor musunuz? Azure İşlevleri uzantısının yüklü olduğundan emin olun.
İşlevi yerel olarak çalıştıramıyor musunuz? Azure İşlevleri Core Tools'un en son sürümünün yüklü olduğundan emin olun.
Windows üzerinde çalışırken Visual Studio Code için varsayılan terminal kabuğunun WSL Bash olarak ayarlı olmadığından emin olun.
İşlevi Azure'a dağıtamıyor musunuz? Hata bilgileri için Çıktı'ya bakın. Sağ alt köşedeki zil simgesi, çıkışı görüntülemenin başka bir yoludur. Mevcut bir işlev uygulamasında yayımlama yaptınız mı? Bu eylem, Azure'daki bu uygulamanın içeriğinin üzerine yazar.
Bulut tabanlı İşlev uygulaması çalıştırılamıyor mu? Parametreleri göndermek için sorgu dizesini kullanmayı unutmayın.

Kaynakları temizleme

Bir sonraki adıma devam edip işlevinize bir Azure Depolama kuyruğu bağlaması eklediğinizde, önceden yaptıklarınızı oluşturmak için tüm kaynaklarınızı yerinde tutmanız gerekir.

Aksi takdirde, daha fazla maliyet oluşmasını önlemek için işlev uygulamasını ve ilgili kaynaklarını silmek için aşağıdaki adımları kullanabilirsiniz.

  1. Visual Studio Code'da Azure simgesini seçerek Azure gezginini açın.
  2. Kaynak Grupları bölümünde kaynak grubunuzu bulun.
  3. Kaynak grubuna sağ tıklayın ve Sil'i seçin.

İşlev maliyetleri hakkında daha fazla bilgi edinmek için bkz . Tüketim planı maliyetlerini tahmin etme.

Sonraki adımlar

Http ile tetiklenen basit bir işlevle işlev uygulaması oluşturmak için Visual Studio Code'u kullandınız. Sonraki makalede, Azure Cosmos DB'ye veya Azure Depolama bağlanarak bu işlevi genişletirsiniz. Diğer Azure hizmetlerine bağlanma hakkında daha fazla bilgi edinmek için bkz. Azure İşlevleri'da var olan bir işleve bağlama ekleme. Güvenlik hakkında daha fazla bilgi edinmek istiyorsanız bkz. Azure İşlevleri güvenliğini sağlama.

Http ile tetiklenen basit bir işlevle işlev uygulaması oluşturmak için Visual Studio Code'u kullandınız.