Tutorial: Membangun aplikasi .NET Service Fabric
Tutorial ini adalah bagian satu dalam seri. Dalam tutorial ini, pelajari cara membuat aplikasi Azure Service Fabric yang memiliki front end ASP.NET Core Web API dan layanan back-end stateful untuk menyimpan data Anda. Setelah selesai, Anda memiliki aplikasi pemungutan suara yang memiliki front end web ASP.NET Core yang menyimpan hasil pemungutan suara dalam layanan back-end stateful di kluster.
Seri tutorial ini memerlukan komputer pengembang Windows. Jika Anda tidak ingin membuat aplikasi voting secara manual, Anda dapat mengunduh kode sumber untuk aplikasi yang sudah selesai dan langsung ke Telusuri aplikasi contoh voting. Anda juga dapat melihat panduan video tutorial ini.
Dalam tutorial ini, Anda akan mempelajari cara:
- Buat layanan ASP.NET Core Web API sebagai layanan yang canggih dan andal
- Buat layanan ASP.NET Core Web Application sebagai layanan web yang canggih
- Gunakan proksi terbalik untuk berkomunikasi dengan layanan stateful
Seri tutorial menunjukkan kepada Anda cara:
- Membangun aplikasi .NET Service Fabric (tutorial ini)
- Menyebarkan aplikasi ke kluster jarak jauh
- Menambahkan titik akhir HTTPS ke layanan front-end ASP.NET Core
- Mengonfigurasi CI/CD dengan menggunakan Azure Pipelines
- Menyiapkan pemantauan dan diagnostik untuk aplikasi
Prasyarat
Sebelum Anda memulai tutorial ini:
- Jika Anda tidak memiliki langganan Azure, buat akun gratis.
- Instal Visual Studio 2019 versi 15.5 atau yang lebih baru, termasuk beban kerja pengembangan Azure dan beban kerja ASP.NET dan pengembangan web.
- Pasang Service Fabric SDK.
Buat layanan ASP.NET Web API sebagai layanan yang andal
Pertama, buat ujung depan web aplikasi pemungutan suara dengan menggunakan ASP.NET Core. ASP.NET Core adalah kerangka kerja pengembangan web lintas platform ringan yang dapat Anda gunakan untuk membuat UI web modern dan API web.
Untuk mendapatkan pemahaman lengkap tentang bagaimana ASP.NET Core terintegrasi dengan Service Fabric, kami sangat menyarankan Agar Anda meninjau ASP.NET Core dalam Service Fabric Reliable Services. Untuk saat ini, Anda dapat mengikuti tutorial ini untuk memulai dengan cepat. Untuk mempelajari selengkapnya tentang ASP.NET Core, lihat dokumentasi ASP.NET Core.
Untuk membuat layanan:
Buka Visual Studio dengan menggunakan opsi Jalankan sebagai administrator .
Pilih File>Proyek Baru>untuk membuat proyek baru.
Pada Buat proyek baru, pilih Aplikasi Cloud>Service Fabric. Pilih Selanjutnya.
Pilih Stateless ASP.NET Core untuk jenis proyek baru, beri nama layanan Anda VotingWeb, lalu pilih Buat.
Panel berikutnya memperlihatkan sekumpulan templat proyek ASP.NET Core. Untuk tutorial ini, pilih Aplikasi Web (Model-View-Controller), lalu pilih OK.
Visual Studio membuat aplikasi dan proyek layanan, lalu menampilkannya di Visual Studio Penjelajah Solusi:
Perbarui file site.js
Buka wwwroot/js/site.js dan buka file. Ganti konten file dengan JavaScript berikut yang digunakan oleh tampilan Beranda, lalu simpan perubahan Anda.
var app = angular.module('VotingApp', ['ui.bootstrap']);
app.run(function () { });
app.controller('VotingAppController', ['$rootScope', '$scope', '$http', '$timeout', function ($rootScope, $scope, $http, $timeout) {
$scope.refresh = function () {
$http.get('api/Votes?c=' + new Date().getTime())
.then(function (data, status) {
$scope.votes = data;
}, function (data, status) {
$scope.votes = undefined;
});
};
$scope.remove = function (item) {
$http.delete('api/Votes/' + item)
.then(function (data, status) {
$scope.refresh();
})
};
$scope.add = function (item) {
var fd = new FormData();
fd.append('item', item);
$http.put('api/Votes/' + item, fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
})
.then(function (data, status) {
$scope.refresh();
$scope.item = undefined;
})
};
}]);
Perbarui file Index.cshtml
Buka Views/Home/Index.cshtml dan buka file. File ini memiliki tampilan yang khusus untuk pengontrol Beranda. Ganti kontennya dengan kode berikut, lalu simpan perubahan Anda.
@{
ViewData["Title"] = "Service Fabric Voting Sample";
}
<div ng-controller="VotingAppController" ng-init="refresh()">
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2 text-center">
<h2>Service Fabric Voting Sample</h2>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<form class="col-xs-12 center-block">
<div class="col-xs-6 form-group">
<input id="txtAdd" type="text" class="form-control" placeholder="Add voting option" ng-model="item"/>
</div>
<button id="btnAdd" class="btn btn-default" ng-click="add(item)">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
Add
</button>
</form>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="row">
<div class="col-xs-4">
Click to vote
</div>
</div>
<div class="row top-buffer" ng-repeat="vote in votes.data">
<div class="col-xs-8">
<button class="btn btn-success text-left btn-block" ng-click="add(vote.Key)">
<span class="pull-left">
{{vote.key}}
</span>
<span class="badge pull-right">
{{vote.value}} Votes
</span>
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-danger pull-right btn-block" ng-click="remove(vote.Key)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Remove
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Perbarui file _Layout.cshtml
Buka Views/Shared/_Layout.cshtml dan buka file. File ini memiliki tata letak default untuk aplikasi ASP.NET. Ganti kontennya dengan kode berikut, lalu simpan perubahan Anda.
<!DOCTYPE html>
<html ng-app="VotingApp" xmlns:ng="https://angularjs.org">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>@ViewData["Title"]</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="~/css/site.css" rel="stylesheet"/>
</head>
<body>
<div class="container body-content">
@RenderBody()
</div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<script src="~/js/site.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
Perbarui file VotingWeb.cs
Buka file VotingWeb.cs. File ini membuat ASP.NET Core WebHost di dalam layanan stateless dengan menggunakan server web WebListener.
Di awal file, tambahkan direktif using System.Net.Http; .
CreateServiceInstanceListeners() Ganti fungsi dengan kode berikut, lalu simpan perubahan Anda.
protected override IEnumerable<ServiceInstanceListener> CreateServiceInstanceListeners()
{
return new ServiceInstanceListener[]
{
new ServiceInstanceListener(
serviceContext =>
new KestrelCommunicationListener(
serviceContext,
"ServiceEndpoint",
(url, listener) =>
{
ServiceEventSource.Current.ServiceMessage(serviceContext, $"Starting Kestrel on {url}");
return new WebHostBuilder()
.UseKestrel()
.ConfigureServices(
services => services
.AddSingleton<HttpClient>(new HttpClient())
.AddSingleton<FabricClient>(new FabricClient())
.AddSingleton<StatelessServiceContext>(serviceContext))
.UseContentRoot(Directory.GetCurrentDirectory())
.UseStartup<Startup>()
.UseServiceFabricIntegration(listener, ServiceFabricIntegrationOptions.None)
.UseUrls(url)
.Build();
}))
};
}
Kemudian tambahkan metode berikut GetVotingDataServiceName setelah CreateServiceInstanceListeners(), lalu simpan perubahan Anda. GetVotingDataServiceName mengembalikan nama layanan saat disurvei.
internal static Uri GetVotingDataServiceName(ServiceContext context)
{
return new Uri($"{context.CodePackageActivationContext.ApplicationName}/VotingData");
}
Tambahkan file VotesController.cs
Tambahkan pengontrol untuk menentukan tindakan pemungutan suara. Klik kanan folder Pengontrol, lalu pilih Tambahkan>item>Baru Visual C#>ASP.NET Core>Class. Beri nama file VotesController.cs, lalu pilih Tambahkan.
Ganti konten file VotesController.cs dengan kode berikut, lalu simpan perubahan Anda. Kemudian, di Perbarui file VotesController.cs, file ini dimodifikasi untuk membaca dan menulis data voting dari layanan back-end. Untuk saat ini, pengontrol mengembalikan data string statis ke tampilan.
namespace VotingWeb.Controllers
{
using System;
using System.Collections.Generic;
using System.Fabric;
using System.Fabric.Query;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
[Produces("application/json")]
[Route("api/Votes")]
public class VotesController : Controller
{
private readonly HttpClient httpClient;
public VotesController(HttpClient httpClient)
{
this.httpClient = httpClient;
}
// GET: api/Votes
[HttpGet]
public async Task<IActionResult> Get()
{
List<KeyValuePair<string, int>> votes= new List<KeyValuePair<string, int>>();
votes.Add(new KeyValuePair<string, int>("Pizza", 3));
votes.Add(new KeyValuePair<string, int>("Ice cream", 4));
return Json(votes);
}
}
}
Mengonfigurasi port mendengarkan
Saat layanan front-end VotingWeb dibuat, Visual Studio secara acak memilih port untuk didengarkan layanan. Layanan VotingWeb bertindak sebagai ujung depan untuk aplikasi ini dan menerima lalu lintas eksternal. Di bagian ini, Anda mengikat layanan tersebut ke port tetap dan terkenal. Manifes layanan mendeklarasikan titik akhir layanan.
Di Penjelajah Solusi, buka VotingWeb/PackageRoot/ServiceManifest.xml. Di bagian Resources , temukan Endpoint elemen , lalu ubah nilainya Port menjadi 8080.
Untuk menyebarkan dan menjalankan aplikasi secara lokal, port mendengarkan aplikasi harus terbuka dan tersedia di komputer Anda.
<Resources>
<Endpoints>
<!-- This endpoint is used by the communication listener to obtain the port on which to
listen. Please note that if your service is partitioned, this port is shared with
replicas of different partitions that are placed in your code. -->
<Endpoint Protocol="http" Name="ServiceEndpoint" Type="Input" Port="8080" />
</Endpoints>
</Resources>
Kemudian perbarui Application URL nilai properti dalam proyek Voting sehingga browser web terbuka ke port yang benar saat Anda men-debug aplikasi Anda. Di Penjelajah Solusi, pilih proyek Voting, lalu perbarui properti ke Application URL 8080.
Terapkan dan jalankan aplikasi Voting secara lokal
Anda sekarang dapat menjalankan aplikasi Voting untuk men-debugnya. Di Visual Studio, pilih F5 untuk menyebarkan aplikasi ke kluster Service Fabric lokal Anda dalam mode debug. Aplikasi gagal jika sebelumnya Anda tidak membuka Visual Studio dengan menggunakan opsi Jalankan sebagai administrator .
Catatan
Pertama kali Anda menjalankan dan menyebarkan aplikasi secara lokal, Visual Studio membuat kluster Service Fabric lokal untuk digunakan untuk penelusuran kesalahan. Proses untuk membuat kluster mungkin memakan waktu. Status pembuatan kluster ditampilkan di jendela Output Visual Studio.
Setelah aplikasi Voting disebarkan ke kluster Service Fabric lokal Anda, aplikasi web Anda secara otomatis terbuka di tab browser. Ini terlihat mirip dengan contoh ini:
Untuk berhenti men-debug aplikasi, kembali ke Visual Studio dan pilih Shift+F5.
Menambahkan layanan back-end yang dinyatakan ke aplikasi Anda
Sekarang setelah layanan ASP.NET Web API berjalan dalam aplikasi, tambahkan layanan yang dapat diandalkan yang stateful untuk menyimpan beberapa data dalam aplikasi.
Anda dapat menggunakan Service Fabric untuk menyimpan data Anda secara konsisten dan andal tepat di dalam layanan Anda dengan menggunakan koleksi yang andal. Koleksi andal adalah sekumpulan kelas koleksi yang sangat tersedia dan dapat diandalkan yang akrab bagi siapa saja yang memiliki pengalaman menggunakan koleksi C#.
Untuk membuat layanan yang menyimpan nilai penghitung dalam koleksi yang andal:
Di Penjelajah Solusi, klik kanan Layanan di proyek aplikasi Voting dan pilih Tambahkan>Layanan Service Fabric Baru.
Dalam dialog Layanan Service Fabric Baru, pilih Stateful ASP.NET Core, beri nama layanan VotingData, lalu pilih OK.
Setelah proyek layanan dibuat, Anda memiliki dua layanan di aplikasi Anda. Saat Anda terus membangun aplikasi, Anda dapat menambahkan lebih banyak layanan dengan cara yang sama. Setiap layanan dapat di-versi dan ditingkatkan secara independen.
Panel berikutnya memperlihatkan sekumpulan templat proyek ASP.NET Core. Untuk tutorial ini, pilih API.
Visual Studio membuat proyek layanan VotingData dan menampilkannya di Penjelajah Solusi:
Tambahkan file VoteDataController.cs
Di proyek VotingData, klik kanan folder Pengontrol, lalu pilih Tambahkan>Kelas item>Baru. Beri nama file VoteDataController.cs dan pilih Tambahkan. Ganti konten file dengan kode berikut, lalu simpan perubahan Anda.
namespace VotingData.Controllers
{
using System.Collections.Generic;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.ServiceFabric.Data;
using Microsoft.ServiceFabric.Data.Collections;
[Route("api/[controller]")]
public class VoteDataController : Controller
{
private readonly IReliableStateManager stateManager;
public VoteDataController(IReliableStateManager stateManager)
{
this.stateManager = stateManager;
}
// GET api/VoteData
[HttpGet]
public async Task<IActionResult> Get()
{
CancellationToken ct = new CancellationToken();
IReliableDictionary<string, int> votesDictionary = await this.stateManager.GetOrAddAsync<IReliableDictionary<string, int>>("counts");
using (ITransaction tx = this.stateManager.CreateTransaction())
{
Microsoft.ServiceFabric.Data.IAsyncEnumerable<KeyValuePair<string, int>> list = await votesDictionary.CreateEnumerableAsync(tx);
Microsoft.ServiceFabric.Data.IAsyncEnumerator<KeyValuePair<string, int>> enumerator = list.GetAsyncEnumerator();
List<KeyValuePair<string, int>> result = new List<KeyValuePair<string, int>>();
while (await enumerator.MoveNextAsync(ct))
{
result.Add(enumerator.Current);
}
return this.Json(result);
}
}
// PUT api/VoteData/name
[HttpPut("{name}")]
public async Task<IActionResult> Put(string name)
{
IReliableDictionary<string, int> votesDictionary = await this.stateManager.GetOrAddAsync<IReliableDictionary<string, int>>("counts");
using (ITransaction tx = this.stateManager.CreateTransaction())
{
await votesDictionary.AddOrUpdateAsync(tx, name, 1, (key, oldvalue) => oldvalue + 1);
await tx.CommitAsync();
}
return new OkResult();
}
// DELETE api/VoteData/name
[HttpDelete("{name}")]
public async Task<IActionResult> Delete(string name)
{
IReliableDictionary<string, int> votesDictionary = await this.stateManager.GetOrAddAsync<IReliableDictionary<string, int>>("counts");
using (ITransaction tx = this.stateManager.CreateTransaction())
{
if (await votesDictionary.ContainsKeyAsync(tx, name))
{
await votesDictionary.TryRemoveAsync(tx, name);
await tx.CommitAsync();
return new OkResult();
}
else
{
return new NotFoundResult();
}
}
}
}
}
Sambungkan layanan
Di bagian ini, Anda menyambungkan dua layanan. Anda membuat aplikasi web front-end mendapatkan informasi pemungutan suara dari layanan back-end, lalu mengatur informasi di aplikasi.
Service Fabric memberi Anda fleksibilitas lengkap dengan cara Anda berkomunikasi dengan layanan yang andal. Dalam satu aplikasi, Anda mungkin memiliki layanan yang dapat diakses melalui TCP/IP, melalui HTTP REST API, atau melalui protokol WebSocket. Untuk latar belakang tentang opsi yang tersedia dan tradeoff-nya, lihat Berkomunikasi dengan layanan.
Tutorial ini menggunakan ASP.NET Core Web API dan proksi terbalik Service Fabric sehingga layanan web front-end VotingWeb dapat berkomunikasi dengan layanan VotingData back-end. Proksi terbalik dikonfigurasi secara default untuk menggunakan port 19081. Port proksi terbalik diatur dalam templat Azure Resource Manager yang menyiapkan kluster. Untuk menemukan port mana yang digunakan, lihat templat kluster di Microsoft.ServiceFabric/clusters sumber daya:
"nodeTypes": [
{
...
"httpGatewayEndpointPort": "[variables('nt0fabricHttpGatewayPort')]",
"isPrimary": true,
"vmInstanceCount": "[parameters('nt0InstanceCount')]",
"reverseProxyEndpointPort": "[parameters('SFReverseProxyPort')]"
}
],
Untuk menemukan port proksi terbalik yang digunakan dalam kluster pengembangan lokal Anda, lihat HttpApplicationGatewayEndpoint elemen dalam manifes kluster Service Fabric lokal:
- Untuk membuka alat Service Fabric Explorer, buka browser dan buka
http://localhost:19080. - Pilih Manifes Kluster>.
- Catat
HttpApplicationGatewayEndpointport elemen. Secara default, port adalah 19081. Jika bukan 19081, ubah port dalamGetProxyAddressmetode kode VotesController.cs seperti yang dijelaskan di bagian berikutnya.
Perbarui file VotesController.cs
Dalam proyek VotingWeb, buka file Controllers/VotesController.cs . VotesController Ganti konten definisi kelas dengan kode berikut, lalu simpan perubahan Anda. Jika port proksi terbalik yang Anda temukan di langkah jahat bukan 19081, ubah port dalam GetProxyAddress metode dari 19081 ke port yang Anda temukan.
public class VotesController : Controller
{
private readonly HttpClient httpClient;
private readonly FabricClient fabricClient;
private readonly StatelessServiceContext serviceContext;
public VotesController(HttpClient httpClient, StatelessServiceContext context, FabricClient fabricClient)
{
this.fabricClient = fabricClient;
this.httpClient = httpClient;
this.serviceContext = context;
}
// GET: api/Votes
[HttpGet("")]
public async Task<IActionResult> Get()
{
Uri serviceName = VotingWeb.GetVotingDataServiceName(this.serviceContext);
Uri proxyAddress = this.GetProxyAddress(serviceName);
ServicePartitionList partitions = await this.fabricClient.QueryManager.GetPartitionListAsync(serviceName);
List<KeyValuePair<string, int>> result = new List<KeyValuePair<string, int>>();
foreach (Partition partition in partitions)
{
string proxyUrl =
$"{proxyAddress}/api/VoteData?PartitionKey={((Int64RangePartitionInformation) partition.PartitionInformation).LowKey}&PartitionKind=Int64Range";
using (HttpResponseMessage response = await this.httpClient.GetAsync(proxyUrl))
{
if (response.StatusCode != System.Net.HttpStatusCode.OK)
{
continue;
}
result.AddRange(JsonConvert.DeserializeObject<List<KeyValuePair<string, int>>>(await response.Content.ReadAsStringAsync()));
}
}
return this.Json(result);
}
// PUT: api/Votes/name
[HttpPut("{name}")]
public async Task<IActionResult> Put(string name)
{
Uri serviceName = VotingWeb.GetVotingDataServiceName(this.serviceContext);
Uri proxyAddress = this.GetProxyAddress(serviceName);
long partitionKey = this.GetPartitionKey(name);
string proxyUrl = $"{proxyAddress}/api/VoteData/{name}?PartitionKey={partitionKey}&PartitionKind=Int64Range";
StringContent putContent = new StringContent($"{{ 'name' : '{name}' }}", Encoding.UTF8, "application/json");
putContent.Headers.ContentType = new MediaTypeHeaderValue("application/json");
using (HttpResponseMessage response = await this.httpClient.PutAsync(proxyUrl, putContent))
{
return new ContentResult()
{
StatusCode = (int) response.StatusCode,
Content = await response.Content.ReadAsStringAsync()
};
}
}
// DELETE: api/Votes/name
[HttpDelete("{name}")]
public async Task<IActionResult> Delete(string name)
{
Uri serviceName = VotingWeb.GetVotingDataServiceName(this.serviceContext);
Uri proxyAddress = this.GetProxyAddress(serviceName);
long partitionKey = this.GetPartitionKey(name);
string proxyUrl = $"{proxyAddress}/api/VoteData/{name}?PartitionKey={partitionKey}&PartitionKind=Int64Range";
using (HttpResponseMessage response = await this.httpClient.DeleteAsync(proxyUrl))
{
if (response.StatusCode != System.Net.HttpStatusCode.OK)
{
return this.StatusCode((int) response.StatusCode);
}
}
return new OkResult();
}
/// <summary>
/// Constructs a reverse proxy URL for a given service.
/// Example: http://localhost:19081/VotingApplication/VotingData/
/// </summary>
/// <param name="serviceName"></param>
/// <returns></returns>
private Uri GetProxyAddress(Uri serviceName)
{
return new Uri($"http://localhost:19081{serviceName.AbsolutePath}");
}
/// <summary>
/// Creates a partition key from the given name.
/// Uses the zero-based numeric position in the alphabet of the first letter of the name (0-25).
/// </summary>
/// <param name="name"></param>
/// <returns></returns>
private long GetPartitionKey(string name)
{
return Char.ToUpper(name.First()) - 'A';
}
}
Mempelajari aplikasi contoh pemungutan suara
Aplikasi voting terdiri atas dua layanan:
- Layanan front-end web (VotingWeb): Layanan front-end web ASP.NET Core yang melayani halaman web dan mengekspos API web untuk berkomunikasi dengan layanan back-end.
- Layanan back-end (VotingData): Layanan web ASP.NET Core yang mengekspos API untuk menyimpan hasil pemungutan suara dalam kamus andal yang bertahan pada disk.
Saat Anda melakukan pemungutan suara dalam aplikasi, peristiwa berikut terjadi:
File JavaScript mengirimkan permintaan suara ke API web di layanan front-end web sebagai permintaan HTTP PUT.
Layanan front-end web menggunakan proksi untuk mencari dan meneruskan permintaan HTTP PUT ke layanan back-end.
Layanan back-end mengambil permintaan masuk dan menyimpan hasil yang diperbarui dalam kamus yang andal. Kamus direplikasi ke beberapa simpul dalam kluster dan bertahan pada disk. Semua data aplikasi disimpan dalam kluster sehingga tidak diperlukan database.
Debug di Visual Studio
Saat Anda men-debug aplikasi di Visual Studio, Anda menggunakan kluster pengembangan Service Fabric lokal. Anda dapat menyesuaikan pengalaman penelusuran kesalahan dengan skenario Anda.
Dalam aplikasi ini, simpan data di layanan back-end dengan menggunakan kamus yang andal. Visual Studio menghapus aplikasi secara default saat Anda menghentikan debugger. Menghapus aplikasi menyebabkan data di layanan ujung belakang juga dihapus. Untuk mempertahankan data di antara sesi debug, Anda dapat mengubah Mode Debug Aplikasi sebagai properti pada proyek Voting di Visual Studio.
Untuk melihat apa yang terjadi dalam kode, selesaikan langkah-langkah berikut:
Buka file VotingWeb\VotesController.cs dan atur titik henti dalam metode API
Putweb (baris 72).Buka file VotingData\VoteDataController.cs dan atur titik henti dalam metode API
Putweb ini (baris 54).Pilih F5 untuk memulai aplikasi dalam mode debug.
Kembali ke browser dan pilih opsi pemungutan suara atau tambahkan opsi pemungutan suara baru. Anda mencapai titik henti pertama di pengontrol API front-end web.
JavaScript di browser mengirimkan permintaan ke pengontrol API web di layanan front-end:
- Pertama, buat URL ke proksi terbalik untuk layanan back-end. (1)
- Kemudian kirim permintaan HTTP PUT ke proksi terbalik. (2)
- Terakhir, kembalikan respons dari layanan back-end ke klien. (3)
Pilih F5 untuk melanjutkan.
Anda sekarang berada di titik henti di layanan back-end:
- Di baris pertama dalam metode , gunakan
stateManageruntuk mendapatkan atau menambahkan kamus andal yang disebutcounts. (1) - Semua interaksi yang memiliki nilai dalam kamus yang andal memerlukan transaksi. Pernyataan ini
usingmembuat transaksi tersebut. (2) - Dalam transaksi, perbarui nilai kunci yang relevan untuk opsi pemungutan suara dan lakukan operasi.
commitSaat metode kembali, data diperbarui dalam kamus. Kemudian mereplikasi ke simpul lain dalam kluster. Data sekarang disimpan dengan aman di kluster, dan layanan back-end dapat gagal ke node lain dan masih memiliki data yang tersedia. (3)
- Di baris pertama dalam metode , gunakan
Pilih F5 untuk melanjutkan.
Untuk menghentikan sesi penelusuran kesalahan, pilih Shift+F5.
Langkah selanjutnya
Melanjutkan ke tutorial berikutnya: