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. Azure CLI を使って Web アプリを作成し、Git を使用して Web アプリにサンプルの HTML コンテンツをデプロイします。You create the web app using the Azure CLI, and you use Git to deploy sample HTML content to the web app.

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

以下の手順は、Mac、Windows、または Linux コンピューターを使用して実行できます。You can follow the steps below using a Mac, Windows, or Linux machine. 前提条件のインストールを終えてから、以降の手順を完了するまでに約 5 分かかります。Once the prerequisites are installed, it takes about five minutes to complete the steps.

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

前提条件Prerequisites

このクイック スタートを完了するには、以下が必要です。To complete this quickstart:

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

ターミナル ウィンドウで、次のコマンドを実行して、サンプル アプリのリポジトリをローカル コンピューターに複製します。In a terminal window, run the following command to clone the sample app repository to your local machine.

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

サンプル コードが含まれているディレクトリに移動します。Change to the directory that contains the sample code.

cd html-docs-hello-world

HTML を表示するView the HTML

サンプル HTML が含まれているディレクトリに移動します。Navigate to the directory that contains the sample HTML. ブラウザーで index.html ファイルを開きます。Open the index.html file in your browser.

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

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 で az webapp deployment user set コマンドを使用して、デプロイ資格情報を作成します。In the Cloud Shell, create deployment credentials with the az webapp deployment user set command. FTP と、Web アプリへのローカル Git のデプロイには、デプロイ ユーザーが必要です。This deployment user is required for FTP and local Git deployment to a web app. ユーザー名とパスワードはアカウント レベルです。The user name and password are account level. "Azure サブスクリプションの資格情報とは異なります。"They are different from your Azure subscription credentials.

次の例では、(かっこも含めて) <username><password> を新しいユーザー名とパスワードで置き換えます。In the following example, replace <username> and <password> (including brackets) with a new user name and password. ユーザー名は Azure 内で一意になっている必要があります。The user name must be unique within Azure. パスワードは長さが 8 文字以上で、文字、数字、記号のうち 2 つを含む必要があります。The password must be at least eight characters long, with two of the following three elements: letters, numbers, symbols.

az webapp deployment user set --user-name <username> --password <password>

パスワードが null と表示された状態で JSON 出力が返されます。You should get a JSON output, with the password shown as null. 'Conflict'. Details: 409 エラーが発生した場合は、ユーザー名を変更します。If you get a 'Conflict'. Details: 409 error, change the username. 'Bad Request'. Details: 400 エラーが発生した場合は、より強力なパスワードを使用します。If you get a 'Bad Request'. Details: 400 error, use a stronger password.

このデプロイ ユーザーの作成は 1 回だけ実行する必要があります。すべての Azure デプロイでこのユーザーを使用できます。You create this deployment user only once; you can use it for all your Azure deployments.

注意

ユーザー名とパスワードを記録します。Record the user name and password. 後で Web アプリをデプロイするときに必要になります。You need them to deploy the web app later.

リソース グループの作成Create a resource group

リソース グループとは、Web アプリ、データベース、ストレージ アカウントなどの Azure リソースのデプロイと管理に使用する論理コンテナーです。A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. たとえば、後から簡単な手順で一度にリソース グループ全体を削除することもできます。For example, you can choose to delete the entire resource group in one simple step later.

Cloud Shell で az group create コマンドを使用して、リソース グループを作成します。In the Cloud Shell, create a resource group with the az group create command. 次の例では、myResourceGroup という名前のリソース グループを "西ヨーロッパ" の場所に作成します。The following example creates a resource group named myResourceGroup in the West Europe location. Free レベルの App Service がサポートされているすべての場所を表示するには、az appservice list-locations --sku FREE コマンドを実行します。To see all supported locations for App Service in Free tier, run the az appservice list-locations --sku FREE command.

az group create --name myResourceGroup --location "West Europe"

通常は、現在地付近の地域にリソース グループおよびリソースを作成します。You generally create your resource group and the resources in a region near you.

コマンドが完了すると、リソース グループのプロパティが JSON 出力に表示されます。When the command finishes, a JSON output shows you the resource group properties.

Azure App Service プランの作成Create an Azure App Service plan

Cloud Shell で az appservice plan create コマンドを使用して、App Service プランを作成します。In the Cloud Shell, create an App Service plan with the az appservice plan create command.

次の例では、Free 価格レベルの myAppServicePlan という名前の App Service プランを作成します。The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

