Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

CI/CD

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

GitHub Actions 基礎

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

参考(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

Slide 22

Slide 22 text

参考(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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Azure の公式アクション紹介

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

よく使うおすすめ 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 (かづみ個人調べ)

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

デモ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

ポイント 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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

よいぞ、 GitHub Actions

Slide 44

Slide 44 text

Thank you so much🍩.