演習: Azure Cloud Shell を使用して静的な HTML の Web アプリを作成する

15 分

無料のサンドボックスを使用すると、Azure グローバルリージョンのサブセットにリソースを作成できます。リソースを作成するときは、次のリストからリージョンを選択します。

米国西部 2
米国中南部
米国中部
米国東部
西ヨーロッパ

東南アジア
東日本
ブラジル南部
オーストラリア南東部
インド中部

この演習では、Azure CLI az webapp up コマンドを使用し、基本的な HTML+CSS サイトを Azure App Service にデプロイします。次に、同じコマンドを使用して、コードを更新し、再デプロイします。

az webapp up コマンドを使用すると、Web アプリの作成と更新を簡単に行うことができます。実行すると、次のアクションが実行されます。

既定のリソースグループが指定されていない場合はそれを作成します。
既定の App Service プランを作成する。
指定された名前でアプリを作成する。
現在の作業ディレクトリから Web アプリにファイルを zip してデプロイする。

重要

この演習を完了するには、Cloud Shell をクラシックバージョンに切り替える必要があります。 Cloud Shell の読み込みが完了したら、Cloud Shell の上部にあるメニューから [設定] を選択してから、[クラシックバージョンに移動] を選択します。

サンプルアプリをダウンロードする

このセクションでは、サンドボックスを使用してサンプルアプリをダウンロードし、一部のコマンドが入力しやすくなるように変数を設定します。

サンドボックスでディレクトリを作成し、そこに移動します。
```
mkdir htmlapp

cd htmlapp
```
次の git コマンドを実行して、サンプルアプリのリポジトリを htmlapp ディレクトリにクローンします。
```
git clone https://github.com/Azure-Samples/html-docs-hello-world.git
```
次のコマンドを実行し、リソースグループとアプリ名を保持する変数を設定します。
```
resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM
```

Web アプリの作成

サンプルコードが含まれているディレクトリを変更し、az webapp up コマンドを実行します。

cd html-docs-hello-world

az webapp up -g $resourceGroup -n $appName --html

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

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

ブラウザーで新しいタブを開き、アプリの URL (https://<myAppName>.azurewebsites.net) に移動し、アプリが実行されているのを確認します。ページの上部にあるタイトルをメモします。次のセクションでは、アプリでブラウザーを開いたままにしてください。

注意

前のコマンドの出力から <myAppName>.azurewebsites.net をコピーするか、出力で URL を選択して新しいタブでサイトを開くことができます。

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

Cloud Shell で、「code index.html」と入力してエディターを開きます。 <h1> 見出しタグで、Azure App Service - Sample Static HTML Site を「Azure App Service 更新」か、他の任意のものに変更します。
コマンド Ctrl+s キーを使用して保存し、Ctrl+q キーで終了します。
前に使用した同じ az webapp up コマンドを使用してアプリを再デプロイします。
```
az webapp up -g $resourceGroup -n $appName --html 
```
ヒント

キーボードの上方向キーを使用して、前のコマンドをスクロールできます。
デプロイが完了したら、「Web アプリを作成する」セクションの手順 2 からブラウザーに戻り、ページを更新します。