3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-01-11

目次

はじめに

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

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

Cursorについて

概要

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アカウント作成

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

image.png

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

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

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

  1. コード管理環境の選択

    • プロジェクトのコードを 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を使って、アップロードしたコードを簡単にデプロイできます。以下は具体的な手順です:

  1. Azure Static Web Appsの作成
  • Azure Portal にアクセスした後、上部の検索バーで「静的 Web アプリ」と入力します
    image.png

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

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

  • プロジェクトの詳細

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

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

  • 静的 Web アプリの詳細

    • 名前:
      作成するアプリケーションの名前を指定します。これはプロジェクトを識別するための名前で、例では「AzureTest」と入力されています
  • ホスティング プラン

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

      • プランの種類:
        使用するホスティングプランを選択します。
        • Free(無料プラン):個人または小規模プロジェクト向け(今回選択)。
        • Standard(有料プラン):汎用的な運用アプリ向け。
        • 専用(プレビュー中):専用環境を提供。

image.png

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

  • デプロイの設定
    デプロイの詳細を設定する画面では、主に以下の内容を入力します:

    • ソース:
      GitHubやAzure DevOpsなど、コードを管理している場所を選択します。
      image.png

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

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

    • ビルドの詳細:
      アプリの種類に応じて、以下のような項目を設定します:

      • アプリの場所
      • APIの場所
      • 出力先

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

  • 確認および作成
    すべての設定を完了すると、このような確認画面が表示されます。この画面では、以下の情報を確認できます:
    image.png

    • サブスクリプションやリソースグループの設定内容
    • リポジトリやブランチなど、デプロイに関する情報
    • ビルドや出力の詳細設定

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

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

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

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

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

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

デプロイ結果の確認

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

  2. アプリケーションの確認
    アプリケーションの概要ページが開きます(以下のスクリーンショット参照)。
    このページで「アプリケーションを確認する」のステータスが「準備完了」と表示されていることを確認してください。
    image.png

    • 準備完了の場合: URLをクリックして、デプロイされたページを確認します。
    • 準備完了ではない場合: GitHub または Azure 上の設定やアップロードされたコードを確認し、エラーや設定ミスがないかチェックします。
      ※(今回の記事では、問題解決の詳細な手順については割愛しています。)
  3. デプロイ結果の確認
    「準備完了」となり、提供されたURLを開くと、実際にデプロイされたWebページが表示されます。以下は今回のHTMLコードを基にしたデプロイ結果の例です:

image.png

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

まとめ

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

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

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

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?