AzureStaticWebAppsを使って、簡単なWebアプリを構築・デプロイしてみた体験

## 目次
- [はじめに](#はじめに)
- [AzureStaticWebAppsについて](#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対応とドメイン設定が可能

### 主な特徴と用途

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

### 料金プラン

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

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

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

 - **Basic（無料）**：サブスクリプション管理のみに対応
 - **開発者プラン（¥3,248/月）**：平日対応のテクニカルサポート付き
 - **Standard（¥11,200/月）**：より短い応答時間を提供
 
今回の体験では、無料プランとBasicサポートを利用しました。

## 実際に導入する
### 準備
1. **Azureアカウント作成**

    - [公式サイト](https://azure.microsoft.com/ja-jp/)からアカウントを登録し、無料プランを有効化します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565778/afbf6d89-e4f0-8188-ae10-2a8d2cde6530.png)

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

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

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

2. **コード管理環境の選択**

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

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

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

```html
<!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を使って、アップロードしたコードを簡単にデプロイできます。以下は具体的な手順です：

1. **Azure Static Web Appsの作成**

- Azure Portal にアクセスした後、上部の検索バーで「静的 Web アプリ」と入力します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565778/b5fc4dab-26fa-3e2e-db11-6f57a8eff2be.png)

- 検索結果から「静的 Web アプリ」を選択し、「+作成」ボタンをクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565778/a7c13aa3-58e8-fa5d-45a2-8fce72f57fe0.png)
2. **基本情報の入力**
Azure Static Web Appsを作成するための基本情報を入力します。主に以下の項目を設定します：

- **プロジェクトの詳細**
    - **サブスクリプション:** 
    使用しているAzureアカウントのサブスクリプションを選択します。今回の例では「Azure subscription 1」が選択されています

    - **リソース グループ:** 
    プロジェクトを管理するためのリソースグループを指定します。既存のリソースグループを使用するか、「新規作成」をクリックして新しいリソースグループを作成できます。例では「AzureTest_group」と命名されています

- **静的 Web アプリの詳細**
    - **名前:** 
    作成するアプリケーションの名前を指定します。これはプロジェクトを識別するための名前で、例では「AzureTest」と入力されています

 - **ホスティング プラン**
    - **プランの種類:** 
    使用するホスティングプランを選択します。

        - **プランの種類:** 
        使用するホスティングプランを選択します。
            - Free（無料プラン）：個人または小規模プロジェクト向け（今回選択）。
            - Standard（有料プラン）：汎用的な運用アプリ向け。
            - 専用（プレビュー中）：専用環境を提供。
        
    
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565778/b435f928-6d8c-7fa3-833e-13913becdf2e.png)

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

- **デプロイの設定**
デプロイの詳細を設定する画面では、主に以下の内容を入力します：
    - **ソース:** 
    GitHubやAzure DevOpsなど、コードを管理している場所を選択します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565778/67f3ec95-d01f-47ad-b1af-cb5ffacf51bd.png)

    今回はGitHubを利用した例を基に説明しています。

    - **プロジェクトやリポジトリの指定:** 
    組織名、プロジェクト名、リポジトリ名、ブランチを指定します。

    - **ビルドの詳細:** 
        アプリの種類に応じて、以下のような項目を設定します：
        - **アプリの場所** 
        - **APIの場所** 
        - **出力先** 

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

- **確認および作成**
すべての設定を完了すると、このような確認画面が表示されます。この画面では、以下の情報を確認できます：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565778/c9cd780a-f9c6-d7d8-85fe-69b7ed81428c.png)



    - サブスクリプションやリソースグループの設定内容
    - リポジトリやブランチなど、デプロイに関する情報
    - ビルドや出力の詳細設定
    
もしこれまでの設定に問題がある場合、このページにエラーや警告が表示されます。その際は、表示される指示に従って修正を行ってください。

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

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

作成が成功すると、Azure Portal上に以下のような画面が表示されます：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565778/f241e4c6-b259-b3a6-4f79-df62176a1e90.png)

1. **リソース一覧**
    デプロイした静的 Web アプリ（例: AzureTest）がリソース一覧に表示されます。この画面で、作成したアプリケーションや関連リソース（リソース グループなど）を確認できます

2. **アプリケーションの状態確認**
作成したアプリケーションに関連する情報（名前、種類、最終表示日など）が表示されます。このリソースをクリックすることで、さらに詳細な情報や設定を確認できます。

### デプロイ結果の確認

1. **リソース一覧からアプリケーションを選択**
デプロイ完了後、Azure Portal上のリソース一覧から作成したアプリケーション（例: AzureTest）をクリックします。

2. **アプリケーションの確認**
アプリケーションの概要ページが開きます（以下のスクリーンショット参照）。
このページで「アプリケーションを確認する」のステータスが「準備完了」と表示されていることを確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565778/35b181d2-beeb-66e4-1eaa-5abe2508f1fc.png)
    - **準備完了の場合:** URLをクリックして、デプロイされたページを確認します。
    - **準備完了ではない場合:** GitHub または Azure 上の設定やアップロードされたコードを確認し、エラーや設定ミスがないかチェックします。
※（今回の記事では、問題解決の詳細な手順については割愛しています。）

3. **デプロイ結果の確認**
「準備完了」となり、提供されたURLを開くと、実際にデプロイされたWebページが表示されます。以下は今回のHTMLコードを基にしたデプロイ結果の例です：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565778/d1b30af5-d495-5c50-6ee4-559d7d2dd1e4.png)

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

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

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

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

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