Azure で静的 HTML Web アプリを作成するCreate a static HTML web app in Azure

Azure Web Apps では、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供しています。Azure Web Apps provides a highly scalable, self-patching web hosting service. このクイック スタートでは、基本的な HTML+CSS サイトを Azure Web Apps にデプロイする方法を示します。This quickstart shows how to deploy a basic HTML+CSS site to Azure Web Apps. このクイック スタートは Cloud Shell で行いますが、これらのコマンドは Azure CLI を使用してローカルで実行することもできます。You'll complete this quickstart in Cloud Shell, but you can also run these commands locally with Azure CLI.

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

Azure サブスクリプションをお持ちでない場合は、開始する前に 無料アカウント を作成してください。If you don't have an Azure subscription, create a free account before you begin.

Azure Cloud Shell を開くOpen Azure Cloud Shell

Azure Cloud Shell は無料のインタラクティブ シェルです。この記事の手順は、Azure Cloud Shell を使って実行することができます。Azure Cloud Shell is a free, interactive shell that you can use to run the steps in this article. Cloud Shell には一般的な Azure ツールが事前にインストールされており、アカウントで使用できるように構成されています。Common Azure tools are preinstalled and configured in Cloud Shell for you to use with your account. [コピー] ボタンを選択してコードをコピーし、Cloud Shell に貼り付けて Enter キーを押すだけで、コードを実行することができます。Just select the Copy button to copy the code, paste it in Cloud Shell, and then press Enter to run it. Cloud Shell は、次のようにいくつかの方法で開くことができます。There are a few ways to open Cloud Shell:

コード ブロックの右上隅にある [使ってみる] を選択します。Select Try It in the upper-right corner of a code block. この記事の Cloud Shell
ブラウザーで Cloud Shell を開きます。Open Cloud Shell in your browser. https://shell.azure.com/bash
Azure Portal の右上隅にあるメニューの [Cloud Shell] ボタンを選択します。Select the Cloud Shell button on the menu in the upper-right corner of the Azure portal. ポータルの Cloud Shell

Cloud Shell の Web アプリ拡張機能をインストールするInstall web app extension for Cloud Shell

このクイック スタートを完了するには、Web アプリ拡張機能を追加する必要があります。To complete this quickstart, you need to add the az web app extension. この拡張機能が既にインストールされている場合は、最新バージョンに更新してください。If the extension is already installed, you should update it to the latest version. Web アプリ拡張機能を更新するには、「az extension update -n webapp」と入力します。To update the web app extension, type az extension update -n webapp.

Web アプリ拡張機能をインストールするには、次のコマンドを実行します。To install the webapp extension, run the following command:

az extension add --name webapp

拡張機能がインストールされると、Cloud Shell に次の例の情報が表示されます。When the extension has been installed, the Cloud Shell shows information to the following example:

The installed extension 'webapp' is in preview.

サンプルのダウンロードDownload the sample

Cloud Shell で、クイックスタートのディレクトリを作成し、それに変更します。In the Cloud Shell, create a quickstart directory and then change to it.

mkdir quickstart

cd quickstart

次に、以下のコマンドを実行して、サンプル アプリのリポジトリをクイックスタートのディレクトリに複製します。Next, run the following command to clone the sample app repository to your quickstart directory.

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

Web アプリを作成するCreate a web app

サンプル コードが含まれているディレクトリに移動し、az webapp up コマンドを実行します。Change to the directory that contains the sample code and run the az webapp up command.

次の例で、<app_name> を一意のアプリ名に置き換えます。In the following example, replace <app_name> with a unique app name.

cd html-docs-hello-world

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

az webapp up コマンドは、次の処理を実行します。The az webapp up command does the following actions:

  • 既定のリソース グループを作成する。Create a default resource group.

  • 既定の App Service プランを作成する。Create a default app service plan.

  • 指定された名前でアプリを作成する。Create an app with the specified name.

  • 現在の作業ディレクトリから Web アプリにファイルを zip してデプロイする。Zip deploy files from the current working directory to the web app.

このコマンドの実行には、数分かかる場合があります。This command may take a few minutes to run. 実行中、次の例のような情報が表示されます。While running, it displays information similar to the following example:

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

resourceGroup の値を書き留めておきます。Make a note of the resourceGroup value. これは、「リソースのクリーンアップ」セクションで必要になります。You need it for the clean up resources section.

アプリの参照Browse to the app

ブラウザーで、Azure Web アプリの URL (http://<app_name>.azurewebsites.net) に移動します。In a browser, go to the Azure web app URL: http://<app_name>.azurewebsites.net.

ページは、Azure App Service Web アプリとして実行されています。The page is running as an Azure App Service web app.

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

お疲れさまでした。Congratulations! App Service に初めての HTML アプリをデプロイしました。You've deployed your first HTML app to App Service.

アプリを更新して再デプロイするUpdate and redeploy the app

Cloud Shell で、「nano index.html」と入力して nano テキスト エディターを開きます。In the Cloud Shell, type nano index.html to open the nano text editor. 次に示すように、<h1> 見出しタグで "Azure App Service - Sample Static HTML Site" から "Azure App Service" に変更します。In the <h1> heading tag, change "Azure App Service - Sample Static HTML Site" to "Azure App Service", as shown below.

Nano index.html

変更内容を保存し、nano を終了します。Save your changes and exit nano. コマンド ^O を使用して保存し、^X を使用して終了します。Use the command ^O to save and ^X to exit.

同じ az webapp up コマンドを使用して、アプリを再デプロイします。You'll now redeploy the app with the same az webapp up command.

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

デプロイが完了したら、「アプリの参照」の手順で開いたブラウザー ウィンドウに戻り、ページを更新します。Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and refresh the page.

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

新しい Azure Web アプリを管理するManage your new Azure web app

Azure Portal に移動し、作成した Web アプリを管理します。Go to the Azure portal to manage the web app you created.

左側のメニューで [App Services] をクリックした後、Azure Web アプリの名前をクリックします。From the left menu, click App Services, and then click the name of your Azure web app.

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

Web アプリの [概要] ページを確認します。You see your web app's Overview page. ここでは、参照、停止、開始、再開、削除のような基本的な管理タスクを行うことができます。Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

Azure Portal の App Service ブレード

左側のメニューは、アプリを構成するためのさまざまなページを示しています。The left menu provides different pages for configuring your app.

リソースのクリーンアップClean up resources

前の手順では、リソース グループ内に Azure リソースを作成しました。In the preceding steps, you created Azure resources in a resource group. これらのリソースが将来必要になると想定していない場合、Cloud Shell で次のコマンドを実行して、リソース グループを削除します。If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell. Web アプリを作成する」の手順で、リソース グループ名が自動的に生成されたことを思い出してください。Remember that the resource group name was automatically generated for you in the create a web app step.

az group delete --name appsvc_rg_Windows_westeurope

このコマンドの実行には、少し時間がかかる場合があります。This command may take a minute to run.

次の手順Next steps