無料のAzure静的Webアプリ – Tim Coreyによる設定とデプロイメントの解説

Azure Static Web Apps とは何か、なぜそれが重要か

ビデオの冒頭で、Tim Corey は、Azure Static Web Apps を使用すると、無料で望むだけの Web アプリケーションをデプロイできることを説明します。 彼は、これらのアプリが Microsoft Azure のデータセンターを通じてグローバルにホストされ、コンテンツ配信ネットワークを介して配信されることを強調しています。これにより、HTTP リクエストを行うユーザーに対して高可用性、ロードバランシング、低遅延が保証されます。

Tim は、これらの Web アプリが認証、API アプリ、RESTful API との統合をサポートしていると指摘しています。無料プランでも、Azure Static Web Apps はサーバー、仮想マシン、または基礎となるインフラストラクチャの管理なしに、セキュリティと高性能を提供します。 これは、Azure 仮想マシンやオンプレミスサーバーを管理するのではなく、プラットフォームとしてのサービスを使用することの重要な利点の1つです。

彼は、Azure Static Web Apps が、HTML、CSS、JavaScript、React、および Blazor WebAssembly などのフロントエンド Web アプリケーションに理想的であるが、サーバーサイドの処理を必要とするアプリケーションには適していないと説明します。

ビデオの範囲と Azure 学習の文脈

Tim はこのビデオが、Azure サービス全体の完全な概要ではなく、焦点を当てたチュートリアルを提供すると説明します。 Azure App Service は多くの言語、モバイルアプリ、API アプリ、さらには Docker コンテナをサポートしていますが、このビデオは Microsoft Azure 内の特定のサービスに焦点を当てています。

セキュリティ、コスト管理、ミッションクリティカルアプリケーションなどのトピックについて深く知りたい視聴者には、Azure コースでそれらのトピックを取り上げていると述べています。 しかし、ここでの目標は、Azure Static Web Apps と継続的デプロイメントを使用してどれほど迅速に Web アプリを作成およびデプロイできるかを示すことです。

静的ウェブサイトの GitHub リポジトリを作成する

Tim は、新しい GitHub リポジトリを作成することから始め、GitHub が無料で Azure サービスとシームレスに統合することを説明します。 このリポジトリには、単純な静的ウェブサイトのソースコードが含まれます。

彼はリポジトリをプライベートにし、README ファイルを追加し、Visual Studio および Visual Studio Code に適した .gitignore ファイルを選択します。 Tim は、Visual Studio Code を使用しているにもかかわらず、同じプロセスが Visual Studio でも機能すると明言します。

このリポジトリは、Azure を使用してウェブサイトをホスティングするための出発点を表しています。 Tim は、Azure Static Web Apps がソースコードから直接デプロイされるため、継続的デプロイメントが簡素化されて信頼性が高まることを強調しています。

シンプルな HTML Web アプリケーションを構築する

Visual Studio Code を使用して、Tim は index.html ファイルを作成します。これは、ウェブサイトのエントリーポイントとして機能します。彼は Emmet のショートカットを使用して基本的な HTML 構造を生成し、機能を示すために最小限のコンテンツを追加します。

このステップは、バックエンドサービス、データベース、またはサーバーなしで基本的な Web アプリケーションをデプロイする方法を示しています。 Tim は、このシンプルさが意図的であることを明確にし、Azure Static Web Apps がフロントエンドのワークロード専用に設計されていることを示しています。

完了すると、彼は変更をコミットして GitHub にソースコードをプッシュし、プロセスの後でデプロイメントパイプラインをトリガーします。

Azure ポータルで Azure Static Web App を作成する

Tim は Azure ポータルに切り替えて、新しい Static Web App リソースを作成します。 彼は、リソースグループを作成することの重要性を説明し、リソースグループはリソースの管理、環境のクリーンアップ、不要なコストの回避を容易にすることを指摘します。

彼は無料プランを選択することの重要性を強調し、このプランが迅速で信頼性が高く、ほとんどの小規模ビジネスウェブサイトや個人プロジェクトに十分であることを説明します。 Azure App Service プランはアプリサービスプランと月額料金を必要とする場合がありますが、無料プランの Azure Static Web Apps はその複雑さを完全に取り除きます。

Tim は、自身のウェブサイトが Azure Static Web Apps で実行されていると簡単に述べ、このサービスの実稼働での使用法を示しています。

GitHub と継続的デプロイメントの有効化

Tim は Azure Static Web App を GitHub に接続し、リポジトリとブランチを選択します。 彼は、Azure が継続的デプロイメントを処理するための GitHub Actions ワークフローを自動的に設定することを説明します。

