目次
はじめに
こんにちは!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対応とドメイン設定が可能
主な特徴と用途
- 個人プロジェクト:
- ポートフォリオサイト、ブログ、学習用プロジェクト。
- チーム開発:
- 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の作成
2. 基本情報の入力
Azure Static Web Appsを作成するための基本情報を入力します。主に以下の項目を設定します:
-
プロジェクトの詳細
-
サブスクリプション:
使用しているAzureアカウントのサブスクリプションを選択します。今回の例では「Azure subscription 1」が選択されています -
リソース グループ:
プロジェクトを管理するためのリソースグループを指定します。既存のリソースグループを使用するか、「新規作成」をクリックして新しいリソースグループを作成できます。例では「AzureTest_group」と命名されています
-
-
静的 Web アプリの詳細
-
名前:
作成するアプリケーションの名前を指定します。これはプロジェクトを識別するための名前で、例では「AzureTest」と入力されています
-
名前:
-
ホスティング プラン
-
プランの種類:
使用するホスティングプランを選択します。-
プランの種類:
使用するホスティングプランを選択します。- Free(無料プラン):個人または小規模プロジェクト向け(今回選択)。
- Standard(有料プラン):汎用的な運用アプリ向け。
- 専用(プレビュー中):専用環境を提供。
-
プランの種類:
-
補足: 今回の設定では、「AzureTest」という名前でアプリケーションを作成し、無料プラン(Free)を選択しています。
-
デプロイの設定
デプロイの詳細を設定する画面では、主に以下の内容を入力します:今回は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 は、個人プロジェクトや学習用途だけでなく、業務利用にも適したサービスです。特に、コード管理からデプロイまでの流れがシンプルなため、初心者でもすぐに活用できます。
今後さらに機能を拡張したり、バックエンドと連携させることで、より高度なプロジェクトにも対応可能です。ぜひ一度お試しください!