$30 off During Our Annual Pro Sale. View Details »

GitHub Actions と Azure PaaS でプルリクエストごとに環境を ~ Azure Static Web Apps と Container Apps

GitHub Actions と Azure PaaS でプルリクエストごとに環境を ~ Azure Static Web Apps と Container Apps

「エキスパートが語る!開発を加速するGitHub x Azure 最新開発ベストプラクティス Vol.2 GitHub Actions編」でお話した資料です。
https://info.microsoft.com/ja-devops-catalog-fy23-01jan-13-expert-speaks-github-x-azure-latest-development-best-practices-for-accelerating-development-vol-2-github-srdem132702_catalog-display-page.html

Kazumi IWANAGA

March 22, 2023
Tweet

More Decks by Kazumi IWANAGA

Other Decks in Technology

Transcript

  1. GitHub Actions と Azure
    PaaS でプルリクエストごとに
    環境を ~ Azure Static Web
    Apps と Container Apps
    開発を加速するGitHub x Azure 最新開発ベストプラクティス
    vol.2

    View Slide

  2. 岩永かづみ / Kazumi IWANAGA
    • Microsoft MVP for Azure
    • ZEN Architects 所属
    • GitHub公認トレーナー
    • 得意な領域
    • Infrastructure as Code
    • GitHub Actions による自動化
    • 技術コミュニティ
    • Code Polaris / Hack Everything.
    • @dz_
    • @dzeyelid
    • @dzeyelid

    View Slide

  3. CI/CD

    View Slide

  4. CI/CD すでに構築済みの方も多いですよね
    本番
    ステージング
    main
    staging

    View Slide

  5. ステージング環境のCI/CD

    View Slide

  6. ステージング環境はどうでしょう?
    本番
    ステージング
    main
    staging

    View Slide

  7. ステージング環境は十分?
    本番
    ステージング
    main
    featureA

    View Slide

  8. ステージング環境は十分?
    本番
    ステージング
    main
    featureA
    featureB

    View Slide

  9. ステージング環境は十分?
    本番
    ステージング
    main
    featureA
    featureB

    View Slide

  10. ステージング環境は十分?
    本番
    ステージング
    main
    featureA
    featureB
    他のプルリクエストの更新で上書きされたり、
    いつのプルリクエストの環境かわからなくなったり…

    View Slide

  11. プルリクエストごとの環境で
    より便利に✨

    View Slide

  12. プルリクエストごとに環境があったら便利!
    本番
    featureA
    main
    featureA
    featureB
    featureB

    View Slide

  13. CI/CD をプルリクエストにも活用しよう!

    View Slide

  14. GitHub Actions なら
    プルリクエストとの連携がシームレス

    View Slide

  15. GitHub Actions 基礎

    View Slide

  16. GitHub Actions 概要
    • GitHub と連動したワークフローを構築できる
    • 受け付けられるイベントが豊富
    • push, pull_request, release, workflow_dispatch(手動/API実行)…
    • 公開されている「アクション」を利用できる
    • Marketplace
    • パブリックリポジトリ(組織内リポジトリも可能)
    • アクションの自作もできる
    • JavaScript、またはDocker コンテナ

    View Slide

  17. GitHub Actions ワークフロー概要(1)
    • on:
    • 受け付けるイベントを指定する
    • jobs:
    • 後述の steps をまとめる単位
    • 個々にランナーが割り当てられる
    • 並列に実行、依存関係を指定した順次実行もできる
    • steps:
    • アクションを実行する、またはシェルコマンドを実行する

    View Slide

  18. GitHub Actions ワークフロー概要(2)

    View Slide

  19. GitHub Actions ワークフロー概要(3)
    • シークレットや変数を定義してワークフロー内で利用できる
    • 条件分岐ができる
    • ワークフローを再利用できる(ワークフローから呼び出せるワークフ
    ローを作成できる)
    • Environments for deployment でシークレットや変数を切り替え
    たり、人による許可を要求(ゲート)を設けることができる
    • 用途に応じたランナーを選択できる
    • GitHub ホステッド ランナー(Ubuntu, Windows Server, macOS)
    • セルフ ホステッド ランナー

    View Slide

  20. GitHub Actions のメリット
    • コードを置いてあるリポジトリへのアクセスなど、認証を統一できる
    • 無料枠が多め
    • 豊富なアクション
    • プルリクエストとの親和性の高さ◎

    View Slide

  21. 参考(1)
    • GitHub Actions を理解する - GitHub Docs
    • GitHub Actions の重要な機能 - GitHub Docs
    • 式 - GitHub Docs
    • コンテキスト - GitHub Docs
    • Variables - GitHub Docs
    • ワークフローをトリガーするイベント - GitHub Docs
    • Workflow syntax for GitHub Actions - GitHub Docs
    • GitHub Actions のワークフロー コマンド - GitHub Docs

    View Slide

  22. 参考(2)
    • Go でのビルドとテスト - GitHub Docs
    • Java
    • Ant / Gradle / Maven
    • .NETでのビルドとテスト - GitHub Docs
    • Node.js のビルドとテスト - GitHub Docs
    • Python のビルドとテスト - GitHub Docs
    • Rubyでのビルドとテスト - GitHub Docs
    • Swift のビルドとテスト - GitHub Docs
    • Xamarin アプリケーションのビルドとテスト - GitHub Docs

    View Slide

  23. 参考(3)
    • Azure へのデプロイ - GitHub Docs
    • OpenID Connect を使ったセキュリティ強化について - GitHub
    Docs
    • GitHub ホステッド ランナーの概要 - GitHub Docs
    • セルフホステッド ランナーの概要 - GitHub Docs
    • カスタム アクションについて - GitHub Docs
    • GitHub Actions Importer を使用した移行の自動化 - GitHub
    Docs

    View Slide

  24. Azure の公式アクション紹介

    View Slide

  25. GitHub Marketplace
    Actions & Verified Creator
    "azure" 検索🔍

    View Slide

  26. よく使うおすすめ Azure 関連アクション
    • Azure/login
    • Azure/cli
    • Azure/arm-deploy
    • Azure/functions-action
    • Azure/webapps-deploy
    • Azure/static-web-apps-deploy
    • Azure/container-apps-deploy-action
    • Azure/aca-review-apps
    (かづみ個人調べ)

    View Slide

  27. Azure/login アクション
    • Azure にアクセスするときは基本使う
    • az login が実行される
    • Az PowerShell モジュールに切替えも可能
    • 認証方法
    • サービス プリンシパル(Service principal)
    • OpenID Connect (OIDC) ← おすすめ💡
    ユーティリティ

    View Slide

  28. OpenID Connect による認証について
    • Azure では、ロールベースの制御(RBAC)としてサービス プリンシ
    パルなどを利用する認証が主流ですが、OpenID Connect を利用
    することでさらに安全に利用することができる
    • シークレットの扱いが不要になる(有効期間が短いアクセス トークンを都度発
    行、利用する)
    • 認証と認可の管理を明確に行える
    • 資格情報のローテーションが行われる(ジョブごと)

    View Slide

  29. Azure/cli アクション
    • GitHub ホステッド ランナーに Azure CLI はインストールされている
    • バージョン指定したいときや、セルフ ホステッド ランナーを利用すると
    きに便利
    ユーティリティ

    View Slide

  30. Azure/arm-deploy アクション
    • ARM template や Bicep でデプロイをするときに便利
    ユーティリティ

    View Slide

  31. Azure/functions-action アクション
    • Azure Functions へのデプロイを行う
    • コードを zip 圧縮して WEBSITE_RUN_FROM_PACKAGE でデ
    プロイしてくれる
    • zip 圧縮の手間が省けて使いやすい
    • スロット指定や、pom.xml の利用、Kudu pre-deployment の実行、
    oryx build の利用などができる
    デプロイ

    View Slide

  32. Azure/webapps-deploy アクション
    • Azure Web Apps へのデプロイを行う
    • Azure Web Apps
    • Azure Web Apps for Containers
    • スロット指定や、startup-command の実行ができる
    デプロイ

    View Slide

  33. Azure/static-web-apps-deploy
    • 完璧なインテグレーション!理想形!
    • Azure Static Web Apps へのアプリケーションのビルド、およびデ
    プロイを行う
    • 静的サイトのビルド
    • 内蔵 Functions のビルド
    • pull_request イベントの場合、自動的にプレビュー環境にデプロイし
    てくれる
    • Azure 側の仕組みが完全に連携されている
    ビルド デプロイ ステージング

    View Slide

  34. Azure/container-apps-deploy-action
    • Azure Container Apps へのイメージビルド、およびデプロイを行う
    • コンテナイメージをビルド
    • Azure Container Registry へ push
    • Azure Container App へデプロイ
    • まだ、v0 だが、ビルド→レジストリへのpush→デプロイまでの一連の
    動作を1つのアクションで扱ってくれるので非常に便利
    ビルド デプロイ

    View Slide

  35. Azure/aca-review-apps アクション
    • Azure Container apps の複数リビジョンモードを利用して、ステー
    ジング用の環境を構成できる
    • デプロイのみ
    ステージング

    View Slide

  36. デモ

    View Slide

  37. デモ①
    Azure Static Web Apps で、プルリクエストごとにプレビュー環境を用意する

    View Slide

  38. ポイント
    • Azure/static-web-apps-deploy アクションだけで構成されてい

    • 静的アプリケーションのビルド
    • 内蔵 functions のビルド
    • デプロイ
    • pull_request イベントのイベント種別 closed のときは、プレビュー環境のク
    ローズ
    • このワークフローは、Azure ポータルや Azure CLI で自動生成され

    View Slide

  39. デモ②
    Azure/container-apps-deploy-action ですっきり

    View Slide

  40. ポイント
    1. Azure Container app の Continuous deployment を設定して自
    動生成されたワークフロー
    • Azureの認証はサービスプリンシパル
    • Azure Container Registry への認証は admin user 有効
    2. Azure/container-apps-deploy-action を利用したワークフロー
    • Azure の認証は、OIDC 接続の例を併せて実装
    • Azure Container Registry の admin user 無効、短期間のアクセストークンを利

    • az acr login --expose-token で短期間のアクセストークンを発行
    • 参考: Azure Container Registry でのリポジトリに対するアクセス許可 - Azure
    Container Registry | Microsoft Learn

    View Slide

  41. デモ③
    Azure/aca-review-apps でプルリクエストごとにステージング用環境を用意す

    View Slide

  42. ポイント
    • Azure/aca-review-apps アクションは複数リビジョンモードへのデ
    プロイのみを担う
    • これにより、Azure Container registry 上のリポジトリやイメージな
    どは、用途に応じて運用できる
    • url が出力されるので、GitHub Actions の deployment
    environment の url を利用してプルリクエストに提示することもでき

    View Slide

  43. よいぞ、
    GitHub Actions

    View Slide

  44. Thank you so much🍩.

    View Slide