Esercitazione: creare, eseguire il debug, distribuire e aggiornare un'applicazione multiservizio in Service Fabric Mesh
Importante
L'anteprima di Azure Service Fabric Mesh è stata ritirata. Le nuove distribuzioni non saranno più consentite tramite l'API Service Fabric Mesh. Il supporto per le distribuzioni esistenti continuerà fino al 28 aprile 2021.
Per informazioni dettagliate, vedere Ritiro di Azure Service Fabric Mesh Preview.
Questa è la prima di una serie di esercitazioni. Si apprenderà come usare Visual Studio per creare un'app Azure Service Fabric Mesh che include un front-end Web ASP.NET e un servizio back-end API Web ASP.NET Core. Verrà quindi eseguito il debug dell'app nel cluster di sviluppo locale. Pubblicare l'app in Azure, apportare le modifiche di configurazione e di codice e aggiornare l'app. Infine, sarà possibile pulire le risorse di Azure inutilizzate in modo che non sia addebitato ciò che non si usa.
Una volta terminato, sarà stata eseguita la maggior parte delle fasi di gestione del ciclo di vita dell'app e sarà stata compilata un'app che mostra una chiamata da servizio a servizio in un'app Service Fabric Mesh.
Se non si vuole creare manualmente l'applicazione da eseguire, è possibile scaricare il codice sorgente per l'applicazione completata e passare al debug dell'app in locale.
Nella prima parte della serie si apprenderà come:
- Usare Visual Studio per creare un'app Service Fabric Mesh costituita da un front-end Web ASP.NET.
- Creare un modello per rappresentare gli elementi attività.
- Creare un servizio back-end e recuperare i dati da tale servizio.
- Aggiungere un controller e DataContext come parte del modello Model View Controller per il servizio back-end.
- Creare una pagina Web per visualizzare gli elementi attività.
- Creare le variabili di ambiente che identificano il servizio back-end
In questa serie di esercitazioni si apprenderà come:
- Creare un'app Service Fabric Mesh in Visual Studio
- Eseguire il debug di un'app Service Fabric Mesh in esecuzione nel cluster di sviluppo locale
- Distribuire un'app Service Fabric Mesh
- Aggiornare un'app Service Fabric Mesh
- Pulire le risorse di Service Fabric Mesh
Mesh Service Fabric è attualmente in anteprima. Le anteprime vengono rese disponibili per l'utente a condizione che si accettino le condizioni d'uso aggiuntive. Alcuni aspetti di questa funzionalità potrebbero subire modifiche prima della disponibilità a livello generale.
Prerequisiti
Prima di iniziare questa esercitazione:
Se non si ha una sottoscrizione di Azure, è possibile creare un account gratuito prima di iniziare.
Assicurarsi di configurare l'ambiente di sviluppo, installando tra l'altro il runtime di Service Fabric, l'SDK, Docker e Visual Studio 2017.
Creare un progetto Service Fabric Mesh in Visual Studio
Eseguire Visual Studio e selezionare File>Nuovo>Progetto.
Nella finestra di dialogo Nuovo progetto digitare mesh nella casella di ricerca visualizzata nella parte superiore. Selezionare il modello Service Fabric Mesh Application (Applicazione Service Fabric Mesh). Se non viene visualizzato il modello, verificare di avere installato Service Fabric Mesh SDK e la versione di anteprima degli strumenti di Visual Studio, come descritto in Configurare l'ambiente di sviluppo.
Nella casella Nome digitare todolistapp e nella casella Percorso impostare il percorso della cartella in cui archiviare i file per il progetto.
Assicurarsi che l'opzione Crea directory per soluzione sia selezionata e fare clic su OK per creare il progetto Service Fabric Mesh.
Verrà visualizzata la finestra di dialogo Nuovo servizio Service Fabric.
Creare il servizio front-end Web
Nella finestra di dialogo Nuovo servizio Service Fabric selezionare il tipo di progetto ASP.NET Core e assicurarsi che Container OS (Sistema operativo contenitore) sia impostato su Windows.
Impostare Nome del servizio su WebFrontEnd. Fare clic su OK per creare il servizio ASP.NET Core.
Verrà visualizzata la finestra di dialogo Applicazione Web ASP.NET Core. Selezionare Applicazione Web e quindi fare clic su OK.
È ora disponibile un'applicazione Service Fabric Mesh. Creare quindi il modello per le informazioni delle attività.
Creare il modello degli elementi attività
Per semplicità, gli elementi attività vengono archiviati in un elenco in memoria. Creare una libreria di classi per gli elementi attività e un elenco che funge da contenitore degli elementi. In Visual Studio, in cui è attualmente caricata la soluzione todolistapp, selezionare File>Aggiungi>Nuovo progetto.
Nella finestra di dialogo Aggiungi nuovo progetto digitare C# .net core class nella casella di ricerca visualizzata nella parte superiore. Selezionare il modello Libreria di classi (.NET Core) .
Nella casella Nome digitare Model. Fare clic su OK per creare la libreria di classi.
In Esplora soluzioni in Model fare clic con il pulsante destro del mouse su Class1.cs e scegliere Rinomina. Rinominare la classe ToDoItem.cs. Quando viene visualizzato un prompt che chiede se rinominare tutti i riferimenti, fare clic su Sì.
Sostituire il contenuto della classe class ToDoItem vuota con:
public class ToDoItem
{
public string Description { get; set; }
public int Index { get; set; }
public bool Completed { get; set; }
public ToDoItem(string description)
{
Description = description;
Index = 0;
}
public static ToDoItem Load(string description, int index, bool completed)
{
ToDoItem newItem = new ToDoItem(description)
{
Index = index,
Completed = completed
};
return newItem;
}
}
Questa classe rappresenta gli elementi attività.
In Visual Studio fare clic con il pulsante destro del mouse sulla libreria di classi Model e selezionare Aggiungi>Classe per creare un elenco che conterrà gli elementi attività. Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento. Impostare Nome su ToDoList.cs e fare clic su Aggiungi.
In ToDoList.cs sostituire la classe class ToDoList vuota con:
public class ToDoList
{
private List<ToDoItem> _items;
public string Name { get; set; }
public IEnumerable<ToDoItem> Items { get => _items; }
public ToDoList(string name)
{
Name = name;
_items = new List<ToDoItem>();
}
public ToDoItem Add(string description)
{
var item = new ToDoItem(description);
_items.Add(item);
item.Index = _items.IndexOf(item);
return item;
}
public void Add(ToDoItem item)
{
_items.Add(item);
item.Index = _items.Count - 1;
}
public ToDoItem RemoveAt(int index)
{
if (index >= 0 && index < _items.Count)
{
var result = _items[index];
_items.RemoveAt(index);
// Reorder items
for (int i = index; i < _items.Count; i++)
{
_items[i].Index = i;
}
return result;
}
else
{
throw new IndexOutOfRangeException();
}
}
}
Creare quindi il servizio Service Fabric che terrà traccia degli elementi attività.
Creare il servizio back-end
Nella finestra Esplora soluzioni di Visual Studio fare clic con il pulsante destro del mouse su todolistapp e scegliere Aggiungi>Nuovo servizio Service Fabric.
Viene visualizzata la finestra di dialogo Nuovo servizio Service Fabric. Selezionare il tipo di progetto ASP.NET Core e assicurarsi che Container OS (Sistema operativo contenitore) sia impostato su Windows. Impostare Nome del servizio su ToDoService. Fare clic su OK per creare il servizio ASP.NET Core.
Verrà visualizzata la finestra di dialogo Nuova applicazione Web ASP.NET Core. Nella finestra di dialogo selezionare API e quindi fare clic su OK. Alla soluzione viene aggiunto un progetto per il servizio.
Dal momento che il servizio back-end non include alcuna interfaccia utente, disattivare l'avvio del browser all'avvio del servizio. In Esplora soluzioni fare clic con il pulsante destro del mouse su ToDoService e quindi scegliere Proprietà. Nella finestra proprietà che viene visualizzata selezionare la scheda Debug a sinistra e deselezionare Avvia browser. Premere CTRL+S per salvare la modifica.
Dal momento che il servizio gestisce le informazioni sulle attività, aggiungere un riferimento alla libreria di classi Model. In Esplora soluzioni fare clic con il pulsante destro del mouse su ToDoService e quindi scegliere Aggiungi>Riferimento. Verrà visualizzata la finestra di dialogo Gestione riferimenti.
In Gestione riferimenti selezionare la casella di controllo per Model e fare clic su OK.
Aggiungere un contesto dei dati
Creare un contesto dei dati che coordina l'elaborazione dei dati dal modello di dati.
Per aggiungere la classe del contesto dei dati, in Esplora soluzioni fare clic con il pulsante destro del mouse su ToDoService e quindi scegliere Aggiungi>Classe.
Nella finestra di dialogo visualizzata Aggiungi nuovo elemento assicurarsi che l'elemento Classe sia selezionato, impostare Nome su DataContext.cs e fare clic su Aggiungi.
In DataContext.cs sostituire il contenuto della classe class DataContext vuota con:
public static class DataContext
{
public static Model.ToDoList ToDoList { get; } = new Model.ToDoList("Azure learning List");
static DataContext()
{
// Seed to-do list
ToDoList.Add(Model.ToDoItem.Load("Learn about microservices", 0, true));
ToDoList.Add(Model.ToDoItem.Load("Learn about Service Fabric", 1, true));
ToDoList.Add(Model.ToDoItem.Load("Learn about Service Fabric Mesh", 2, false));
}
}
Questo contesto dei dati minimo consente di popolare alcuni elementi di attività di esempio e di accedervi.
Aggiunta di un controller
Durante la creazione del progetto ToDoService il modello ha fornito un controller predefinito che gestisce le richieste HTTP e crea la risposta HTTP. In Esplora soluzioni aprire la cartella Controllers in ToDoService per visualizzare il file ValuesController.cs.
Fare clic con il pulsante destro del mouse su ValuesController.cs e quindi scegliere Rinomina. Rinominare il file in ToDoController.cs. Se viene visualizzato un prompt che chiede se rinominare tutti i riferimenti, fare clic su Sì.
Aprire il file ToDoController.cs e sostituire il contenuto di class ToDoController con:
[Route("api/[controller]")]
public class ToDoController : Controller
{
// GET api/todo
[HttpGet]
public IEnumerable<Model.ToDoItem> Get()
{
return DataContext.ToDoList.Items;
}
// GET api/todo/5
[HttpGet("{index}")]
public Model.ToDoItem Get(int index)
{
return DataContext.ToDoList.Items.ElementAt(index);
}
//// POST api/values
//[HttpPost]
//public void Post([FromBody]string value)
//{
//}
//// PUT api/values/5
//[HttpPut("{id}")]
//public void Put(int id, [FromBody]string value)
//{
//}
// DELETE api/values/5
[HttpDelete("{index}")]
public void Delete(int index)
{
}
}
In questa esercitazione non vengono implementate operazioni di aggiunta, eliminazione e così via, allo scopo di focalizzare l'attenzione sulla comunicazione con un altro servizio.
Creare la pagina Web che visualizza gli elementi attività
Dopo aver implementato il servizio back-end, è necessario scrivere il codice del sito Web in cui verranno visualizzati gli elementi attività forniti. I passaggi seguenti vengono eseguiti nel progetto WebFrontEnd.
La pagina Web in cui sono visualizzati gli elementi attività richiede l'accesso all'elenco e alla classe ToDoItem. In Esplora soluzioni aggiungere un riferimento al progetto Model facendo clic con il pulsante destro del mouse su WebFrontEnd e scegliendo Aggiungi>Riferimento. Verrà visualizzata la finestra di dialogo Gestione riferimenti.
In Gestione riferimenti selezionare la casella di controllo per Model e fare clic su OK.
In Esplora soluzioni aprire la pagina Index.cshtml passando a WebFrontEnd>Pages>Index.cshtml. Aprire Index.cshtml.
Sostituire il contenuto dell'intero file con il codice HTML seguente che definisce una semplice tabella per visualizzare gli elementi attività:
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div>
<table class="table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Done?</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Items)
{
<tr>
<td>@item.Description</td>
<td>@item.Completed</td>
</tr>
}
</tbody>
</table>
</div>
Fare clic sull'icona dell'elenco a discesa del file Index.cshtml in Esplora soluzioni e quindi aprire Index.cshtml.cs.
All'inizio di Index.cshtml.cs aggiungere using System.Net.Http;.
Sostituire il contenuto di public class IndexModel con:
public class IndexModel : PageModel
{
public Model.ToDoItem[] Items = new Model.ToDoItem[] { };
public void OnGet()
{
HttpClient client = new HttpClient();
using (HttpResponseMessage response = client.GetAsync(backendUrl).GetAwaiter().GetResult())
{
if (response.StatusCode == System.Net.HttpStatusCode.OK)
{
Items = Newtonsoft.Json.JsonConvert.DeserializeObject<Model.ToDoItem[]>(response.Content.ReadAsStringAsync().Result);
}
}
}
private static string backendDNSName = $"{Environment.GetEnvironmentVariable("ToDoServiceName")}";
private static Uri backendUrl = new Uri($"http://{backendDNSName}:{Environment.GetEnvironmentVariable("ApiHostPort")}/api/todo");
}
Creare variabili di ambiente
L'URL del servizio back-end è necessario per comunicare con tale servizio. Ai fini di questa esercitazione, l'estratto di codice seguente (definito in precedenza come parte di IndexModel) legge le variabili di ambiente per comporre l'URL:
private static string backendDNSName = $"{Environment.GetEnvironmentVariable("ToDoServiceName")}";
private static Uri backendUrl = new Uri($"http://{backendDNSName}:{Environment.GetEnvironmentVariable("ApiHostPort")}/api/todo");
L'URL è costituito dal nome del servizio e dalla porta. Tutte queste informazioni sono disponibili nel file service.yaml incluso nel progetto ToDoService.
Importante
Nella procedura seguente verranno modificati i file YAML. Per impostare i rientri per le variabili nel file service.yaml, usare spazi e non tabulazioni. In caso contrario, il file non verrà compilato. È possibile che Visual Studio inserisca tabulazioni durante la creazione delle variabili di ambiente. Sostituire tutte le tabulazioni con spazi. Anche se vengono visualizzati errori nell'output di debug della compilazione, l'app verrà avviata comunque, ma non funzionerà finché non si convertono le tabulazioni in spazi e si ripete la compilazione. Per assicurarsi che nessuna scheda si trovi nel file service.yaml, è possibile rendere visibili gli spazi vuoti nell'editor di Visual Studio con Modifica>spazio vuoto visualizzazioneavanzata>. Si noti che i file service.yaml vengono elaborati usando le impostazioni locali in inglese. Se è necessario usare un separatore decimale, usare un punto anziché una virgola, ad esempio.
In Esplora soluzioni passare al progetto ToDoService e aprire Risorse del servizio>service.yaml.
Il nome del servizio ToDoService si trova in services:. Vedere (1) nella figura precedente.
- La porta
80si trova inendpoints:. Vedere (2) nella figura precedente. Il numero di porta del progetto in uso sarà probabilmente diverso.
A questo punto occorre definire le variabili di ambiente che rappresentano il nome del servizio e il numero di porta nel progetto WebFrontEnd, per consentire al progetto di chiamare il servizio back-end.
In Esplora soluzioni passare a WebFrontEnd>Service Resources>service.yaml per definire le variabili che specificano l'indirizzo del servizio back-end.
Nel file service.yaml aggiungere le variabili seguenti in environmentVariables:, eliminando prima il carattere # per rimuovere il commento da environmentVariables:. La spaziatura è importante, pertanto assicurarsi di allineare le variabili aggiunte alle altre variabili in environmentVariables:. È molto importante che il valore di ApiHostPort corrisponda al valore della porta di ToDoServiceListener visto in precedenza nel file service.yaml di ToDoService.
- name: ApiHostPort
value:
- name: ToDoServiceName
value: ToDoService
Suggerimento
È possibile specificare il valore di ToDoServiceName in due modi:
- Solo il nome del servizio, che verrà risolto sia in uno scenario di debug in Windows 10 sia durante la distribuzione del servizio in Azure Service Fabric Mesh.
- Il nome completo nel formato nomeservizio.nomeapp. Questa modalità funziona solo con il debug in Windows 10. Per la risoluzione del servizio è opportuno usare solo il nome del servizio.
Il file service.yaml del progetto WebFrontEnd in uso è simile a questo anche se il valore ApiHostPort è probabilmente diverso:
Ora è possibile compilare e distribuire l'immagine dell'applicazione Service Fabric Mesh, insieme al servizio Web back-end, nel cluster locale.
Passaggi successivi
In questa parte dell'esercitazione si è appreso come:
- Creare un'applicazione Service Fabric Mesh costituita da un front-end Web ASP.NET.
- Creare un modello per rappresentare gli elementi attività.
- Creare un servizio back-end e recuperare i dati da tale servizio.
- Aggiungere un controller e DataContext come parte del modello Model View Controller per il servizio back-end.
- Creare una pagina Web per visualizzare gli elementi attività.
- Creare le variabili di ambiente che identificano il servizio back-end
Passare all'esercitazione successiva: