More Related Content What's hot (19)
JavaScript/CSS 2015 Autumn JavaScript/CSS 2015 Autumn
Koji Ishimoto ?
まるでドッグ?イヤーのごとく変化するフロントエンド開発に疲れていませんか?本セッションでは、BabelやPostCSSの導入の仕方や使い方を解説することによって、次世代の標準仕様であるEcmaScript 6やCSS 3を先取りし、長く使える技術を身につけます。流れの速さに惑わされないようにしましょう。
Koji Ishimoto @IWATE HTML5 COMMUNITY #3 on October 14
https://www.facebook.com/events/674956182641567/
Similar to Azure で Serverless 初心者向けタッチ&トライ (20)
20190514 Smart Store - Azure servlerless architecture 20190514 Smart Store - Azure servlerless architecture
Issei Hiraoka ?
Microsoft Smart Store エンジニアプログラム (https://ms-smartstore.connpass.com) の一環で、Azure Functions の特徴を理解し、サーバーレス アプリを開発できるようになることを目的としたトレーニングコースを実施しました。
# 対象者
- Microsoft Azure が提供する サーバーレス サービス (Azure Functions) を利用してSmart Store ソリューションを構築される方
# 注意
- 本コースの内容は、「mstep Microsoft Azure サーバーレス アプリ開発」の内容を元にしています。
- Azure サービスは、日々進化しています。本テキストは 2019 年 5 月時点で確認した内容を記載しています。
- 最新情報は、サービスの更新情報 (https://azure.microsoft.com/ja-jp/updates) を確認してください。
Smart Store サーバーレスアーキテクチャ編 Smart Store サーバーレスアーキテクチャ編
Microsoft Azure Japan ?
Smart Storeのアーキテクチャーで活用するサーバーレスアーキテクチャの概要について
レベル ?Level 300 アドバンスド 目標 ?Azure Functions の特徴を理解し、サーバーレス アプリを開発できるようになること 前提知識 ?Microsoft Azure に関する基礎知識をお持ちの方 対象者 ?Microsoft Azure が提供する サーバーレス サービス (Azure Functions) を利用して Smart Store ソリューションを構築される方 注意 ?本コースの内容は、「mstepMicrosoft Azure サーバーレス アプリ開発」の内容を元にしています。 ?Azure サービスは、日々進化しています。本テキストは 2019 年 5 月時点で確認した内容を記載しています。 ?最新情報は、サービスの更新情報(https://azure.microsoft.com/ja-jp/updates) を確認してください
日本マイクロソフト株式会社
Cloud Solution Architect
平岡一成
[AC11] サーバー管理よ、サヨウナラ。サーバーレスアーキテクチャの意義と実践 [AC11] サーバー管理よ、サヨウナラ。サーバーレスアーキテクチャの意義と実践
de:code 2017 ?
サーバーレス アーキテクチャの 5 つの適用パターンを紹介し、Azure を使ったそれぞれの実装方法やデモをお見せします。設計パターンから、その実装方法までウォーク スルーすることで、サーバーレスを効果的に使うポイントを理解し、今すぐ自分でも試してみることができるようになります。
久森 達郎
日本マイクロソフト株式会社
デベロッパー エバンジェリズム統括本部
エバンジェリスト
吉田 真吾
株式会社セクションナイン
代表取締役社長
Azure で Serverless 初心者向けタッチ&トライ
5. Durable Functions
? Azure Functions extension
? Enables long-running, stateful serverless operations
? Write complex function orchestrations in a single function
? Built on the open-source Durable Task Framework
? Only pay when your code is running
? Orchestrator replays itself to re-establish state every run
9. 流れ
1. Visual Studio Code にAzure Functions 拡張機能をインストール
2. Azure Functions プロジェクトを作成
3. Durable Functions npm パッケージをインストール
4. starter 関数を作成
5. オーケストレーター関数を作成する
6. アクティビティ関数を作成する
7. Azure へのサインイン
8. Azure にプロジェクトを発行
9. Azure で関数をテスト
10. 1. Azure Functions 拡張機能をインストール
? Visual Studio Code で [拡張機能] を開き、azure functions を検索するか、Visual
Studio Code でこのリンクを開きます。
? [インストール] を選択して、Visual Studio Code に拡張機能をインストールします。
11. ? Visual Studio Code を再起動し、アクティビティ バーの Azure アイコンを選択しま
す。 サイド バーに Azure Functions 領域が表示されます。
1. Azure Functions 拡張機能をインストール
12. ? Visual Studio Code で、Azure ロゴを選択して [Azure:Functions] 領域を表示し、[新し
いプロジェクトの作成] アイコンを選択します。
? プロジェクト ワークスペースの場所としてデスクトップの「 demo 」のフォルダを選択
し、[選択] をクリックします。
2. Azure Functions プロジェクトを作成
14. ? 「Open in current window」を選択します。
2. Azure Functions プロジェクトを作成
15. 3. Durable Functions npm パッケージをインストール
? VS Codeでターミナルを開き、ワークスペース用のフォルダ「demo」で「npm install
durable-functions」 を実行して、durable-functions npm パッケージをインストール
します。
※npmがインストールされていない場合は、事前にnpmをPCにインストールします
16. 4. starter 関数を作成
? [Azure:Functions] で [関数の作成] アイコンを選択します。
? 関数アプリ プロジェクトが含まれたフォルダーを選択し、[HTTP trigger] 関数テンプレート
を選択します。
? 関数名として「HttpStart」と入力して Enter キーを押し、[Anonymous] 認証を選択します。
17. 4. starter 関数を作成
? index.js を以下の JavaScript に置き換えます。
const df = require("durable-functions");
module.exports = async function (context, req) {
const client = df.getClient(context);
const instanceId = await client.startNew(req.params.functionName, undefined, req.body);
context.log(`Started orchestration with ID = '${instanceId}'.`);
return client.createCheckStatusResponse(context.bindingData.req, instanceId);
};
18. 4. starter 関数を作成
? function.json を以下の JavaScript に置き換えます。
{
"bindings": [
{
"authLevel": "anonymous",
"name": "req",
"type": "httpTrigger",
"direction": "in",
"route": "orchestrators/{functionName}",
"methods": ["get", "post"]
},
{
"name": "starter",
"type": "orchestrationClient",
"direction": "in"
}
]
}
19. Orchestration Client
(HttpStart)
Orchestrator
(OrchestratorFunction)
Activity Function
(E1_SayHello)
{
"bindings": [
{
"authLevel": "anonymous",
"name": "req",
"type": "httpTrigger",
"direction": "in",
"route": "orchestrators/{functionName}",
"methods": ["get", "post"]
},
{
"name": "starter",
"type": "orchestrationClient",
"direction": ”in"
}
]
}
const df = require("durable-functions");
module.exports = async function (context, req) {
const client = df.getClient(context);
const instanceId = await client.startNew(req.params.functionName,
undefined, req.body);
context.log(`Started orchestration with ID = '${instanceId}'.`);
return client.createCheckStatusResponse(context.bindingData.req,
instanceId);
};
index.js
function.json
20. 5. オーケストレーター関数を作成
? 前の手順を繰り返し、HTTP Trigger Templateを使用して 2 つ目の関数を作成しま
す。 今回は関数に 「 OrchestratorFunction」 と名前を付けます。
? index.js を以下の JavaScript に置き換えます。
const df = require("durable-functions");
module.exports = df.orchestrator(function*(context){
context.log("Starting chain sample");
const output = [];
output.push(yield context.df.callActivity("E1_SayHello", "Tokyo"));
output.push(yield context.df.callActivity("E1_SayHello", "Seattle"));
output.push(yield context.df.callActivity("E1_SayHello", "London"));
return output;
});
22. Orchestration Client
(HttpStart)
Orchestrator
(OrchestratorFunction)
Activity Function
(E1_SayHello)
{
"bindings": [
{
"authLevel": "anonymous",
"name": "req",
"type": "httpTrigger",
"direction": "in",
"route": "orchestrators/{functionName}",
"methods": ["get", "post"]
},
{
"name": "starter",
"type": "orchestrationClient",
"direction": ”in"
}
]
}
const df = require("durable-functions");
module.exports = async function (context, req) {
const client = df.getClient(context);
const instanceId = await client.startNew(req.params.functionName,
undefined, req.body);
context.log(`Started orchestration with ID = '${instanceId}'.`);
return client.createCheckStatusResponse(context.bindingData.req,
instanceId);
};
const df = require("durable-functions");
module.exports = df.orchestrator(function*(context){
context.log("Starting chain sample");
const output = [];
output.push(yield context.df.callActivity("E1_SayHello", "Tokyo"));
output.push(yield context.df.callActivity("E1_SayHello", "Seattle"));
output.push(yield context.df.callActivity("E1_SayHello", "London"));
return output;
});
{
"bindings": [
{
"name": "context",
"type": "orchestrationTrigger",
"direction": "in"
}
]
}
index.js
function.json
23. 6. アクティビティ関数を作成
? 前の手順を繰り返し、HTTP Trigger Templateを使用して 2 つ目の関数を作成しま
す。 今回は関数に 「 E1_SayHello 」 と名前を付けます。
? index.js を以下の JavaScript に置き換えます。
module.exports = async function(context) {
return `Hello ${context.bindings.name}!`;
};
25. Orchestration Client
(HttpStart)
Orchestrator
(OrchestratorFunction)
Activity Function
(E1_SayHello)
{
"bindings": [
{
"authLevel": "anonymous",
"name": "req",
"type": "httpTrigger",
"direction": "in",
"route": "orchestrators/{functionName}",
"methods": ["get", "post"]
},
{
"name": "starter",
"type": "orchestrationClient",
"direction": ”in"
}
]
}
const df = require("durable-functions");
module.exports = async function (context, req) {
const client = df.getClient(context);
const instanceId = await client.startNew(req.params.functionName,
undefined, req.body);
context.log(`Started orchestration with ID = '${instanceId}'.`);
return client.createCheckStatusResponse(context.bindingData.req,
instanceId);
};
const df = require("durable-functions");
module.exports = df.orchestrator(function*(context){
context.log("Starting chain sample");
const output = [];
output.push(yield context.df.callActivity("E1_SayHello", "Tokyo"));
output.push(yield context.df.callActivity("E1_SayHello", "Seattle"));
output.push(yield context.df.callActivity("E1_SayHello", "London"));
return output;
});
{
"bindings": [
{
"name": "context",
"type": "orchestrationTrigger",
"direction": "in"
}
]
}
module.exports = async function(context) {
return `Hello ${context.bindings.name}!`;
};
{
"bindings": [
{
"name": "name",
"type": "activityTrigger",
"direction": "in"
}
]
}
index.js
function.json
26. 7. Azure へのサインイン
? [Azure: Functions] 領域で、[Sign in to Azure...](Azure にサインインする...) を選択し
ます。
※Azure アカウントがない場合は無償アカウントを作成して下さい
https://azure.microsoft.com/ja-jp/free/
28. 8. Azure にプロジェクトを発行
? [サブスクリプションを選択] してから、 [+ Create New Function App in Azure](+
Azure で新しい Function App を作成) を選択します。
30. 9. Azure で関数をテスト
? ブラウザでオーケストラーの情報を確認します。
https://<function名>.azurewebsites.net/api/orchestrators/OrchestratorFunction
出力結果例:
{
"id": "a42bfdf91f9a49da9c9558e2ef5c7a65",
"statusQueryGetUri": "https://decode-
horike.azurewebsites.net/runtime/webhooks/durabletask/instances/a42bfdf91f9a49da9c9558e2ef5c7a65?taskHub
=DurableFunctionsHub&connection=Storage&code=BId08/uK/2jAhDKF3bNjgNPzJGdGfcalR3dlm6PJyate/aG/rtHZ
VA==",
"sendEventPostUri": "https://decode-
horike.azurewebsites.net/runtime/webhooks/durabletask/instances/a42bfdf91f9a49da9c9558e2ef5c7a65/raiseEve
nt/{eventName}?taskHub=DurableFunctionsHub&connection=Storage&code=BId08/uK/2jAhDKF3bNjgNPzJGdGfc
alR3dlm6PJyate/aG/rtHZVA==",
????
31. 9. Azure で関数をテスト
? 前ページのstatusQueryGetUri をブラウザのURLにコピペし、オーケストラーの状態を
確認します。
出力結果例:
{
"instanceId": "6fa01dd927a245229cff60e9596d01ee",
"runtimeStatus": "Completed",
"input": null,
"customStatus": null,
"output": [
"Hello Tokyo!",
"Hello Seattle!",
"Hello London!"
],
"createdTime": "2019-05-28T14:10:02Z",
"lastUpdatedTime": "2019-05-28T14:10:02Z"
}
32. Orchestration Client
(HttpStart)
Orchestrator
(OrchestratorFunction)
Activity Function
(E1_SayHello)
{
"bindings": [
{
"authLevel": "anonymous",
"name": "req",
"type": "httpTrigger",
"direction": "in",
"route": "orchestrators/{functionName}",
"methods": ["get", "post"]
},
{
"name": "starter",
"type": "orchestrationClient",
"direction": ”in"
}
]
}
const df = require("durable-functions");
module.exports = async function (context, req) {
const client = df.getClient(context);
const instanceId = await client.startNew(req.params.functionName,
undefined, req.body);
context.log(`Started orchestration with ID = '${instanceId}'.`);
return client.createCheckStatusResponse(context.bindingData.req,
instanceId);
};
const df = require("durable-functions");
module.exports = df.orchestrator(function*(context){
context.log("Starting chain sample");
const output = [];
output.push(yield context.df.callActivity("E1_SayHello", "Tokyo"));
output.push(yield context.df.callActivity("E1_SayHello", "Seattle"));
output.push(yield context.df.callActivity("E1_SayHello", "London"));
return output;
});
{
"bindings": [
{
"name": "context",
"type": "orchestrationTrigger",
"direction": "in"
}
]
}
module.exports = async function(context) {
return `Hello ${context.bindings.name}!`;
};
{
"bindings": [
{
"name": "name",
"type": "activityTrigger",
"direction": "in"
}
]
}
index.js
function.json
36. Functions Appの前処理
? Durable Functions ExtensionをPortalからInstallします。
? 「Durable Functions HTTP starter」をクリックし「Install」を作成します。
? Installが終わり次第「Cancel」します。
38. Functionsがサポートするバインディング
Type 1.x 2.x1 トリガー 入力 Output
Blob Storage ? ? ? ? ?
Cosmos DB ? ? ? ? ?
Event Grid ? ? ?
Event Hubs ? ? ? ?
HTTP と Webhooks ? ? ? ?
Microsoft Graph Excel テーブル ? ? ?
Microsoft Graph OneDrive ファイル ? ? ?
Microsoft Graph Outlook メール ? ?
Microsoft Graph Events ? ? ? ?
Microsoft Graph Auth トークン ? ?
Mobile Apps ? ? ?
Notification Hubs ? ?
Queue Storage ? ? ? ?
SendGrid ? ? ?
Service Bus ? ? ? ?
SignalR ? ? ?
Table Storage ? ? ? ?
Timer ? ? ?
Twilio ? ? ?
https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-triggers-bindings#supported-bindings