目次

はじめに
AzureStaticWebAppsについて
実際に導入する
まとめ

はじめに

こんにちは！TechoesのCです。この記事では Azure Static Web Apps を使った簡単な Web アプリの構築とデプロイ体験を紹介します。

Azure Static Web Apps は、フロントエンドとバックエンドを統合的にデプロイできるサービスです。これを利用することで、アプリケーションの構築から公開までのプロセスが驚くほどスムーズになります。

AzureStaticWebAppsについて

概要

Azure Static Web Apps は、フロントエンドアプリ（React、Vue、Angular、静的HTMLなど）と、サーバーレスバックエンド（Azure Functions）を組み合わせてデプロイできるサービスです。以下の特徴があります：

自動デプロイ：GitHubやAzure DevOpsと連携し、コードをpushするだけでビルド・デプロイが完了
無料プラン：個人開発者や小規模プロジェクトに最適
SSLとカスタムドメイン：自動でHTTPS対応とドメイン設定が可能

主な特徴と用途

個人プロジェクト:
- ポートフォリオサイト、ブログ、学習用プロジェクト。
チーム開発：
- CI/CD を活用した自動デプロイとコラボレーション
小規模サービス：
- 小規模アプリやツールの公開

料金プラン

Azure Static Web Appsには以下の料金プランがあります：

無料プラン（Free Tier）
- 基本的なデプロイ機能やSSL対応、グローバルCDNを含み、個人利用や小規模プロジェクトに最適です
標準プラン（Standard Tier）
- 月額約1,300円（$9）から利用可能で、より高度な機能やリソース拡張が可能になります

また、技術支援が必要な場合は、以下のサポートプランも選択可能です：

Basic（無料）：サブスクリプション管理のみに対応
開発者プラン（¥3,248/月）：平日対応のテクニカルサポート付き
Standard（¥11,200/月）：より短い応答時間を提供

今回の体験では、無料プランとBasicサポートを利用しました。

実際に導入する

準備

Azureアカウント作成
- 公式サイトからアカウントを登録し、無料プランを有効化します

Azure 無料アカウントを作成すると、以下の特典を利用できます：

12 か月間無料のおすすめサービス
一部の主要なAzureサービスを1年間無料で利用可能。
55 を超えるサービスが常に無料
データベースやAIツールなど、多様なサービスが無料で提供
USD200分のクレジット（最初の30日間）
初回登録時に200ドル分のクレジットが付与され、柔軟に使用可能。

これらの特典を活用することで、コストを気にせずAzureの機能を試すことができます。

コード管理環境の選択
- プロジェクトのコードを GitHub または Azure DevOps にアップロードします。どちらもAzure Static Web Appsと連携できるため、用途やチームの方針に応じて選択可能です

今回は、簡単な HTMLファイルを用意し、コード管理には GitHub を使用しました（現在、Azure DevOpsとの無料連携が利用できないため）。

導入するコード

