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

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

Bu hızlı başlangıç tamamladıktan sonra Azure hesabınıza birkaç ABD doları veya daha düşük bir maliyetle sahip oluruz.

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

Ortamınızı yapılandırma

Başlamadan önce aşağıdaki gereksinimlerin karşı olduğundan emin olun:

• Etkin aboneliği olan bir Azure hesabı. Ücretsiz bir hesap oluşturun.

• Node.js 14.x veya Node.js 16.x (önizleme). Sürümü kontrol node --version etmek için komutunu kullanın.

• Desteklenen platformlardan birinde çalışan Visual Studio Code.

• Visual Studio Code için Azure İşlevleri uzantısı.

• Azure Functions Core Tools 4.x.

Yerel projenizi oluşturma

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

1. Etkinlik çubuğundan Azure simgesini seçtikten sonra Azure: İşlevler alanında Yeni proje oluştur... simgesini seçin.

   

2. Projenizin çalışma alanı için bir dizin konumu seçtikten sonra Seç'i belirleyin.

   Not

   Bu adımlar bir çalışma alanının dışında tamamlanacak şekilde tasarlanmıştır. Bu örnekte, bir çalışma alanının parçası olan bir proje klasörünü seçmeyin.

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

   İstem	Seçim
   İşlev projeniz için bir dil seçin	JavaScript öğesini seçin.
   Projenizin ilk işlevi için şablon seçme	HTTP trigger öğesini seçin.
   İşlev adı sağlama	HttpExample yazın.
   Yetkilendirme düzeyi	herkesin Anonymous işlev uç noktanızı çağırmalarını sağlayan 'ı seçin. Yetkilendirme düzeyi hakkında bilgi edinmek için bkz. Yetkilendirme anahtarları.
   Projenizi nasıl açmak istediğinizi seçin	Add to workspace öğesini seçin.

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

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

Visual Studio Code, Azure'Azure İşlevleri yayımlamadan önce bu projeyi yerel geliştirme bilgisayarınızda çalıştırmanıza izin vermenizi sağlar.

1. İşlevini çağırarak F5 tuşuna basarak işlev uygulaması projesini başlatabilirsiniz. Temel Araçlar’daki çıktı, Terminal panelinde görüntülenir. Uygulamanız Terminal panelinden başlar. HTTP ile tetiklenen işlevinizin URL uç noktasının yerel olarak çalıştır çalıştırıi olduğunu görüyorsunuz.

   

   Windows'da çalıştırma konusunda sorun Visual Studio Code için varsayılan terminalin WSL Bash olarak ayarsız olduğundan emin olun.

2. Core Tools çalışıyorken Azure: İşlevler alanına gidin. İşlevler'in altında Yerel İşlevler'Project > genişletin. İşleve sağ tıklayın (Windows) veya Ctrl tuşunu basılı tutarak (macOS) HttpExample tıklayın ve İşlevi Şimdi Yürüt... seçeneğini seçin.

   

3. İstek gövdeyi girin içinde istek iletisi gövdesi değerinin olduğunu { "name": "Azure" } görüyorsunuz. Bu istek iletiyi işlevinize göndermek için Enter tuşuna basın.

4. İşlev yerel olarak yürütülür ve yanıt döndürülürken, bir bildirim Visual Studio Code. İşlev yürütmesi hakkında bilgiler Terminal panelinde gösterilir.

5. Core Tools'ı 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ırılanı doğruladıktan sonra, projeyi doğrudan Azure'Visual Studio Code için Visual Studio Code işlevini kullanabilirsiniz.

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, sonra Azure: işlevler alanında Azure 'da oturum aç' ı seçin... Henüz bir hesabınız yoksa ücretsiz bir Azure hesabı oluşturabilirsiniz. Öğrenciler, öğrenciler için ücretsiz bir Azure hesabı oluşturabilir.

   

   Zaten oturum açtıysanız sonraki bölüme gidin.

2. Tarayıcıda istendiğinde, Azure hesabınızı seçin ve Azure hesabı kimlik bilgilerinizi kullanarak oturum açın.

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

Projeyi Azure’a dağıtma

Bu bölümde, Azure aboneliğinize bir işlev uygulaması ve ilgili kaynaklar oluşturacağız ve ardından kodunuzu dağıtacağız.

