1 ご挨拶
2 基礎から学ぶ Azure Static Web Apps × Bicep 入門
- 2.1 環境構築
- 2.2 Azure CLI＋SWA CLIでStatic Web Appsを作成～デプロイ～削除まで
3 おわりに
4 次のシリーズへの導入

ご挨拶

ども！寝る前の日課にAIとのチャットが追加された龍ちゃんです。たまにブログの解析もさせるんですけど、この一番最初の挨拶はAI的には関西弁という認識になるんです。個人的にはそんな意図がなくて、ヒヤッとしているんです。このままAIに執筆させると、関西弁でのブログが作られてしまいそうで、まだまだ人間での執筆をやめられないなと思います。

基礎から学ぶ Azure Static Web Apps × Bicep 入門

今回は「Azure Static Web Apps を Bicep（Infrastructure as Code）で管理し、GitHub Actions を使った自動デプロイパイプラインを構築する」というテーマで3部構成の「環境構築編」となります。各回のコンテンツの内容としては以下になります。

シリーズのまとめ記事はこちらになります。

Azure Static Web Apps + Bicep環境構築編　←　今回はここ
ローカル開発でのBicep + SWA CLIデプロイ実践編
Bicep＋GitHub Actions連携デプロイ編

この回での目標は以下となります。

DevContainerによる開発環境の統一化
Azure CLI、GitHub CLI、SWA CLIが使える状態の構築
後続の作業に必要な認証設定の完了
azコマンドでStatic Web Appsのリソースの管理

それでは、環境の構築を始めましょう。

環境構築

作成する環境の整理

まずは構築する環境の整理から始めましょう。今回の環境は、これからのシリーズで必要となるものを一挙にセットアップできるように以下のものを環境内で実行できるようにしておきます。

Azure CLI：Azureのリソース管理に利用する
GitHub CLI：GitHubの操作をコマンドラインで行う
Azure Static Web Apps CLI（以降：SWA CLI）：Azure Static Web Appsのローカル開発を支援する

今回、作成するディレクトリ構成になります。

.
├── .devcontainer/
│   └── devcontainer.json          # Dev Container設定
├── out/                           # デプロイ用静的ファイル
│   └── index.html
├── swa-cli.config.json            # SWA CLI Config ファイル    
└── README.md                      # コマンドを覚えるのは大変なのでメモ推奨

今回は環境構築のみなので、動作確認はコマンドで実行して確認をしたいと思います。

DevContainerで構築する利用としては、複数人で開発を前提とする場合に環境差異の確認を都度するのを回避するためです。Azure CLIに関しては、開発体験の向上のためにホスト側の認証情報をマウントして、DevContianerで都度認証を回避するようにします。GitHub CLIに関しては、使用頻度があまり高くないので、都度認証を行うようにします。

`DevContainer > devcontianer.json`

ベースのイメージとしては、Microsoft公式が出しているDevContianer用のNodeイメージを使用しています。

{
    "name": "Azure Bicep Development",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
    "features": {
        "ghcr.io/devcontainers/features/azure-cli:1": {},
        "ghcr.io/devcontainers/features/github-cli:1": {}
    },
    "postCreateCommand": "npm install -g @azure/static-web-apps-cli",
    "customizations": {
        "vscode": {
            "extensions": [
                "ms-azuretools.vscode-bicep",
                "GitHub.vscode-github-actions",
                "ms-vscode.azure-account"
            ]
        }
    },
    "forwardPorts": [
        4280
    ],
    "mounts": [
        "source=${localEnv:HOME}/.azure,target=/home/node/.azure,type=bind,consistency=cached"
    ]
}

featuresとしてAzure CLIとGitHub CLIをインストールして、立ち上げ後にグローバルインストールでSWA CLIをインストールしています。

また、マウントとしてホストにある/.azureファイルをマウントしています。こちらは、ホストでAzure CLIのログインを実行していれば、コンテナ内で認証済みとして使用することができます。

`out > index.html`

