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

Azure App Service では、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供しています。Azure App Service provides a highly scalable, self-patching web hosting service. このクイック スタートでは、基本的な HTML+CSS サイトを Azure App Service にデプロイする方法を示します。This quickstart shows how to deploy a basic HTML+CSS site to Azure App Service. このクイック スタートは 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 を使用するUse Azure Cloud Shell

Azure では、ブラウザーを介して使用できる対話型のシェル環境、Azure Cloud Shell がホストされています。Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell では、bashPowerShell のいずれかを使用して Azure サービスを操作できます。Cloud Shell lets you use either bash or PowerShell to work with Azure services. ローカル環境に何もインストールしなくても、Cloud Shell にプレインストールされているコマンドを使用して、この記事のコードを実行できます。You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell を起動するには:To launch Azure Cloud Shell:

オプションOption 例とリンクExample/Link
コード ブロックの右上隅にある [使ってみる] を選択します。Select Try It in the upper-right corner of a code block. [使ってみる] を選択しても、コードは Cloud Shell に自動的にコピーされません。Selecting Try It doesn't automatically copy the code to Cloud Shell. Azure Cloud Shell の [使ってみる] の例
https://shell.azure.com に移動するか、 [Cloud Shell を起動する] ボタンを選択して、ブラウザーで Cloud Shell を開きます。Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. 新しいウィンドウで Cloud Shell を起動するLaunch Cloud Shell in a new window
Azure portal の右上にあるメニュー バーの [Cloud Shell] ボタンを選択します。Select the Cloud Shell button on the top-right menu bar in the Azure portal. Azure Portal の [Cloud Shell] ボタン

Azure Cloud Shell でこの記事のコードを実行するには:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell を起動します。Launch Cloud Shell.

  2. [コピー] ボタンを選択して、コード ブロックをコードにコピーします。Select the Copy button on a code block to copy the code.

  3. Windows と Linux では Ctrl + Shift + V キー、macOS では Cmd + Shift + V キーを使用して、コードを Cloud Shell セッションに貼り付けます。Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.

  4. Enter キーを押して、コードを実行します。Press Enter to run the code.

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

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

mkdir quickstart

cd $HOME/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

ブラウザーで、アプリの URL (http://<app_name>.azurewebsites.net) に移動します。In a browser, go to the 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 アプリの管理Manage your new Azure app

作成した Web アプリを管理するには、Azure portal[App Services] を検索して選択します。To manage the web app you created, in the Azure portal, search for and select App Services.

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

[App Services] ページで、Azure アプリの名前を選択します。On the App Services page, select the name of your Azure app.

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

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