1.8K Views
January 22, 22
スライド概要
「.NET 6 ASP.NET Core Web API、React、Elastic APM でシンプルなアプリを構築してみよう」
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁 ソリューションアーキテクト
鈴木 章太郎
ASP.NET Core 6 Web API を、今回は React フロントエンドと組み合わせ、超シンプルな CRUD アプリケーションを構築します。EF6 で Azure SQL Database を Code First で構築し、Web API は Azure App Services に、React アプリは AzureStatic Web App に、それぞれ公開し、APM で監視します。
ヴイエムウェア株式会社 ソリューションアーキテクト本部 プリンシパルエンタープライズアーキテクト。 Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic で開発者向け技術啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等を中心に、技術者向けに最新技術の啓発活動を実施中。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニット ソリューションアーキテクトを兼務。
.NET 6 ASP.NET Core Web API、 React、Elastic APM でシンプルなアプリを 構築してみよう 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 省庁業務グループ ソリューションアーキテクト
Shotaro Suzuki Twitter : @shosuz Elastic Technical Product Marketing Manager/Evangelist デジタル庁 省庁業務グループ ソリューションアーキテクト 元 Microsoft Technical Evangelist
l l l アジェンダ l l l l l l API プロジェクトの作成 Entity Framework Core コード作成と最初の Database ⽣成 API エンドポイント⽣成 React プロジェクトの作成 Azure App Service にサーバを公開 Azure Static Web App + GitHub Actions に React を公開 CORS ポリシーの修正 Elastic APM によるアプリケーションの監視 まとめ
今回は Visual Studio 2022 for Mac Preview で デモアプリを作成 加えて、 Azure Data Explorer、 GitHub Desktop for mac、 Visual Studio Code https://visualstudio.microsoft.com/ja/vs/mac/preview/
今回のデモアプリのイメージ iOS / Android Mobile App Azure Static Web Apps Azure App Service React Web App ASP.NET 6 Web API Azure SQL Database React Native Elastic APM Agent CRUD 全⽂検索クエリ Elastic APM Agent Elastic APM Endpoint に送信 React Web App Elastic Cloud 検索・更新 UI Visual Studio 2022 for Mac https://f79...c67.japaneast .azure.elasticcloud.com:9243/ Azure Data Explorer 東⽇本リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Azure サブスクリプション
API プロジェクトの作成
.NET 6 Minimal APIs for Cloud Native Apps
Lightweight, single-file, cloud native APIs
var app = WebApplication.Create(args);
app.MapGet("/", () => "Hello World!");
app.Run();
Low ceremony, top-level C# programs
Easy to get started
Path to MVC
Minimal code for minimal apps
• C#のトップレベルプログラムをベースに最⼩限のコードで ASP.NET Web API を構築する軽量な⽅法
• 従来のコントローラースタイルの Web API のようなコードなしにクラウドスケール API を簡単に構築可能
• プロジェクトが⼤きくなり始めたら、これらを ASP.NET MVC コントローラに移⾏することも可能
• パイプライン処理や単純な CRUD のような複雑さを必要としない API を迅速に構築するための選択肢
ASP.NET Core Web API
ASP.NET Core Web API Minimal API を使うので、真ん中のチェックは外す)
ASP.NET Core Web API プロジェクト名は、aspnetserver (ソリューション名は任意)にする
ASP.NET Core Web API この状態でデバッグ実⾏
ASP.NET Core Web API この状態でデバッグ実⾏
不要なコードを削除 – Program.cs (Startup.cs は廃⽌) • WeatherForecast 関連のソースコードを全て除去し保存 var builder = WebApplication.CreateBuilder(args); // Add services to the container. // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle builder.Services.AddEndpointsApiExplorer(); builder.Services.AddSwaggerGen(); var app = builder.Build(); // Configure the HTTP request pipeline. if (app.Environment.IsDevelopment()) { app.UseSwagger(); app.UseSwaggerUI(); } app.UseHttpsRedirection(); app.Run();
Entity Framework Core コード作成と 最初の Database ⽣成
Data フォルダーの作成と Sealed Class 作成 Post クラスを Sealed で作成し継承できないようにする
Post Class • attribute として System.ComponentModel.DataAnnotations を追加し、クラスを作成する using System.ComponentModel.DataAnnotations; namespace aspnetserver.Data { internal sealed class Post { [Key] public int PostId { get; set; } [Required] [MaxLength(100)] public string Title { get; set; } = string.Empty; [Required] [MaxLength(100000)] public string Content { get; set; } = string.Empty; } }
NuGet Package 追加 • NuGet Package Manager 起動 • EntityFrameworkCore • EntityFrameworkCore.Design • EntityFrameworkCore.SQLServer を追加 • Entity Framework Core CLI ツールインストール dotnet tool install --global dotnet-ef
AppDbContext 作成
• Azure SQL Database 上に AppDB を⽣成しつつ Seed を作成
using Microsoft.EntityFrameworkCore;
namespace aspnetserver.Data
{
internal sealed class AppDBContext : DbContext
{
public DbSet<Post> Posts {get; set;}
protected override void OnConfiguring(DbContextOptionsBuilder dbContextOptionsBuilder)
=> dbContextOptionsBuilder.UseSqlServer("Server=tcp:spaappdev.database.windows.net,1433;
Initial Catalog=AppDb;Persist Security Info=False;UserID=shotaro;Password=(password)#;
MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;");
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
Post[] postsToSeed = new Post[6];
for (int i = 1; i <= 6; i++)
{
postsToSeed[i - 1] = new Post
{
PostId = i,
Title = $"Post {i}",
Content = $"これは投稿{i}で、⾮常に興味深い内容です。私はまた、YouTube ビデオを鑑賞するのが好きで、購読している."
};
}
modelBuilder.Entity<Post>().HasData(postsToSeed);
}
}
}
dotnet ef migrations add dotnet ef migrations add 1stMigration -o "Data/Migrations"
Entity Framework による DB 作成とサンプルデータ確認
using Microsoft.EntityFrameworkCore.Migrations;
#nullable disable
namespace aspnetserver.Data.Migrations
{
public partial class _1stMigration : Migration
{
protected override void Up(MigrationBuilder migrationBuilder)
{
migrationBuilder.CreateTable(
name: "Posts",
columns: table => new
{
PostId = table.Column<int>(type: "int", nullable: false).Annotation("SqlServer:Identity", "1,
Title = table.Column<string>(type: "nvarchar(100)", maxLength: 100, nullable: false),
Content = table.Column<string>(type: "nvarchar(max)", maxLength: 100000, nullable: false)
},
constraints: table =>
{
table.PrimaryKey("PK_Posts", x => x.PostId);
});
migrationBuilder.InsertData(
table: "Posts",
columns: new[] { "PostId", "Content", "Title" },
values: new object[,]
{
{ 1, "これは投稿 1 で、⾮常に興味深い内容です。私はまた、YouTube ビデオを鑑賞するのが好きで、購読している.", "Post
{ 2, "これは投稿 2 で、⾮常に興味深い内容です。私はまた、YouTube ビデオを鑑賞するのが好きで、購読している.", "Post
{ 3, "これは投稿 3 で、⾮常に興味深い内容です。私はまた、YouTube ビデオを鑑賞するのが好きで、購読している.", "Post
{ 4, "これは投稿 4 で、⾮常に興味深い内容です。私はまた、YouTube ビデオを鑑賞するのが好きで、購読している.", "Post
{ 5, "これは投稿 5 で、⾮常に興味深い内容です。私はまた、YouTube ビデオを鑑賞するのが好きで、購読している.", "Post
{ 6, "これは投稿 6 で、⾮常に興味深い内容です。私はまた、YouTube ビデオを鑑賞するのが好きで、購読している.", "Post
});
}
protected override void Down(MigrationBuilder migrationBuilder)
{
migrationBuilder.DropTable(
name: "Posts");
}
}
}
1"),
1"
2"
3"
4"
5"
6"
},
},
},
},
},
}
dotnet ef database update dotnet ef database update Azure Data Studio
DB操作のためのレポジトリ (PostsRepositry.cs) 作成 using Microsoft.EntityFrameworkCore; namespace aspnetserver.Data { internal static class PostsRepository { internal async static Task<List<Post>> GetPostsAsync() { using (var db = new AppDBContext()) { return await db.Posts.ToListAsync(); } } internal async static Task<bool> UpdatePostAsync(Post postToUpdate) { using (var db = new AppDBContext()) { try { db.Posts.Update(postToUpdate); return await db.SaveChangesAsync() >= 1; } catch (Exception e) { return false; } internal async static Task<Post> GetPostByIdAsync(int postId) { using (var db = new AppDBContext()) { return await db.Posts .FirstOrDefaultAsync(post => post.PostId == postId); } } internal async static Task<bool> CreatePostAsync(Post postToCreate) { using (var db = new AppDBContext()) { try { await db.Posts.AddAsync(postToCreate); } } internal async static Task<bool> DeletePostAsync(int postId) { using (var db = new AppDBContext()) { try { Post postToDelete = await GetPostByIdAsync(postId); db.Remove(postToDelete); return await db.SaveChangesAsync() >= 1; } catch (Exception e) { return false; } return await db.SaveChangesAsync() >= 1; } catch (Exception e) { return false; } } } } } } }
API エンドポイント⽣成
Program.cs 修正 – MapGet 追加(全て) • using aspnetserver.Data を追加し、クラスを作成する using aspnetserver.Data; --app.MapGet("/get-all-posts", async () => await PostsRepository.GetPostsAsync()) .WithTags("Posts Endpoints"); app.Run();
Program.cs 修正 – Swagger 修正
• SwaggerDoc を作成する
using aspnetserver.Data;
--builder.Services.AddSwaggerGen(swaggerGenOptions =>
{
swaggerGenOptions.SwaggerDoc("v1", new OpenApiInfo
{ Title = "ASP.NET Core 6 Web API React Sample", Version = "v1" });
});
• Swagger UI を開発環境以外でも 表⽰するように書き換える
app.UseSwagger();
app.UseSwaggerUI(swaggerUIOptions =>
{
swaggerUIOptions.DocumentTitle = "ASP.NET Core 6 Web API React Sample";
swaggerUIOptions.SwaggerEndpoint("/swagger/v1/swagger.json",
"超シンプルな Post モデルを提供する Web API.");
swaggerUIOptions.RoutePrefix = string.Empty;
});
• launchSettings.json の "launchUrl": "swagger" ⾏をコメントアウトする
理由︓HTTP Local Host のみ(起動 URL なし)でアプリが起動し、次にポート番号なしで Swagger が起動するため
Program.cs 修正 – MapGet(postId) 追加
• MapGet(postId)、MapPost、MapPut、MapDelete
app.MapGet("/get-post-by-id/{postId}", async (int postId) =>
{
Post postToReturn = await PostsRepository.GetPostByIdAsync(postId);
if (postToReturn != null)
{
return Results.Ok(postToReturn);
}
else
{
return Results.BadRequest();
}
}).WithTags("Posts Endpoints");
Program.cs 修正 – MapPost 追加
• MapGet(postId)、MapPost、MapPut、MapDelete
app.MapPost("/create-post", async (Post postToCreate) =>
{
bool createSuccessful = await PostsRepository.CreatePostAsync(postToCreate);
if (createSuccessful)
{
return Results.Ok("作成しました︕");
}
else
{
return Results.BadRequest();
}
}).WithTags("Posts Endpoints");
Program.cs 修正 – MapPut 追加
• MapGet(postId)、MapPost、MapPut、MapDelete
app.MapPut("/update-post", async (Post postToUpdate) =>
{
bool updateSuccessful = await PostsRepository.UpdatePostAsync(postToUpdate);
if (updateSuccessful)
{
return Results.Ok("更新しました︕");
}
else
{
return Results.BadRequest();
}
}).WithTags("Posts Endpoints");
Program.cs 修正 – MapDelete 追加
• MapGet(postId)、MapPost、MapPut、MapDelete
app.MapDelete("/delete-post-by-id/{postId}", async (int postId) =>
{
bool deleteSuccessful = await PostsRepository.DeletePostAsync(postId);
if (deleteSuccessful)
{
return Results.Ok("削除しました︕");
}
else
{
return Results.BadRequest();
}
}).WithTags("Posts Endpoints");
実⾏結果確認 • MapGet(postId)、MapPost、MapPut、MapDelete が表⽰され、試せる
React プロジェクトの作成
React シングルページアプリケーションの作成 • Terminal でルートフォルダに移動 • コマンドでフォルダと React プロジェクトを⽣成する npx create-react-app reactclient cd reactclient npm start • React ディレクトリに移動し git 関連を削除(全体で作成するため)し、VSCode を起動 sudo rm -r.git code ./
Visual Studio Code の起動と設定 • Terminal を開き下記のコマンドを打つ npm install --save -cross-env • 実⾏ (port 3000) npm start
Visual Studio Code の拡張機能追加とファイルの整理
• 拡張機能を追加(任意)
•
•
•
•
Bracket Pair Colorizer 2 v0.2.2
Prettier
VS Code ES7
React/Redux/React-Native/JS
snippets
Material Icon Theme
• 不要なファイルの削除
•
•
•
•
•
•
setupTests.js
reportWebVitals.js
logo.svg
index.css
App.Test.js
App.css
• Index.js の編集
•
制限モード削除
ReactDOM.render(<App />,document.getElementById('root'));
•
reportWebVitals();、import reportWebVitals from ʻ./reportWebVitalsʻ;、import './index.css'; 削除
CORS ポリシーの追加
• Server – Program.cs
builder.Services.AddCors(options =>
{
options.AddPolicy("CORSPolicy",
builder =>
{
builder
.AllowAnyMethod()
.AllowAnyHeader()
.WithOrigins("http://localhost:3000",
"https://appname.azurestaticapps.net/");
});
});
React アプリで実装する内容と実⾏結果 • Bootstrap の追加 • 投稿をテーブルで表⽰ • サーバープロジェクト側の CORS ポリシー追加 • テーブルにデータを表⽰ • API エンドポイント付き定数 ファイル • データ新規追加フォーム コンポーネントの作成 • データ更新フォーム コンポーネントの作成 • データの削除
Azure App Service にサーバを公開
Visual Studio 2022 for mac で Azure に公開 • Wizard を使⽤してホスティングプランは F1- Free に変更しながら deploy https://aspnet6webapireactsample.azurewebsites.net/index.html
Azure Static Web App + GitHub Actions で React を公開
Azure Static Web Apps • 静的サイトに最適化されたホスティング環境 • CI/CD を GitHub Actions と統合 • Azure Functions によるサーバーレス API の統合 Microsoft Azure www
Azure Static Web Apps の機能 Web API + リッチな Web UI を実現する機能を提供 • • • • • • GitHub 統合 統合 API サポート Web アプリケーションの構築 静的サイトの発⾏ Web アプリケーションのデプロイ 認証プロバイダーの統合 • Azure Active Directory、Facebook、 Google、GitHub、 Twitter
JavaScript / C# による静的 Web サイトの開発・ホスト https://... + JS https://... + Blazor
Azure Static Web App と GitHub Actions ワークフロー • Azure Static Web Apps では、必要なすべての Azure リソースのプロビジョニングが ⾃動的に実施 • アプリをホストする前、変更を⾏う際、アプリをビルドするためのリポジトリへのコミットま たは pull request によって⾏う必要あり • Azure Static Web Apps の主な機能としてアプリケーションをビルドして発⾏するため の GitHub Actions ワークフローを設定できる • Azure Static Web Apps リソースを作成すると、GitHub Actions ワークフローが 作成される • ワークフローはすぐにトリガーされ、アプリのビルドと発⾏が⾏われる • リポジトリ内の監視対象ブランチに変更を加えるたびに、ワークフローがトリガーされる
Azure Static Web Apps 2つの⾃動化された側⾯ 1.アプリを構成する基になる Azure リソースのプロビジョニング 2.アプリケーションをビルドして発⾏する GitHub Actions ワークフロー • Azure Static Web Apps で Web にアプリを発⾏すると、 Web アプリとスケーラブルな API のホストが⾼速になる • GitHub Actions によって提供される統合ビルドおよびデプロイ ワークフローが得られる
Static Web Apps インスタンスを GitHub に接続 • Static Web Apps インスタンスを作成する には、GitHub にサインインし、アプリのコード が含まれているリポジトリを指定 • アプリを⾃動的にビルドしてデプロイできるよう に、リポジトリ内に3つのフォルダーパスを指定 • アプリのビルド出⼒はアプリケーションのビルド 出⼒ディレクトリへの相対パス • 例︓ビルドされた資産を my-app/dist フォル ダーに出⼒するアプリが my-app にある場合、 この場所には dist を指定 • ビルドの詳細画⾯でビルドのプリセットを選択 • React を選択すると⾃動的に • アプリの場所 • アプリのビルド出⼒の場所 • API の場所 の3つに値が⼊⼒される 今回は / 直下ではなくて /reactclient にしないと動かない ので注意︕
GitHub Actions を使⽤してソースコードから静的資産へ • GitHub リポジトリにはソース コードが格納され、発⾏する 前にビルドする必要あり • Static Web Apps インスタンスを作成すると、⾃動的にリ ポジトリに GitHub Actions ワークフローが作成される • このワークフローによって、追跡するように選択したブランチに 対して変更内容をプッシュしたり、pull request を作成し たりするたびに、アプリがビルドされる。これにより、ソースコー ドが静的資産に変換され、Azure によって提供される • ビルドが完了すると、アクションによって資産がデプロイされる • その GitHub アクションはリポジトリ の .github/workflows フォルダーに追加される • 必要に応じて、このファイルを確認または変更できる • リソースの作成時に⼊⼒した設定は、GitHub アクションの ファイルに保存される
Azure Functions と統合された API • API が必要な場合 • Azure Functions プロジェクトとしてリポジトリ 内に実装できる • API は⾃動的にデプロイされ、Static Web Apps インスタンスによってホストされる • GitHub Actions ワークフローによって、指定 したフォルダーの名前でリポジトリ内の API が 検索される • 通常、API アプリは api または functions と いう名前のフォルダーに配置されるところ、好きな 名前を付けることができる • 指定したフォルダー内に API が検出され ない場合 • API は発⾏されず、アプリのみ発⾏される 例︓ https://docs.microsoft.com/ja-jp/learn/modules/publish-static-web-app-api-preview-url/3-build-api
GitHub Actions を使⽤してソースコードから静的資産へ • GitHub リポジトリの [Actions](アクション) ページに移動し、ビルドおよびデプロイアクションの 状態を確認できる • • • • Visual Studio Code エディターで 例︓my-first-static-web-app を右クリックし[ポータルで開く] [Azure Static Web Apps CI/CD] を選択 ci: add Azure Static Web Apps workflow file のようなタイトルのついた最上位のコミットを選択 左にある [Build and Deploy Job]リンクを選択。ここから、ビルド時にアプリの進⾏状況を確認できる
Web サイトを表⽰する • GitHub アクションによって Web アプリのビルドと発⾏が完了すると実⾏中のアプリを参照して 確認できる • Azure portal の [URL] リンクを選択して、ブラウザーでアプリにアクセス
CORS ポリシーの修正
CORS ポリシーの修正
• Server – Program.cs
builder.Services.AddCors(options =>
{
options.AddPolicy("CORSPolicy",
builder =>
Azure Static Web Apps に
{
デプロイ後に決まるので最初は
builder
~appname.azurestaticapps.
.AllowAnyMethod()
net ~ 等にしておく︕
.AllowAnyHeader()
.WithOrigins("http://localhost:3000",
"https://pine-tree-04bf7ae98.2.azurestaticapps.net/");
});
});
• Client – Constants.js
const API_BASE_URL_DEVELOPMENT = 'https://localhost:7293';
const API_BASE_URL_PRODUCTION = 'https://net6webapireactsample.azurewebsites.net/';
Elastic APM によるアプリケーションの監視
今回のデモアプリのイメージ iOS / Android Mobile App Azure Static Web Apps Azure App Service React Web App ASP.NET 6 Web API Azure SQL Database React Native Elastic APM Agent CRUD 全⽂検索クエリ Elastic APM Agent Elastic APM Endpoint に送信 React Web App Elastic Cloud 検索・更新 UI Visual Studio 2022 for Mac https://f79...c67.japaneast .azure.elasticcloud.com:9243/ Azure Data Explorer 東⽇本リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Azure サブスクリプション
Elastic Cloud に CORS を設定 • elasticsearch.yml # Note that the syntax for user settings can change between major versions. # You might need to update these user settings before performing a major version upgrade. # # Slack integration for versions 7.0 and later must use the secure key store method. # For more information, see: # https://www.elastic.co/guide/en/elasticsearch/reference/current/actionsslack.html#configuring-slack (中略) # from: Watcher http.cors.enabled: true http.cors.allow-credentials: true http.cors.allow-origin: "*" http.cors.allow-headers: X-Requested-With, X-Auth-Token, Content-Type, Content-Length, Authorization, Access-Control-Allow-Headers, Accept # # HipChat and PagerDuty integration are also supported. To learn more, see the documentation.
APM Real User Monitoring JavaScript Agent Reference • 概要 • • https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/index.html React Integration • https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/reactintegration.html#react-integration npm install @elastic/apm-rum-react –save import { ApmRoute } from '@elastic/apm-rum-react’ import { withTransaction } from '@elastic/apm-rum-react'
Elastic Cloud → Kibana で APM モニタリング https://cloud.elastic.co/home
まとめ
まとめ l l l l l l l l API プロジェクトの作成 Entity Framework Core コード作成と最初の Database ⽣成 API エンドポイント⽣成 React プロジェクトの作成 Azure App Service にサーバを公開 Azure Static Web App + GitHub Actions に React を公開 CORS ポリシーの修正 Elastic APM によるアプリケーションの監視
リソース • チュートリアル: ASP.NET Core で Minimal Web API を作成する https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/min-web-api?view=aspnetcore-6.0&tabs=visual-studio • Entity Framework Core ツールのリファレンス - .NET Core CLI https://docs.microsoft.com/ja-jp/ef/core/cli/dotnet • Create React App: https://reactjs.org/docs/create-a-new-react-app.html • ASP.NET Core で React プロジェクト テンプレートを使⽤する https://docs.microsoft.com/ja-jp/aspnet/core/client-side/spa/react?view=aspnetcore-6.0&tabs=visual-studio • Install Bootstrap to React: https://create-react-app.dev/docs/adding-bootstrap/ • GitHub Actions のワークフロー構⽂ https://docs.github.com/ja/actions/using-workflows/workflow-syntax-for-github-actions
Elastic リソース • 公式ドキュメント • APM https://www.elastic.co/guide/index.html https://www.elastic.co/jp/apm/ • クラウドネイティブ アプリでの Elasticsearch • Configuration on .NET Core https://docs.microsoft.com/ja-jp/dotnet/architecture/cloudnative/elastic-search-in-azure https://www.elastic.co/guide/en/apm/agent/dotnet/current/co nfiguration-on-asp-net-core.html • Azure での検索データ ストアの選択 • ASP.NET Core Quick Start https://docs.microsoft.com/ja-jp/azure/architecture/dataguide/technology-choices/search-options • Elastic APM Agent https://www.elastic.co/guide/en/apm/agent/index.html https://www.elastic.co/guide/en/apm/agent/dotnet/current/set up-asp-net-core.html
Elastic Community Conference on Feb. 11-12, 2022 https://sessionize.com/elastic-community-conference/ Japan Track が公開予定︕ (⽇本からスピーカー4社5名が 登壇予定)
Elastic Meetup https://www.meetup.com/ja-JP/Tokyo-Elastic-Fantastics/events/283113192/
Developers Summit 2022 https://event.shoeisha.jp/devsumi/20220217/session/3724/ デジタルカスタマーエクスペリエンスの向上 - Enterprise Search と Observability Web サイトやモバイルアプリをスムースに運営し、購⼊からカスタマーサポートまで顧客との繋がりを⼤切にするには、検索機能や可観測性の強化が、カスタマーエクスペリエンス向上のための 秘策です。Elastic はオープンでフリーな超⾼速検索エンジンとデータの出⼊⼒インターフェースから構成され、あらゆるパブリッククラウドにデプロイできる、業界をリードする検索・分析プラット フォームです。Elastic により企業や個⼈は魅⼒的な顧客 Web サイト体験やモバイルアプリ体験を提供できます。このセッションでは、Elastic による実装をサンプルアプリのデモを交えなが らご紹介していきます。
Thank you for your attention!