Infrastructure as Code実践：Azure SWA×Bicep×GitHub Actions

Infrastructure as Code実践：Azure SWA×Bicep×GitHub Actions

SHARE

目次

ご挨拶

ども！3日で3本もブログを執筆するという狂ったことをやってしまいました。ちょっとやりすぎちゃったなと感じている龍ちゃんです。シリーズだったので、投稿するという達成感が得られない中、よく書いたなと思います。

勉強もかねてBicepに入門したので、学習のログをシリーズのブログにしてみました。タイトルが誇大広告になっている気がするのは否めないですが、Claudeさんが書いてくれたのでここは信じて投稿します。

さて、今回は初のシリーズを執筆しました。その記事をPDFで読み込ませてシリーズ紹介ブログをAIに依頼して、ほぼAIに執筆していただこうかと思います！正直、このブログが伸びたらちょっとだけしょげちゃいますねｗ

ではAIにバトンタッチです！

AIからのご挨拶

こんにちは！Anthropic社のClaude（Claude Sonnet 4）です。⿓ちゃんから「Azure Static Web Apps × Bicepシリーズの紹介記事を書いてほしい」とご依頼をいただき、この記事を執筆させていただきました。

⿓ちゃんが実際に検証された内容をもとに、技術的な構成や学習の流れを整理し、読者の皆さんにとって分かりやすい形でお届けできるよう心がけました。私自身、このシリーズの段階的な学習設計や実践的なアプローチに感銘を受けており、多くの開発者の方に役立つ内容だと確信しています。

AIとして、客観的な視点から技術記事の価値をお伝えできれば幸いです。もし内容に不明な点や改善点がございましたら、ぜひコメントでお聞かせください。皆さんのフィードバックが、より良い技術コンテンツ作成の糧になります。

このシリーズで目指すもの

このシリーズは「Azure Static Web Apps を Bicep で管理し、GitHub Actions を使った自動デプロイパイプラインを構築する」という、現代的な開発フローを基礎から実践まで段階的に学べることを目標としています。

単なるチュートリアルではなく、実際のプロジェクトで使える知識とスキルを身につけられるよう、以下の点にこだわって構成しました：

🎯 実践重視のアプローチ

  • 理論だけでなく、手を動かして学べる内容
  • 実際のコマンド例とトラブルシューティング
  • 本番運用を想定した設定と実践的なテクニック

🔄 段階的な学習設計

  • 環境構築 → ローカル開発 → CI/CD自動化の自然な流れ
  • 前回の知識を活用しながら次のステップへ進む構成
  • 各回で完結しつつ、シリーズ全体で大きな成果を得られる設計

🛠 現実的な開発フロー

  • DevContainerによるチーム開発環境の統一
  • Infrastructure as Codeによる再現可能なインフラ管理
  • GitHub Actionsを使った現代的なCI/CDパイプライン

シリーズ構成の紹介

このシリーズは3部構成となっており、それぞれが独立して学べる内容でありながら、連続して読むことでより深い理解が得られる設計になっています。

【基礎から学ぶ Azure Static Web Apps × Bicep 入門 #1】DevContainer で統一開発環境構築！Azure CLI・GitHub CLI・SWA CLI セットアップガイド
DevContainer実践入門：Azure CLI+GitHub CLI環境をチーム全体で統一
【基礎から学ぶ Azure Static Web Apps × Bicep 入門 #2】Infrastructure as Code 実践！Bicep テンプレートでローカル開発環境構築とSWA CLI デプロイ
作業時間を70%短縮！BicepによるAzure Static Web Apps自動構築
【基礎から学ぶ Azure Static Web Apps × Bicep 入門 #3】GitHub Actions で自動化！Bicep で実践CI/CDパイプライン構築
GitHub Actions自動化実践：Azure SWA×Bicep CI/CDパイプライン構築

【第1回】環境構築編：DevContainer で統一開発環境構築

🎯 この回の目標

  • DevContainerによる開発環境の統一化
  • Azure CLI、GitHub CLI、SWA CLIが使える状態の構築
  • 後続の作業に必要な認証設定の完了

📝 学べること

  • DevContainerの設定方法と実践的なテクニック
  • 各種CLIツールのセットアップと認証
  • Azure Static Web Appsの基本的な作成・デプロイ・削除操作
  • チーム開発での環境差異を解消するテクニック

🔧 実践内容

# 主要なコマンド操作を体験
az staticwebapp create --name $SWA_NAME --resource-group $RESOURCE_GROUP
swa deploy --app-location out --env production --deployment-token $TOKEN
az staticwebapp delete --name $SWA_NAME --resource-group $RESOURCE_GROUP

この回を読み終える頃には、チーム全体で同じ開発環境を共有でき、Azure CLIでのリソース管理の基本的な流れが理解できるようになります。

【第2回】実践編：Infrastructure as Code実践！Bicepテンプレートでローカル開発環境構築

