Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Hirono Baba

January 21, 2023
Tweet

Other Decks in Programming

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