31. • 静的サイトに最適化されたホスティング環境
• CI/CD を GitHub Actions と統合
• Azure Functions によるサーバーレス API の統合
Microsoft Azure
www
Azure Static Web Apps
32. • GitHub 統合
• 統合 API サポート
• Web アプリケーションの構築
• 静的サイトの発⾏
• Web アプリケーションのデプロイ
• 認証プロバイダーの統合
• Azure Active Directory、Facebook、
Google、GitHub、 Twitter
Azure Static Web Apps の機能
Web API + リッチな Web UI を実現する機能を提供
43. 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
44. 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]リンクを選択。ここから、ビルド時にアプリの進⾏状況を確認できる
45. Web サイトを表⽰する
• GitHub アクションによって Web アプリのビルドと発⾏が完了すると実⾏中のアプリを参照して
確認できる
• Azure portal の [URL] リンクを選択して、ブラウザーでアプリにアクセス
46. 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
49. リソース
公式ドキュメント
https://www.elastic.co/guide/index.html
Elastic APM Agent
https://www.elastic.co/guide/en/apm/agent/index.html
Reactivesearch
https://opensource.appbase.io/reactivesearch/
優れた React 検索エクスペリエンスを迅速に構築する⽅法
https://www.elastic.co/jp/blog/how-to-build-great-react-search-experiences-quickly
Search UI Elastic GitHub レポジトリ
https://github.com/elastic/search-ui
A Walk in the Park with Elastic App Search Sample Engines
https://www.elastic.co/jp/blog/a-walk-in-the-park-with-elastic-app-search-sample-engines
サンプルソリューション GitHub レポジトリ
https://github.com/michaelhyatt/k8s-o11y-workshop
関連ブログ
https://www.elastic.co/jp/blog/kubernetes-observability-tutorial-k8s-cluster-setup-demo-app-deployment
https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-log-monitoring-and-analysis-elastic-stack
https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-metrics-collection-and-analysis
https://www.elastic.co/blog/kubernetes-observability-tutorial-k8s-monitoring-application-performance-with-elastic-apm
50. リソース︓Microsoft Lean
• Azure Static Web Apps を使⽤して
Blazor WebAssembly ア
プ
リ
と.NET
API を 公開する
• Azure Static Web Apps を使⽤し
て
Angular、
React、
Svelte、
ま
た
は
Vue の JavaScript ア
プ
リを発⾏する
• Azure Static Web Apps にAPI を発⾏する
• Gatsby とAzure Static Web Apps で静的 Web ア
プ
リを作成して
発⾏する
51. Elastic on Microsoft Azure:
インテグレーション強化による価値の創出
https://www.elastic.co/jp/webinars/elastic-on-microsoft-azure-accelerate-time-to-value-with-enhanced-integration
52. ElasticON Solution Series Japan (7⽉毎週)
https://www.elastic.co/elasticon/solution-series/asia-pacific-jp