1. Etkinlik çubuğunda Azure simgesini seçin ve ardından Azure: İşlevler alanında İşlev uygulamasına dağıt... düğmesini seçin.

   

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

   İstem	Seçim
   Azure'da İşlev Uygulaması seçme	+ Create new Function App öğesini seçin. (Bu makalede Advanced ele almayabilirsiniz seçeneğini seçme.)
   İşlev uygulaması için genel olarak benzersiz bir ad girin	URL yolunda geçerli bir ad yazın. Bu adın, Azure İşlevleri'da benzersiz olduğundan emin olmak için, Azure İşlevleri.
   Çalışma zamanı seçme	Yerel olarak Node.js dosyanın sürümünü seçin. Sürümü kontrol etmek node --version için komutunu kullanabilirsiniz.
   Yeni kaynaklar için bir konum seçin	Daha iyi performans için size yakın bir bölge seçin.

   Uzantı, bildirim alanında Azure'da oluşturulan tek tek kaynakların durumunu gösterir.

   

   Tamamlandığında, işlevinizin uygulama adına göre adlar kullanılarak aboneliğiniz içinde aşağıdaki Azure kaynakları oluşturulur:

   • İlgili kaynaklar için mantıksal kapsayıcı olan bir kaynak grubu.
   • Projeleriniz hakkında durum ve diğer bilgileri tutan standart bir Azure depolama hesabı.
   • Sunucusuz işlev uygulamanız için temel Konağı tanımlayan bir tüketim planı.
   • İş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 bir mantıksal birim olarak gruplandırmanıza olanak tanır.
   • Sunucusuz işlevinizin kullanımını izleyen işlev uygulamasına bağlı bir Application Insights örneği.

3. İş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 tarafından gereken Azure kaynakları, sağladığınız işlev uygulaması adına göre oluşturulur. Varsayılan olarak, aynı zamanda işlev uygulamasıyla aynı yeni kaynak grubunda de oluşturulur. Bu kaynakların adlarını özelleştirmek veya mevcut kaynakları yeniden kullanmak istiyorsanız, projeyi gelişmiş oluşturma seçenekleriyle yayımlamanızgerekir.

4. Oluşturduğunuz Azure kaynakları da dahil olmak üzere oluşturma ve dağıtım sonuçlarını görüntülemek için bu bildirimde Çıkışı Görüntüle'yi seçin. Bildirimi kaçırırsanız sağ alt köşedeki zil simgesini seçerek yeniden görüntüleyeceksiniz.

   

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

1. Yan çubuktaki Azure: Functions alanına geri döndüğünüzde aboneliğinizi, yeni işlev uygulamanızı ve işlevlerinizi genişletin. İşlevi sağ tıklatın (Windows) veya CTRL + tıklatın (MacOS) HttpExample ve Şimdi işlevi Çalıştır... seçeneğini belirleyin.

   

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

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

Kodu değiştirme ve Azure'a yeniden uygulama

1. VSCode Gezgini görünümünde dosyayı ./HttpExample/index.js seçin.

2. Bir JSON nesnesi oluşturmak ve bunu iade etmek 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ırma.

4. enter istek gövdesi isteminde istek iletisi gövdesini { "name": "Tom","spor":"basketball" } olarak değiştirir. Bu istek iletiyi işlevinize göndermek için Enter tuşuna basın.

5. Bildirimin yanıtını görüntüleme:

   {
     "name": "Tom",
     "sport": "basketball",
     "message": "Tom likes basketball",
     "success": true
   }
   

6. İşlevi Azure'a yeniden uygulama.

Sorun giderme

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

Kaynakları temizleme

bir sonraki adıma devam edip işlevlerinize bir Azure Depolama kuyruğu bağlama eklediğinizde, daha önce yapmış olduğunuz bir yerde oluşturmak için tüm kaynaklarınızı saklamanız gerekir.

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

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

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

Sonraki adımlar

HTTP ile Visual Studio Code bir işlev uygulaması oluşturmak için Visual Studio Code işlevini kullandık. Sonraki makalede, Azure Cosmos DB'ye veya Azure veritabanına bağlanarak bu işlevi Depolama. Diğer Azure hizmetleriyle bağlantı hakkında daha fazla bilgi edinmek için bkz.Azure İşlevleri. Güvenlik hakkında daha fazla bilgi edinmek için bkz. Azure İşlevleri.