Azure Functionsをサクッと開発、サクッとデプロイ/vscodeconf2023-baba

Azure Functionsの存在を知ってから、個人で小さなアプリを開発をするときはもっぱらAzure FunctionsとAzure Static Web Appsでミニマムに始めることが多くなりました。Dev Containersで開発環境を用意し、GitHub Actionsでデプロイまで完了。サクッと環境を整えてコードを書く時間に回しましょう。

Transcript

1. Azure Functionsを サクッと開発、サクッとデプロイ 2023/1/21 VS Code Conference Japan 2022 - 2023 馬場ひろの Hirono Baba
2. スピーカーについて ◼ 馬場ひろの ◼ (株)オルターブース所属 ◼ ex歯医者さん ◼ 福岡から来ました ◼ 認定スクラムマスター ◼ Azureや .NETがんばってます @nina-sensei
3. アジェンダ ◼ 今日話すこと ◼ Azure Functionsについて ◼ Azure FunctionsのDev Containers ◼ Azure Static Web AppsのDev Containers ◼ 対象者 ◼ ビギナー向け ◼ これからクラウド勉強する方 ◼ ローカルでAzure Functions動かしている方
4. Azure FunctionsとAzure Static Web Apps ◼ 業務で使うこともありプライベートでもAzureを使うように ◼ 推しはAzure FunctionsとAzure Static Web Apps ◼ MVCのフレームワークをよく使っていた → 個人開発とかいろいろ試す時はAzure Functionsほぼ一択に …
5. Azure Functionsが推しです ◼ 名前の通り、関数ひとつからデプロイできる ◼ 0円から始めることができる ◼ トリガーについて ◼ Http, Que, Time, EventGrid ◼ バインド機能がはかどる ◼ DBやストレージなど、他のサービスと簡単につなげる Azure Static Web Appsと合わせて使うと簡単にバックエンド付きのアプリに！
6. Dockerがあれば使えるDev Containers ◼ Azure FunctionsをDev Containersで動かすに至った理由 ◼ 少し前に作ったコード：`func start` で起動できない…！ ◼ 原因 → .NETのバージョン違った ◼ 同じタイミングでNode.jsでAzure Functions作る機会があった ◼ バージョン管理等めんどくさい！ということでDev Containersで環境構築！ × /codespaces GitHub Codespaces 無料枠：60時間/月 https://github.com/features/codespaces
7. Dev ContainersでAzure Functions ◼ コマンドパレット→Add Dev Container Configuration Files Show All Definitions… →Azure Functionsと入力 ◼ C# ◼ JavaScript ◼ Java ◼ PowerShell ◼ Python ◼ TypeScript ◼ F#
8. devcontainer.jsonの中身 ◼ 左下の><マーク → Reopen in Container でDev Containersが立ち上がる > < root/ ├── .devcontainer │ ├── devcontainer.json │ └── Docekerfile
9. Dev Containersで立ち上がった環境 ◼ .NET6.0とAzure Functions Core Toolsが使える環境ができあがり 初回のみ環境が立ち上がるまで 時間がかかる可能性あり！
10. GitHub Actionsでデプロイしよう ◼ プロジェクトができた時点でデプロイする→あとから楽 root/ ├── .github │ └── workflow │ └── XXX.yml CI/CD含めた環境構築は たったこれだけ 30分かからず終わる！
11. Azure Static Web Appsについて ◼ 静的アプリをデプロイできる ├── .github │ └── workflows │ └── XXX.yml │ ├── api │ ├── message │ │ ├── function.json │ │ └── index.js │ ├── host.json │ ├── local.settings.json │ └── package.json │ └── app └── index.html API Azure Static Web Apps AzureFunctions AzureFunctions Free Standard ◼ Key Vault ◼ Durable Functions ◼ マネージドID ◼ HTTP以外のトリガー など
12. Azure Static Web AppsのDev Containers起動 ◼ Static Web Apps CLIが使えるNode.jsのFunctionsが立ち上がる /api/message の API を 呼び出すサンプルアプリ
13. Azure Static Web AppsもGitHub Actionsで ◼ Azure Static Web Appsはリソース作成時にCI/CDを構築できる GitHubやAzure DevOpsから デプロイ可能
14. まとめ ◼ Dev Containersいいぞ ◼ サクッと環境構築 ◼ コードを書く時間を確保できる ◼ AzureとGitHubでかんたん自動化 ◼ サクッとCI/CD組める ◼ あとからデプロイで悩まない
15. 参考 ◼ Dev Containers https://code.visualstudio.com/docs/devcontainers/containers ◼ Azure Functions でのトリガーとバインドの概念 https://learn.microsoft.com/ja-jp/azure/azure-functions/functions- triggers-bindings?tabs=csharp ◼ Azure でコマンド ラインから C# 関数を作成する https://learn.microsoft.com/ja-JP/azure/azure-functions/create-first- function-cli-csharp?tabs=azure-cli%2Cin-process ◼ Azure Functions による Azure Static Web Apps での API のサポート https://learn.microsoft.com/ja-jp/azure/static-web-apps/apis-functions