演習: 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 してデプロイする。

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

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

サンドボックスでディレクトリを作成し、そこに移動します。
```
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 からブラウザーに戻り、ページを更新します。