3. l API プロジェクトの作成
l Entity Framework Core コード作成と最初の Database ⽣成
l API エンドポイント⽣成
l React プロジェクトの作成
l Azure App Service にサーバを公開
l Azure Static Web App + GitHub Actions に React を公開
l CORS ポリシーの修正
l Elastic APM によるアプリケーションの監視
l まとめ
アジェンダ
4. 今回は
Visual Studio 2022 for Mac Preview で
デモアプリを作成
https://visualstudio.microsoft.com/ja/vs/mac/preview/
加えて、
Azure Data Explorer、
GitHub Desktop for mac、
Visual Studio Code
5. 今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東⽇本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
全⽂検索クエリ
CRUD
検索・更新 UI
Azure サブスクリプション
Visual
Studio
2022 for
Mac
Azure
App Service
Elastic APM
Endpoint に送信
Azure Data Explorer
ASP.NET 6 Web API
Elastic APM Agent
iOS / Android
Mobile App
React
Native
Elastic
APM
Agent
React Web App
Azure
Static Web Apps
React Web App
7. Lightweight, single-file, cloud native APIs
Low ceremony, top-level C# programs
Easy to get started
Path to MVC
.NET 6 Minimal APIs for Cloud Native Apps
var app = WebApplication.Create(args);
app.MapGet("/", () => "Hello World!");
app.Run();
Minimal code for minimal apps
• C#のトップレベルプログラムをベースに最⼩限のコードで ASP.NET Web API を構築する軽量な⽅法
• 従来のコントローラースタイルの Web API のようなコードなしにクラウドスケール API を簡単に構築可能
• プロジェクトが⼤きくなり始めたら、これらを ASP.NET MVC コントローラに移⾏することも可能
• パイプライン処理や単純な CRUD のような複雑さを必要としない API を迅速に構築するための選択肢
16. 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;
}
}
40. • 静的サイトに最適化されたホスティング環境
• CI/CD を GitHub Actions と統合
• Azure Functions によるサーバーレス API の統合
Microsoft Azure
www
Azure Static Web Apps
41. • GitHub 統合
• 統合 API サポート
• Web アプリケーションの構築
• 静的サイトの発⾏
• Web アプリケーションのデプロイ
• 認証プロバイダーの統合
• Azure Active Directory、Facebook、
Google、GitHub、 Twitter
Azure Static Web Apps の機能
Web API + リッチな Web UI を実現する機能を提供
53. 今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東⽇本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
全⽂検索クエリ
CRUD
検索・更新 UI
Azure サブスクリプション
Visual
Studio
2022 for
Mac
Azure
App Service
Elastic APM
Endpoint に送信
Azure Data Explorer
ASP.NET 6 Web API
Elastic APM Agent
iOS / Android
Mobile App
React
Native
Elastic
APM
Agent
React Web App
Azure
Static Web Apps
React Web App
54. Elastic Cloud に CORS を設定
# 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/actions-
slack.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.
• elasticsearch.yml
55. 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/react-
integration.html#react-integration
npm install @elastic/apm-rum-react –save
import { ApmRoute } from '@elastic/apm-rum-react’
import { withTransaction } from '@elastic/apm-rum-react'
58. まとめ
l API プロジェクトの作成
l Entity Framework Core コード作成と最初の Database ⽣成
l API エンドポイント⽣成
l React プロジェクトの作成
l Azure App Service にサーバを公開
l Azure Static Web App + GitHub Actions に React を公開
l CORS ポリシーの修正
l Elastic APM によるアプリケーションの監視
59. リソース
• チュートリアル: 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