Hızlı Başlangıç: Visual Studio Code kullanarak TypeScript ile Azure'da işlev oluşturma

Bu makalede, HTTP isteklerine yanıt veren bir TypeScript işlevi oluşturmak için Visual Studio Code'u kullanacaksınız. Kodu yerel olarak test ettikten sonra bunu Azure İşlevleri’nin sunucusuz ortamına dağıtacaksınız.

Önemli

Bu makalenin içeriği, sayfanın üst kısmındaki seçicide 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:

  • Node.js 18.x veya üzeri. node --version Sürümünüzü denetlemek için komutunu kullanın.

  • TypeScript 4.x. tsc -v Sürümünüzü denetlemek için komutunu kullanın.

Yerel projenizi oluşturma

Bu bölümde, TypeScript'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.

    Screenshot of create a new project window.

  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 TypeScript öğesini seçin.
    TypeScript 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 TypeScript öğesini seçin.
    TypeScript 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 Azure İşlevleri TypeScript geliştirici kılavuzuna bakın.

İş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.

    Screenshot of the Local function VS Code output.

    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.

    Execute function now from Visual Studio Code

  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

Uygulamanızı yayımlamadan ö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.

    Screenshot of the sign-in to Azure window within VS Code.

    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.

    Create a resource in your Azure subscription

  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.

    Log of Azure resource creation

  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.

    Bahşiş

    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.

    Screenshot of the View Output window.

İş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.

    Screenshot of executing function in Azure from Visual Studio Code.

  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.

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 F1 tuşuna basarak komut paletini açın. Komut paletinde araması yapın ve öğesini seçin Azure: Open in portal.

  2. İşlev uygulamanızı seçin ve Enter tuşuna basın. İşlev uygulaması sayfası Azure portalında açılır.

  3. Genel Bakış sekmesinde Kaynak grubunun yanındaki adlandırılmış bağlantıyı seçin.

    Screenshot of select the resource group to delete from the function app page.

  4. Kaynak grubu sayfasında, dahil edilen kaynakların listesini gözden geçirin ve bunların silmek istediğiniz kaynaklar olduğunu doğrulayın.

  5. Kaynak grubunu sil’i seçin ve yönergeleri izleyin.

    Silme işlemi birkaç dakika sürebilir. İşlem tamamlandığında, birkaç saniye boyunca bir bildirim görüntülenir. Bildirimi görüntülemek için sayfanın üst kısmındaki zil simgesini de seçebilirsiniz.

İşlev maliyetleri hakkında daha fazla bilgi 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 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.