🎯 この回の目標

  • ローカル開発用のBicepテンプレート作成
  • SWA CLIを使った手動デプロイの実行
  • 開発サイクルでの迅速なデプロイフローの確立

📝 学べること

  • Bicepテンプレートの構造と書き方
  • パラメータファイルによる設定の分離とセキュリティ向上
  • リソースグループスコープでの実践的な運用方法
  • 自動化スクリプトによる開発効率の大幅向上

🔧 実践内容

// GitHub Actions連携用Static Web Apps
resource staticWebApp 'Microsoft.Web/staticSites@2024-11-01' = {
  name: '${projectName}-swa-${environment}-local'
  location: location
  properties: {
    buildProperties: {
      appLocation: '/out'
      apiLocation: ''
      outputLocation: ''
    }
  }
}

この回では、手動作業を自動化スクリプトで効率化し、Bicepを使ったInfrastructure as Codeの基本をマスターできます。特に、10分かかっていた作業を2-3分に短縮できる自動化の威力を体感していただけるはずです。

【第3回】CI/CD編：GitHub Actions で自動化！Bicepで実践CI/CDパイプライン構築

🎯 この回の目標

  • GitHub Actions デプロイを前提としたBicepテンプレートの作成
  • GitHub CLIを使った自動化によるSecretsとVariablesの設定
  • GitHubリポジトリへのプッシュをトリガーとした自動デプロイパイプライン

📝 学べること

  • 本番環境を想定したワークフローファイルの構築
  • GitHub Environment を使ったSecrets/Variables管理
  • エラーハンドリングから前提条件の確認まで、本番運用を意識した自動化
  • skipGithubActionWorkflowGeneration: true による手動ワークフロー管理

🔧 実践内容

# GitHub Actions ワークフロー
- name: Build And Deploy
  uses: Azure/static-web-apps-deploy@v1
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
    repo_token: ${{ secrets.GITHUB_TOKEN }}
    action: "upload"
    app_location: ${{ env.APP_LOCATION }}
    output_location: ${{ env.OUTPUT_LOCATION }}

最終回では、GitHub CLIを活用した環境設定の自動化の威力を実感できるはずです。従来だと手動でSecretsを登録する必要がありましたが、bashスクリプトで一気に設定できるのは開発効率の大幅な向上につながります。

各記事への導入ガイド

🚀 初心者の方へ

第1回から順番に読むことを強くおすすめします。特にDevContainerの環境構築は、後続の記事で前提となる重要な基盤です。Azure初心者の方でも、段階的に学べるよう丁寧に解説しています。

🔧 中級者の方へ

Bicepには馴染みがあるけれど、GitHub Actionsとの連携は初めてという方は、第2回から読み始めても大丈夫です。ただし、DevContainerの恩恵は大きいので、第1回も一読されることをおすすめします。

⚡ 上級者の方へ

すでにInfrastructure as CodeやCI/CDに慣れ親しんでいる方は、第3回の自動化スクリプトのテクニックに注目してください。エラーハンドリングやリトライ機能、シーケンス図を使った処理フローの可視化など、実践的なノウハウが満載です。とりあえずbashファイルを捧げます！ 間違いがあればコメントください。糧にします。

学習効果を最大化するコツ

💻 実際に手を動かす

記事を読むだけでなく、必ず実際にコマンドを実行してみてください。エラーが出てもそれが学習の一部です。トラブルシューティングの経験こそが、実践力を大きく向上させます。

📝 コマンドをメモする

各記事で紹介するコマンドは、README.mdなどにメモしておくことをおすすめします。後から「あのコマンドなんだったっけ？」となることを防げます。

🔄 応用してみる

基本を理解できたら、自分なりのカスタマイズを試してみてください。パラメータファイルの値を変えたり、別のフレームワークに適用したりすることで、理解が深まります。

まとめ

このAzure Static Web Apps × Bicepシリーズは、現代的な開発フローを段階的に学べる実践的な技術記事です。DevContainerによる環境統一から始まり、Bicepでのインフラ管理、最終的にはGitHub Actionsでの完全自動化まで、実際の開発現場で使える知識とスキルを身につけることができます。

各記事は独立して読むこともできますが、連続して学習することで、より深い理解と実践力を得られる構成になっています。特に自動化スクリプトのテクニックや、パラメータファイルによる設定分離など、実務で役立つノウハウが多数含まれています。

ぜひ実際に手を動かしながら学習し、皆さんの開発フローの改善にお役立てください。質問や改善点があれば、コメントでお聞かせください。皆さんのフィードバックが、より良い技術コンテンツ作成の原動力になります。

龍ちゃん
龍ちゃん

いや～フルで書いてもらいましたけど、1分でこの分量はすごいわ～

ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【基礎から学ぶ Azure Static Web Apps × Bicep 入門 #3】GitHub Actions で自動化！Bicep で実践CI/CDパイプライン構築
GitHub Actions自動化実践：Azure SWA×B…

次の記事

閉域網環境のOpenShiftでミラーレジストリーを構成する