Bagikan melalui

Mulai cepat: Membangun situs statis pertama Anda menggunakan Azure CLI

  • Artikel

Sebarkan ke Azure

Azure Static Web Apps menerbitkan situs web ke produksi dengan membangun aplikasi dari repositori kode.

Dalam mulai cepat ini, Anda akan menyebarkan aplikasi web ke Azure Static Web Apps menggunakan Azure CLI.

Prasyarat

Menentukan variabel lingkungan

Langkah pertama dalam mulai cepat ini adalah menentukan variabel lingkungan.

export RANDOM_ID="$(openssl rand -hex 3)"
export MY_RESOURCE_GROUP_NAME="myStaticWebAppResourceGroup$RANDOM_ID"
export REGION=EastUS2
export MY_STATIC_WEB_APP_NAME="myStaticWebApp$RANDOM_ID"

Membuat repositori (opsional)

(Opsional) Artikel ini menggunakan repositori templat GitHub sebagai cara lain untuk memudahkan Anda memulai. Templat ini menampilkan aplikasi pemula untuk disebarkan ke Azure Static Web Apps.

  1. Navigasi ke lokasi berikut untuk membuat repositori baru: https://github.com/staticwebdev/vanilla-basic/generate.
  2. Beri nama repositori my-first-static-web-appAnda .

Catatan

Azure Static Web Apps memerlukan setidaknya satu file HTML untuk membuat aplikasi web. Repositori yang Anda buat dalam langkah ini menyertakan satu index.html file.

  1. Pilih Buat repositori.

Menyebarkan Aplikasi Web Statis

Sebarkan aplikasi sebagai aplikasi web statis dari Azure CLI.

  1. Buat grup sumber daya.
az group create \
  --name $MY_RESOURCE_GROUP_NAME \
  --location $REGION

Hasil:

{
  "id": "/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/my-swa-group",
  "location": "eastus2",
  "managedBy": null,
  "name": "my-swa-group",
  "properties": {
    "provisioningState": "Succeeded"
  },
  "tags": null,
  "type": "Microsoft.Resources/resourceGroups"
}
  1. Sebarkan aplikasi web statis baru dari repositori Anda.
az staticwebapp create \
    --name $MY_STATIC_WEB_APP_NAME \
    --resource-group $MY_RESOURCE_GROUP_NAME \
    --location $REGION

Ada dua aspek untuk menyebarkan aplikasi statik. Operasi pertama membuat sumber daya Azure yang mendasar yang membentuk aplikasi Anda. Yang kedua adalah alur kerja yang membangun dan menerbitkan aplikasi Anda.

Sebelum Anda dapat membuka situs statis baru Anda, build penyebaran harus terlebih dahulu selesai berjalan.

  1. Kembali ke jendela konsol Anda dan jalankan perintah berikut untuk mencantumkan URL situs web.
export MY_STATIC_WEB_APP_URL=$(az staticwebapp show --name  $MY_STATIC_WEB_APP_NAME --resource-group $MY_RESOURCE_GROUP_NAME --query "defaultHostname" -o tsv)

runtime="1 minute";
endtime=$(date -ud "$runtime" +%s);
while [[ $(date -u +%s) -le $endtime ]]; do
    if curl -I -s $MY_STATIC_WEB_APP_URL > /dev/null ; then 
        curl -L -s $MY_STATIC_WEB_APP_URL 2> /dev/null | head -n 9
        break
    else 
        sleep 10
    fi;
done

Hasil:

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8 />
<meta name=viewport content="width=device-width, initial-scale=1.0" />
<meta http-equiv=X-UA-Compatible content="IE=edge" />
<title>Azure Static Web Apps - Welcome</title>
<link rel="shortcut icon" href=https://appservice.azureedge.net/images/static-apps/v3/favicon.svg type=image/x-icon />
<link rel=stylesheet href=https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css crossorigin=anonymous />

echo "You can now visit your web server at https://$MY_STATIC_WEB_APP_URL"

Menggunakan templat GitHub

Anda berhasil menyebarkan aplikasi web statis ke Azure Static Web Apps menggunakan Azure CLI. Sekarang setelah Anda memiliki pemahaman dasar tentang cara menyebarkan aplikasi web statis, Anda dapat menjelajahi fitur dan fungsionalitas Azure Static Web Apps yang lebih canggih.

Jika Anda ingin menggunakan repositori templat GitHub, ikuti langkah-langkah berikut:

https://github.com/login/device Buka dan masukkan kode yang Anda dapatkan dari GitHub untuk mengaktifkan dan mengambil token akses pribadi GitHub Anda.

  1. Buka https://github.com/login/device.
  2. Masukkan kode pengguna seperti yang ditampilkan pesan konsol Anda.
  3. Pilih Continue.
  4. Pilih Authorize AzureAppServiceCLI.

Lihat Situs Web melalui Git

  1. Saat Anda mendapatkan URL repositori saat menjalankan skrip, salin URL repositori dan tempelkan ke browser Anda.

  2. Pilih tab Actions.

    Pada titik ini, Azure membuat sumber daya untuk mendukung aplikasi web statis Anda. Tunggu hingga ikon di samping alur kerja yang sedang berjalan berubah menjadi tanda centang dengan latar belakang hijau. Operasi ini mungkin perlu waktu beberapa menit untuk dijalankan.

  3. Setelah ikon berhasil muncul, alur kerja selesai dan Anda dapat kembali ke jendela konsol Anda.

  4. Jalankan perintah berikut untuk mengkueri URL situs web Anda.

   az staticwebapp show \
     --name $MY_STATIC_WEB_APP_NAME \
     --query "defaultHostname"
  1. Salin URL ke browser Anda untuk membuka situs web Anda.

Membersihkan sumber daya (opsional)

Jika Anda tidak akan terus menggunakan aplikasi ini, hapus grup sumber daya dan aplikasi web statis menggunakan perintah az group delete .

Konten terkait

Langkah berikutnya

Menambahkan API