Azure で静的 HTML Web アプリを作成する

  • [アーティクル]

Azure App Service は、非常にスケーラブルな、自己適用型の Web ホスティング サービスを提供します。 このクイック スタートでは、基本的な HTML+CSS サイトを Azure App Service にデプロイする方法を示します。 このクイック スタートは Cloud Shell で行いますが、これらのコマンドは Azure CLI を使用してローカルで実行することもできます。

注意

サーバーレス環境での静的 HTML ファイルのホストについては、Static Web Apps に関する記事を参照してください。

サンプル アプリのホーム ページ

Azure サブスクリプションをお持ちでない場合は、開始する前に Azure 無料アカウントを作成してください。

前提条件

  • Azure Cloud Shell で Bash 環境を使用します。 詳細については、「Azure Cloud Shell の Bash のクイックスタート」を参照してください。

  • CLI リファレンス コマンドをローカルで実行する場合、Azure CLI をインストールします。 Windows または macOS で実行している場合は、Docker コンテナーで Azure CLI を実行することを検討してください。 詳細については、「Docker コンテナーで Azure CLI を実行する方法」を参照してください。

    • ローカル インストールを使用する場合は、az login コマンドを使用して Azure CLI にサインインします。 認証プロセスを完了するには、ターミナルに表示される手順に従います。 その他のサインイン オプションについては、Azure CLI でのサインインに関するページを参照してください。

    • 初回使用時にインストールを求められたら、Azure CLI 拡張機能をインストールします。 拡張機能の詳細については、Azure CLI で拡張機能を使用する方法に関するページを参照してください。

    • az version を実行し、インストールされているバージョンおよび依存ライブラリを検索します。 最新バージョンにアップグレードするには、az upgrade を実行します。

サンプルのダウンロード

Cloud Shell で、クイックスタートのディレクトリを作成し、それに変更します。

mkdir quickstart

cd $HOME/quickstart

次に、以下のコマンドを実行して、サンプル アプリのリポジトリをクイックスタートのディレクトリに複製します。

git clone https://github.com/Azure-Samples/html-docs-hello-world.git

Web アプリを作成する

サンプル コードが含まれているディレクトリに移動し、az webapp up コマンドを実行します。 次の例の <app_name> は一意のアプリ名に置き換えます。 静的コンテンツは --html フラグによって示されます。

cd html-docs-hello-world

az webapp up --location westeurope --name <app_name> --html

注意

Linux ベースの App Service インスタンスで静的コンテンツをホストする場合は、--runtime と --os-type フラグを使用して PHP をランタイムとして構成します。

az webapp up --location westeurope --name <app_name> --runtime "PHP:8.1" --os-type linux

PHP コンテナーには、静的 HTML コンテンツをホストするのに適した Web サーバーが含まれています。

az webapp up コマンドは、次の処理を実行します。

  • 既定のリソース グループを作成する。

  • 既定の App Service プランを作成する。

  • 指定された名前でアプリを作成する。

  • 現在の作業ディレクトリから Web アプリにファイルを zip してデプロイする。

このコマンドの実行には、数分かかる場合があります。 実行中、次の例のような情報が表示されます。

{
  "app_url": "https://&lt;app_name&gt;.azurewebsites.net",
  "location": "westeurope",
  "name": "&lt;app_name&gt;",
  "os": "Windows",
  "resourcegroup": "appsvc_rg_Windows_westeurope",
  "serverfarm": "appsvc_asp_Windows_westeurope",
  "sku": "FREE",
  "src_path": "/home/&lt;username&gt;/quickstart/html-docs-hello-world ",
  &lt; JSON data removed for brevity. &gt;
}

resourceGroup の値を書き留めておきます。 これは、「リソースのクリーンアップ」セクションで必要になります。

アプリの参照

ブラウザーで、アプリの URL (http://<app_name>.azurewebsites.net) に移動します。

ページは、Azure App Service Web アプリとして実行されています。

サンプル アプリのホーム ページ

おめでとうございます。 App Service に初めての HTML アプリをデプロイしました。

アプリを更新して再デプロイする

Cloud Shell で、「nano index.html」と入力して nano テキスト エディターを開きます。 次に示すように、<h1> 見出しタグで "Azure App Service - Sample Static HTML Site" から "Azure App Service" に変更します。

Nano index.html

変更内容を保存し、nano を終了します。 コマンド ^O を使用して保存し、^X を使用して終了します。

同じ az webapp up コマンドを使用して、アプリを再デプロイします。

az webapp up --location westeurope --name <app_name> --html

デプロイが完了したら、「アプリの参照」の手順で開いたブラウザー ウィンドウに戻り、ページを更新します。

更新されたサンプル アプリのホーム ページ

新しい Azure アプリの管理

作成した Web アプリを管理するには、Azure portal で [App Services] を検索して選択します。

Azure portal で [App Services] を選択する

[App Services] ページで、Azure アプリの名前を選択します。

Azure アプリへのポータル ナビゲーション

Web アプリの [概要] ページを確認します。 ここでは、参照、停止、開始、再開、削除のような基本的な管理タスクを行うことができます。

Azure Portal の App Service ブレード

左側のメニューは、アプリを構成するためのさまざまなページを示しています。

リソースをクリーンアップする

前の手順では、リソース グループ内に Azure リソースを作成しました。 これらのリソースが将来必要になると想定していない場合、Cloud Shell で次のコマンドを実行して、リソース グループを削除します。 「Web アプリを作成する」の手順で、リソース グループ名が自動的に生成されたことを思い出してください。

az group delete --name appsvc_rg_Windows_westeurope

このコマンドの実行には、少し時間がかかる場合があります。

次のステップ

カスタム ドメインをマップする