検証用の静的ファイルを生成しましょう。将来的には、ReactやVueで作成したビルドファイルを指定するべきですが、今回は検証目的のため単純なHTMLファイルを生成して配置しておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bicepでデプロイをしてみる</title>
  </head>
  <body>
    これが見れたら成功です！更新してみる
    <p id="time"></p>

    <script>
      // 現在の時間を取得
      const now = new Date();
      // 時間をフォーマット
      const formattedTime = now.toLocaleTimeString("ja-JP", {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      });
      // HTMLに表示
      document.getElementById(
        "time"
      ).textContent = `現在の時間: ${formattedTime}`;
    </script>
  </body>
</html>

コンテナ内動作確認

まずはそれぞれのCLIがインストール済みかを確認します。

az --version

gh --version

swa --version

それぞれバージョン情報が表示されれば確認としては完了です。Azure CLIとGitHub CLIはそれぞれ認証が必要になります。認証をしていない場合は、コマンド自体が失敗する可能性があります。

az login

gh auth login

SWA CLIに関しては、認証の必要はありません。ですが、エミュレーターを起動するための設定ファイルを生成しておくと、SWA CLIを使用したデプロイやエミュレーターの起動が簡易になります。

# swa-cli.config.jsonを対話的に生成する
swa init

対話的に実行するとswa-cli.config.jsonが生成されます。こちらは、エミュレート時やデプロイ時に使用することができます。便利なので、作成しておきましょう。

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "frontend-swr": {
      "appLocation": "out",
      "outputLocation": "."
    }
  }
}

エミュレーターは以下のコマンドで実行することができます。swa-cli.config.jsonを検索してファイルがある場合は、記述の設定で処理を行ってくれます。

# swa-cli.config.jsonをベースにエミュレーターが起動する
swa start

# http://localhost:4280/ にアクセス確認

すべてのコマンドが問題なく実行できれば、環境構築完了となります。

Azure CLI＋SWA CLIでStatic Web Appsを作成～デプロイ～削除まで

bicepでのリソース作成を行う前に、Azure CLIを用いてコマンドベースでAzure Static Web Appsを作成から削除まで検証していきます。事前準備として、リソースグループは手動で作成しておいてください。コマンドで一気に作成することも可能ですが、今回はStatic Web Appsのみに焦点を当てています。

Static Web Appsが作成可能なロケーション情報の取得

# SWAを作成することができるロケーションを取得
az provider show --namespace Microsoft.Web --query "resourceTypes[?resourceType=='staticSites'].locations"

このコマンドでは、Microsoft.WebプロバイダーからstaticSitesタイプのリソースが作成可能な全ロケーションを取得しています。ロケーションは様々指定することができますが、Static Web Appsを作成することができるロケーションは限定されています。

リソースを作成

# SWAを作成
az staticwebapp create --name $SWA_NAME --resource-group $RESOURCE_GROUP --location $location

指定したリソースグループ内にSWAを作成するコマンドです。$SWA_NAME、$RESOURCE_GROUP、$locationは設定したい値に変更してください。作成には数分かかる場合がありますが、完了すると自動的にHTTPS対応のURLが割り当てられます。コマンドの完了後に表示されるdefaultHostnameにhttpsをつけるとページにアクセスることができます。

作成が完了するとサンプルページがデプロイされているので、以下のページが表示されれば無事作成が完了しています。

デプロイトークンを取得

az staticwebapp secrets list --name $SWA_NAME --resource-group $RESOURCE_GROUP --query "properties.apiKey"

SWAへのデプロイには専用のトークンが必要になります。これはセキュリティ上重要な情報なので、適切に管理しましょう。このコマンドでSWAのデプロイメントトークンを取得できます。このトークンはCI/CDパイプラインや手動デプロイで使用する重要な認証情報です。取得したトークンは環境変数として設定しておくと便利ですね。

SWA CLIでデプロイトークンを用いてデプロイ

swa deploy --app-location out --env production --deployment-token $DEPLOY_TOKEN

--app-location outでビルド成果物が格納されているディレクトリを指定し、-env productionでデプロイ先の環境を指定します（staging環境も利用可能）。-deployment-tokenには先ほど取得したデプロイメントトークンを使用します。