今回使用するのは、以下のような簡単な HTML ページです。このコードは、Azure Static Web Apps でのデプロイテスト用に作成されたもので、基本的なスタイルと構造のみを含んでいます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- 基本設定 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テストページ</title>
    <!-- スタイル設定 -->
    <style>
        /* 基本スタイル */
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background: #fafafa;
        }
        /* メインボックス */
        .box {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px #0001;
            max-width: 600px;
            margin: 0 auto;
        }
        /* 見出し */
        h1 {
            color: #444;
            margin-bottom: 20px;
        }
        /* 本文 */
        p {
            color: #666;
        }
        /* フッター */
        footer {
            margin-top: 20px;
            color: #999;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- メインコンテンツ -->
    <div class="box">
        <h1>テスト</h1>
        <p>テストページです。</p>
        <footer>© 2025</footer>
    </div>
</body>
</html>

導入の流れ

Azure Static Web Appsを使って、アップロードしたコードを簡単にデプロイできます。以下は具体的な手順です：

Azure Static Web Appsの作成

Azure Portal にアクセスした後、上部の検索バーで「静的 Web アプリ」と入力します
検索結果から「静的 Web アプリ」を選択し、「+作成」ボタンをクリックします

2. 基本情報の入力
Azure Static Web Appsを作成するための基本情報を入力します。主に以下の項目を設定します：

プロジェクトの詳細
- サブスクリプション:
  使用しているAzureアカウントのサブスクリプションを選択します。今回の例では「Azure subscription 1」が選択されています
- リソースグループ:
  プロジェクトを管理するためのリソースグループを指定します。既存のリソースグループを使用するか、「新規作成」をクリックして新しいリソースグループを作成できます。例では「AzureTest_group」と命名されています
静的 Web アプリの詳細
- 名前:
  作成するアプリケーションの名前を指定します。これはプロジェクトを識別するための名前で、例では「AzureTest」と入力されています
ホスティングプラン
- プランの種類:
  使用するホスティングプランを選択します。
  - プランの種類:
    使用するホスティングプランを選択します。
    - Free（無料プラン）：個人または小規模プロジェクト向け（今回選択）。
    - Standard（有料プラン）：汎用的な運用アプリ向け。
    - 専用（プレビュー中）：専用環境を提供。

補足: 今回の設定では、「AzureTest」という名前でアプリケーションを作成し、無料プラン（Free）を選択しています。

デプロイの設定
デプロイの詳細を設定する画面では、主に以下の内容を入力します：
- ソース:
  GitHubやAzure DevOpsなど、コードを管理している場所を選択します。
今回はGitHubを利用した例を基に説明しています。
- プロジェクトやリポジトリの指定:
  組織名、プロジェクト名、リポジトリ名、ブランチを指定します。
- ビルドの詳細:
  アプリの種類に応じて、以下のような項目を設定します：
  - アプリの場所
  - APIの場所
  - 出力先

これらの設定を完了することで、Azure Static Web Appsでのデプロイ準備が整います。

確認および作成
すべての設定を完了すると、このような確認画面が表示されます。この画面では、以下の情報を確認できます：
- サブスクリプションやリソースグループの設定内容
- リポジトリやブランチなど、デプロイに関する情報
- ビルドや出力の詳細設定

もしこれまでの設定に問題がある場合、このページにエラーや警告が表示されます。その際は、表示される指示に従って修正を行ってください。

すべて問題がなければ、画面下部の「作成」ボタンをクリックすることで、Azure Static Web Apps のデプロイが開始されます。

デプロイされたアプリケーションの確認

作成が成功すると、Azure Portal上に以下のような画面が表示されます：

リソース一覧
デプロイした静的 Web アプリ（例: AzureTest）がリソース一覧に表示されます。この画面で、作成したアプリケーションや関連リソース（リソースグループなど）を確認できます
アプリケーションの状態確認
作成したアプリケーションに関連する情報（名前、種類、最終表示日など）が表示されます。このリソースをクリックすることで、さらに詳細な情報や設定を確認できます。

デプロイ結果の確認

リソース一覧からアプリケーションを選択
デプロイ完了後、Azure Portal上のリソース一覧から作成したアプリケーション（例: AzureTest）をクリックします。
アプリケーションの確認
アプリケーションの概要ページが開きます（以下のスクリーンショット参照）。
このページで「アプリケーションを確認する」のステータスが「準備完了」と表示されていることを確認してください。
- 準備完了の場合: URLをクリックして、デプロイされたページを確認します。
- 準備完了ではない場合: GitHub または Azure 上の設定やアップロードされたコードを確認し、エラーや設定ミスがないかチェックします。
  ※（今回の記事では、問題解決の詳細な手順については割愛しています。）
デプロイ結果の確認
「準備完了」となり、提供されたURLを開くと、実際にデプロイされたWebページが表示されます。以下は今回のHTMLコードを基にしたデプロイ結果の例です：

デプロイされたページにコード内容が正しく表示されていれば、デプロイ成功です。

まとめ

今回の記事では、Azure Static Web Appsを使った静的Webアプリのデプロイ手順を紹介しました。以下が今回の流れのまとめです：

Azureアカウントの作成： コストを気にせず試せる無料プランが充実
簡単なHTMLコードの準備： 初心者でも構築しやすいシンプルなHTMLを活用
Azure Static Web Appsでのデプロイ： UIの直感性で、簡単に公開
デプロイ結果の確認： URLを使って、デプロイされたページが正しく表示されていることを確認

Azure Static Web Apps は、個人プロジェクトや学習用途だけでなく、業務利用にも適したサービスです。特に、コード管理からデプロイまでの流れがシンプルなため、初心者でもすぐに活用できます。

今後さらに機能を拡張したり、バックエンドと連携させることで、より高度なプロジェクトにも対応可能です。ぜひ一度お試しください！