App Service プランが作成されると、Azure CLI によって、次の例のような情報が表示されます。When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

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

Cloud Shell で、myAppServicePlan App Service プランに Web アプリを作成します。In the Cloud Shell, create a web app in the myAppServicePlan App Service plan. これは、az webapp create コマンドを使用して実行できます。You can do it by using the az webapp create command. 次の例では、<app_name> をグローバルに一意のアプリ名に置き換えてください (有効な文字は a-z0-9-)。In the following example, replace <app_name> with a globally unique app name (valid characters are a-z, 0-9, and -).

az webapp create --name <app_name> --resource-group myResourceGroup --plan myAppServicePlan --deployment-local-git

Web アプリが作成されると、Azure CLI によって次の例のような情報が表示されます。When the web app has been created, the Azure CLI shows information similar to the following example:

Local git is configured with url of 'https://<username>@<app_name>.scm.azurewebsites.net/<app_name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.azurewebsites.net",
  "deploymentLocalGitUrl": "https://<username>@<app_name>.scm.azurewebsites.net/<app_name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

Git デプロイが有効な、空の Web アプリが作成されました。You’ve created an empty web app, with git deployment enabled.

注意

Git リモートの URL は deploymentLocalGitUrl プロパティに https://<username>@<app_name>.scm.azurewebsites.net/<app_name>.git 形式で出力されます。The URL of the Git remote is shown in the deploymentLocalGitUrl property, with the format https://<username>@<app_name>.scm.azurewebsites.net/<app_name>.git. この URL は後で必要になるので保存しておいてください。Save this URL as you need it later.

新しく作成された Web アプリに移動します。Browse to the newly created web app.

http://<app_name>.azurewebsites.net

新しい Web アプリは次のようになります。Here is what your new web app should look like:

空の Web アプリ ページ

Git から Azure へのプッシュPush to Azure from Git

"ローカル ターミナル ウィンドウ" で、ローカル Git リポジトリに Azure リモートを追加します。Back in the local terminal window, add an Azure remote to your local Git repository. <deploymentLocalGitUrl-from-create-step> を、Web アプリの作成に関するセクションで保存した Git リモートの URL に置き換えます。Replace <deploymentLocalGitUrl-from-create-step> with the URL of the Git remote that you saved from Create a web app.

git remote add azure <deploymentLocalGitUrl-from-create-step>

アプリをデプロイするために、次のコマンドで Azure リモートにプッシュします。Push to the Azure remote to deploy your app with the following command. Git Credential Manager によって資格情報の入力を求めるメッセージが表示されたら、Azure Portal へのログインに使用する資格情報ではなく、デプロイ ユーザーの構成に関するセクションで作成した資格情報を入力してください。When prompted for credentials by Git Credential Manager, make sure that you enter the credentials you created in Configure a deployment user, not the credentials you use to log in to the Azure portal.

git push azure master

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

Counting objects: 13, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (11/11), done.
Writing objects: 100% (13/13), 2.07 KiB | 0 bytes/s, done.
Total 13 (delta 2), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id 'cc39b1e4cb'.
remote: Generating deployment script.
remote: Generating deployment script for Web Site
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling Basic Web Site deployment.
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Deleting file: 'hostingstart.html'
remote: Copying file: '.gitignore'
remote: Copying file: 'LICENSE'
remote: Copying file: 'README.md'
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://<app_name>.scm.azurewebsites.net/<app_name>.git
 * [new branch]      master -> master

アプリの参照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

テキスト エディターで index.html ファイルを開き、マークアップに変更を加えます。Open the index.html file in a text editor, and make a change to the markup. たとえば、H1 の見出しを "Azure App Service - Sample Static HTML Site" から "Azure App Service" に変更します。For example, change the H1 heading from "Azure App Service - Sample Static HTML Site" to just "Azure App Service`.

ローカル ターミナル ウィンドウで、変更を Git にコミットし、コード変更を Azure にプッシュします。In the local terminal window, commit your changes in Git, and then push the code changes to Azure.

git commit -am "updated HTML"
git push azure master

デプロイが完了したら、ブラウザーを更新して変更を表示します。Once deployment has completed, refresh your browser to see the changes.

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

新しい 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

リソースをクリーンアップするには、次のコマンドを実行します。To clean up your resources, run the following command:

az group delete --name myResourceGroup

次の手順Next steps