このワークフローにより、手動のデプロイメントステップが不要になります。 ソースコードが変更されるたびに、ウェブアプリが自動的に再構築され、デプロイされます。 Tim は、これが現代のクラウドプラットフォームの重要な機能であり、Microsoft Azure をウェブホスティングに使用する主な利点の1つであると指摘します。

デプロイトークンとセキュリティ設定

Tim は、GitHub リポジトリ設定に移動して、シークレットとして保存されているデプロイトークンを表示します。 このトークンは、GitHub と Azure の間の安全な通信を可能にします。

彼は、この設定が開発者が手動で資格情報を設定する必要なく、セキュリティが強化されたことを説明します。 Azure Static Web App API トークンは、認可されたワークフローのみがアプリケーションをデプロイできることを確保します。

デプロイされた静的ウェブサイトの確認

デプロイメントが完了すると、Tim は、Azure ポータルから直接ライブウェブサイトを開きます。 サイトは現在、クラウドで公開されアクセス可能です。

彼は、この同一プロセスが他のフロントエンドフレームワークにも機能すると説明しています。それらは最終的に静的ファイルに変換され、Azure Static Web Apps によって効率的に提供されることができます。アプリサービスプラン、仮想マシン、またはバックエンドサーバーは不要です。

Blazor WebAssembly アプリケーションのデプロイ

Tim は、Blazor WebAssembly スタンドアロンアプリケーションをデプロイすることを実演し、Blazor Web Apps と Blazor WebAssembly の違いを強調します。

彼は、Blazor WebAssembly がクライアント上で完全に動作するため、Azure Static Web Apps に適していると説明します。ASP.NET Core MVC、PHP、Java のバックエンドなどのサーバーサイド技術は、Azure Web Apps が必要です。

このセクションは、Azure Static Web Apps がクライアント専用の Web アプリケーションに設計されていることを強調します。

Blazor アプリケーションの作成とテスト

Visual Studio を使用して、Tim は Blazor WebAssembly プロジェクトを作成し、.NET 9 を選択し、HTTPS とプログレッシブウェブアプリケーションのサポートを有効にします。

彼はアプリをローカルで実行し、デプロイ前に動作を確認します。これにより、実稼働の準備が整っていることが強調されます。 確認が完了したら、彼は Visual Studio から直接 GitHub リポジトリを作成し、ソースコードをプッシュします。

Blazor の Azure Static Web Apps へのデプロイ

Tim は、別の Static Web App リソースを作成し、それを Blazor リポジトリに接続します。 彼は GitHub Actions ワークフローが出力ディレクトリなどの Blazor 固有のパスを自動的に構成することを強調します。

これは、Azure が多くのプログラミング言語やフレームワークをサポートし、手動での構成を必要としないことを示しています。 プラットフォームは、基礎となるインフラストラクチャやビルドの複雑さを抽象化します。

ビルドプロセスとデプロイメントの完了

Tim は、Blazor のビルドがコンパイルと最適化のステップのために長くなることを説明します。 Azure はデプロイメント中にアプリケーションを整え、パフォーマンスを向上させます。

完了すると、Blazor WebAssembly アプリがライブで、グローバルにアクセス可能で、Microsoft Azure のクラウドインフラストラクチャでホストされます。

Azure Static Web Apps の追加機能

Tim は、他の機能について簡単に説明し、以下を含みます：

• カスタムドメイン

• 組み込みのセキュリティを持つ API の統合

• 開発、ステージング、本番スロットなどのデプロイスロット

彼は API が自動的にロックダウンされ、許可されていないアクセスを防ぎ、統合が簡素化されることを説明します。

リソースグループを使用したリソースのクリーンアップ

最後に、Tim がリソースグループを削除し、Azure が開発者に関連リソースを一度に削除できるようにする方法を実演します。 これは、意図しないコストを避けるためにクラウドサービスをテストする際に特に重要です。

彼は、リソースグループの削除は永久に行われ、元に戻せないことを警告します。

Azure Static Web Apps を使用する時と使用しない時

Tim は、Azure Static Web Apps がサーバーサイドのワークロードには適していないと明確にし、PHP アプリケーション、MVC アプリ、または Blazor Web Apps などには不向きであると説明します。

それらは、HTML、JavaScript、CSS、React、Angular、Vue、Blazor WebAssembly を使用して構築されたフロントエンド Web アプリケーションに理想的です。 すべてがクライアント上で実行されるため、これらのアプリは完全に無料でホスティングできます。

Tim Corey は、ビデオ全体で示しているように、Azure Static Web Apps は、Microsoft Azure を使用してモダン Web アプリケーションをデプロイするためのシンプルかつ安全で完全に管理された方法を提供し、サーバー、スケーリング、インフラストラクチャの心配なしに済ませます。