Next.jsやNuxt.jsなどのフレームワークを使っている場合、通常はnpm run build後の出力ディレクトリ（out、dist、buildなど）を指定することになります。

リソースを削除

az staticwebapp delete --name $SWA_NAME --resource-group $RESOURCE_GROUP --yes

検証が終わったら、課金を避けるためにリソースを削除しましょう。（今回作成したリソースはフリー版です！）SWAはFreeプランでも利用できますが、カスタムドメインや認証機能を使う場合は課金が発生する可能性があります。

--yesフラグを付けることで、確認プロンプトをスキップして削除を実行します。本番環境では十分注意して使用してください。

おわりに

お疲れ様でした！今回は「基礎から学ぶ Azure Static Web Apps × Bicep 入門」の第1回として、DevContainer を使った統一開発環境の構築を行いました。

DevContainer の力を借りることで、チーム全体で同じ開発環境を簡単に共有できるようになりましたね。Azure CLI、GitHub CLI、SWA CLI の3つのツールが使える状態になったので、これで次回以降の作業がスムーズに進められそうです。

特に Azure CLI での認証情報をマウントすることで、コンテナを再起動するたびに認証し直す手間を省けるのは、日々の開発体験の向上に大きく貢献してくれると思います。

コマンドラインからの Static Web Apps の作成・デプロイ・削除まで一通り体験できたので、Azure のリソース管理の流れも掴めたのではないでしょうか。特にデプロイトークンの取得と SWA CLI を使ったデプロイは、次回以降でも頻繁に使う重要な操作なので、しっかりと覚えておいてくださいね。

次のシリーズへの導入

さて、次回は「ローカル開発での Bicep + SWA CLI デプロイ実践編」となります！

今回は Azure CLI を使ってコマンドベースでリソースを管理しましたが、次回からはいよいよ Infrastructure as Code の本領発揮です。Bicep を使ってコードでインフラを定義し、バージョン管理できるようにしていきます。

次回の内容としては以下を予定しています：

Bicep ファイルの作成: Static Web Apps のリソースを Bicep で定義
パラメータファイルの活用: 環境ごとの設定を外部化
ローカルでの Bicep デプロイ: az deployment コマンドでのリソース作成
SWA CLI との連携: Bicep で作成したリソースへのアプリケーションデプロイ
リソースの更新と削除: Bicep での変更管理

今回構築した DevContainer 環境があるおかげで、Bicep の拡張機能も既にインストール済みですし、Azure CLI での認証も完了しているので、次回はすぐに Bicep の実践に入れます。

それでは、次回もお楽しみに！引き続き一緒に Azure Static Web Apps と Bicep をマスターしていきましょう。

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

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

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

DevContainer実践入門：Azure CLI+GitHub CLI環境をチーム全体で統一

ご挨拶

基礎から学ぶ Azure Static Web Apps × Bicep 入門

環境構築

作成する環境の整理

`DevContainer > devcontianer.json`

`out > index.html`

コンテナ内動作確認

Azure CLI＋SWA CLIでStatic Web Appsを作成～デプロイ～削除まで

Static Web Appsが作成可能なロケーション情報の取得

リソースを作成

デプロイトークンを取得

SWA CLIでデプロイトークンを用いてデプロイ

リソースを削除

おわりに

次のシリーズへの導入

コメントを残すコメントをキャンセル

ご挨拶

基礎から学ぶ Azure Static Web Apps × Bicep 入門

環境構築

作成する環境の整理

DevContainer > devcontianer.json

out > index.html

コンテナ内動作確認

Azure CLI＋SWA CLIでStatic Web Appsを作成～デプロイ～削除まで

Static Web Appsが作成可能なロケーション情報の取得

リソースを作成

デプロイトークンを取得

SWA CLIでデプロイトークンを用いてデプロイ

リソースを削除

おわりに

次のシリーズへの導入

コメントを残す コメントをキャンセル

`DevContainer > devcontianer.json`

`out > index.html`

コメントを残すコメントをキャンセル