Vue.js + Azure Functions + Azure AD でサーバーレスWebアプリを作る

プログラミング生放送勉強会第53回＠GMOインターネット（大阪）のセッション資料です。
Azure Functionsを中心にサーバーレスについて説明します。

Transcript

1. Vue.js + Azure Functions + Azure AD で サーバーレスWebアプリを作る プログラミング生放送勉強会 第53回＠GMOインターネット（大阪） 2018/9/1 青柳臣一
2. 自己紹介（1）  株式会社ディーバ  http://divakk.co.jp/  大阪市中央区（淀屋橋）  代表取締役 青柳臣一 aoyagi@divakk.co.jp  C#好き  マイクロソフトMVPの受賞経験あり  日本初のMS MVP 6名のうちの1人（2002年）、当時は唯一の.NET系MVP  2002,2003 .NET / 2004～2007 C# / 2008 ASP.NET(Silverlight)  書籍  WindowsPhoneビジネスアプリケーション開発ガイド（2015年12月 秀和システム）  Xamarinネイティブによるモバイルアプリ開発 C#によるAndroid/iOS UI制御の基礎Xamarinで作るAndroid／iOSアプリ（2017年9月 翔泳社）
3. 自己紹介（2）  株式会社ディーバ  オリジナルソフト開発  給排水設備CAD / 給水監視システム  C# WPF  受託開発  C#  ASP.NET MVC/WebAPI / ASP.NET Core / WPF / UWP / Xamarin.iOS,Android  （依頼があればVB、Java、PHP、Ruby、Node.jsなどなど）  フレックスタイム制（コアタイムなし） / 客先常駐なし / 服装自由 / 在宅 勤務OK https://bit.ly/2wu25LL
4. サーバーレス（1）  Webサーバーがない ファンクションが動くサーバーはある  AWS Lambda Google Cloud Functions Azure Functions  最近はサーバーレスデータベースなんてのも  AWS Aurora Serverless / Google Cloud Datastore / Azure Cosmos DB
5. サーバーレス（2）  メリット  管理はクラウドベンダー任せ  リソースを無駄にしない 必要なときに必要な分だけ動く  デメリット  管理はクラウドベンダー任せ  コストパフォーマンスは？  起動が遅い？
6. フロントエンド  ぶっちゃけお好みで  Vue.js React Angular  Vue.js  Visual Studio 2017 15.8 + Node.js開発 https://docs.microsoft.com/ja-jp/visualstudio/javascript/create-application-with-vuejs
7. Azure Functions  サポートされている言語  C# / JavaScript  F#（1.x） / Java（2.x Preview）  1.xはPython、PHP、TypeScript（いずれも試験段階）  プラットフォーム  1.xはWindows  2.xはクロスプラットフォーム（Windows / Linux / MacOS）  ランタイムは.NET Core  従量課金プランとApp Serviceプラン
8. アップロードファイルを受け取るファンクション（1）  Vue.js npmでaxiosを入れる コードはこんな感じ→ <input type="file" name="file" @change="onFileChange"> <button type="button" @click="onUploadClick">アップロード</button> data: { filename: null }, methods: { onFileChange: function (e) { this.filename = e.target.files[0]; }, onUploadClick: function () { let formData = new FormData(); formData.append("file", this.filename); axios .post("http://localhost:7071/api/FileUploadFunction", formData) .then(function (response) { }) .catch(function (error) { }); } }
9. アップロードファイルを受け取るファンクション（2）  FileUploadFunction.cs マルチパートのファイルを受け取るのは以下のような感じ  CORS  local.settings.json [FunctionName("FileUploadFunction")] public static async Task<IActionResult> Run( [HttpTrigger(AuthorizationLevel.Anonymous, "post")]HttpRequestMessage req, ILogger log) { // マルチパートの最初のパートを読み込む var provider = new MultipartMemoryStreamProvider(); await req.Content.ReadAsMultipartAsync(provider); var file = provider.Contents.First(); var fileInfo = file.Headers.ContentDisposition; var fileData = await file.ReadAsByteArrayAsync(); return (ActionResult)new OkObjectResult(“OK”); } "Host": { "CORS": "*" }
10. Azure Functionsの開発  Azureポータルで  ブラウザーで一通りのことができる  Visual Studioで  ローカルで実行できる（Azure Functions Core Tools）  Visual Studio for Macで  ローカルで実行できる  Visual Studio Codeで  Windows / macOS / Linux  その他
11. トリガー  ファンクションが呼ばれるきっかけ  HTTP  Timer  GitHub WebHook  Cosmos DB  BLOBストレージ  Queue  EventHub
12. バインド  外部の事象（入力と出力）とコードの結合を指定する  function.json C#の属性 { "bindings": [ { "authLevel": "anonymous", "name": "req", "type": "httpTrigger", "direction": "in", "methods": [ "get", "post" ] }, { "name": "$return", "type": "http", "direction": "out" } ], "disabled": false } public static class Function1 { [FunctionName("Function1")] public static IActionResult Run( [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")]HttpRequest req, ILogger log) { ... } }
13. Azureストレージ（1）  要するにハードディスクのこと  BLOB シンプルなファイルシステム 一番よく使う（安い）  ファイル Windowsのファイルシステムみたいなもの  テーブル 表形式
14. Azureストレージ（2）  Azureストレージエミュレーター  ローカルでAzureストレージを使う  （たぶん） Azure Functions Core Toolsに入ってる  Azureストレージエクスプローラー  https://azure.microsoft.com/ja-jp/features/storage-explorer/  Windows / macOS / Linux  （いつの間にかElectron製になってた）
15. Azureストレージ（3）  Azureストレージへの接続  接続文字列方式  Azure … アプリケーション設定  ローカル … local.settings.json  注意: 接続文字列が入っているアプリケーション設定の名称を設定す る（接続文字列を直接書くのではない）  デフォルトではAzureWebJobsStorage
16. BLOBトリガーでサムネイル作成（1）  BLOBトリガー  指定されたBLOBストーリーコンテナーにファイルが追加/変更された ら呼ばれる  NuGetにあるCoreCompat.System.Drawing.v2  .NET Standard 2.0 / .NET Coreで使えるSystem.Drawing  （System.Drawing.Commonは未サポートの例外が出る）  あとは普通に作るだけ
17. BLOBトリガーでサムネイル作成（2） FunctionName("ThumbnailFunction")] public static async void Run([BlobTrigger("samples-workitems/{name}", Connection = "")]Stream myBlob, string name, ILogger log) { var srcImage = Image.FromStream(myBlob); var dstImage = new Bitmap(200, 200); using (var g = Graphics.FromImage(dstImage)) { g.DrawImage(srcImage, new Rectangle(0, 0, 200, 200), 0, 0, srcImage.Width, srcImage.Height, GraphicsUnit.Pixel, new ImageAttributes()); } byte[] bytes; using (var mem = new MemoryStream()) { dstImage.Save(mem, ImageFormat.Jpeg); mem.Seek(0, SeekOrigin.Begin); bytes = mem.ToArray(); } // BLOBストレージに書き込む var storageAccount = CloudStorageAccount.Parse(Configuration["AzureWebJobsStorage"]); var client = storageAccount.CreateCloudBlobClient(); var container = client.GetContainerReference("thumbnail"); var blob = container.GetBlockBlobReference(name); await blob.UploadFromByteArrayAsync(bytes, 0, bytes.Length); } }
18. 認証を追加する  Azureポータルで認証を設定するだけ  Azure ActiveDirectory（Azure AD） Twitter / Facebook / Googleなど  けど、SPAからどうやるの？  がんばる（まだよくわかってない）  https://docs.microsoft.com/ja-jp/azure/active-directory/develop/active-directory-authentication-libraries
19. ご清聴ありがとうございました。