Ćwiczenie: tworzenie statycznej aplikacji internetowej HTML przy użyciu usługi Azure Cloud Shell

  • 15 min

Bezpłatna piaskownica umożliwia tworzenie zasobów w podzestawie regionów globalnych platformy Azure. Podczas tworzenia zasobów wybierz region z poniższej listy:

  • Zachodnie stany USA 2
  • South Central US
  • Central US
  • East US
  • West Europe
  • Southeast Asia
  • Japonia Wschodnia
  • Brazylia Południowa
  • Australia Południowo-Wschodnia
  • Indie Centralne

W tym ćwiczeniu wdrożysz podstawową witrynę HTML+CSS w usłudze aplikacja systemu Azure przy użyciu polecenia interfejsu wiersza polecenia az webapp up platformy Azure. Następnie zaktualizujesz kod i ponownie wdrożysz go przy użyciu tego samego polecenia.

Polecenie az webapp up ułatwia tworzenie i aktualizowanie aplikacji internetowych. Po wykonaniu wykonuje następujące akcje:

  • Utwórz domyślną grupę zasobów, jeśli nie zostanie określona.
  • Utwórz domyślny plan usługi aplikacji.
  • Utwórz aplikację z określoną nazwą.
  • Spakuj pliki wdrożenia z bieżącego katalogu roboczego do aplikacji internetowej.

Ważne

Aby ukończyć to ćwiczenie, należy przełączyć usługę Cloud Shell na wersję klasyczną. Po zakończeniu ładowania usługi Cloud Shell wybierz pozycję Ustawienia z menu bezpośrednio w górnej części usługi Cloud Shell, a następnie wybierz pozycję Przejdź do wersji klasycznej.

Pobieranie przykładowej aplikacji

W tej sekcji użyjesz piaskownicy, aby pobrać przykładową aplikację i ustawić zmienne, aby ułatwić wprowadzanie niektórych poleceń.

  1. W piaskownicy utwórz katalog, a następnie przejdź do niego.

    mkdir htmlapp

cd htmlapp

  2. Uruchom następujące git polecenie, aby sklonować przykładowe repozytorium aplikacji do katalogu htmlapp .

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

  3. Ustaw zmienne do przechowywania nazw grup zasobów i aplikacji, uruchamiając następujące polecenia.

    resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM

Tworzenie aplikacji internetowej

  1. Przejdź do katalogu, który zawiera przykładowy kod, i uruchom polecenie az webapp up.

    cd html-docs-hello-world

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

    Uruchomienie tego polecenia może potrwać kilka minut. Gdy polecenie jest uruchomione, wyświetla informacje podobne do poniższego przykładu.

    {
"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. >
}

  2. Otwórz nową kartę w przeglądarce i przejdź do adresu URL aplikacji (https://<myAppName>.azurewebsites.net) i sprawdź, czy aplikacja jest uruchomiona — zanotuj tytuł w górnej części strony. Pozostaw otwartą przeglądarkę w aplikacji w następnej sekcji.

    Uwaga

    Możesz skopiować <myAppName>.azurewebsites.net dane wyjściowe poprzedniego polecenia lub wybrać adres URL w danych wyjściowych, aby otworzyć witrynę na nowej karcie.

Aktualizowanie i ponowne wdrażanie aplikacji

  1. W usłudze Cloud Shell wpisz code index.html polecenie , aby otworzyć edytor. W tagu nagłówka <h1> zmień aplikacja systemu Azure Service — przykładową statyczną witrynę HTML na zaktualizowaną usługę aplikacja systemu Azure lub na dowolne inne, które chcesz.

  2. Użyj poleceń ctrl-s , aby zapisać i ctrl-q , aby zakończyć.

  3. Ponownie wdróż aplikację przy użyciu tego samego az webapp up polecenia, którego użyto wcześniej.

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

    Napiwek

    Możesz użyć strzałki w górę na klawiaturze, aby przewinąć poprzednie polecenia.

  4. Po zakończeniu wdrażania wróć do przeglądarki z kroku 2 w sekcji "Tworzenie aplikacji internetowej" i odśwież stronę.