Hızlı Başlangıç: Azure CLI kullanarak ilk statik sitenizi oluşturma
Azure Static Web Apps, bir kod deposundan uygulama oluşturarak web sitelerini üretim ortamında yayımlar.
Bu hızlı başlangıçta, Azure CLI kullanarak Azure Statik Web uygulamalarına bir web uygulaması dağıtacaksınız.
Önkoşullar
- GitHub hesabı.
- Azure hesabı.
- Azure aboneliğiniz yoksa ücretsiz deneme hesabı oluşturabilirsiniz.
- Azure CLI yüklü (sürüm 2.29.0 veya üzeri).
- Git kurulumu.
Ortam değişkenlerini tanımlama
Bu hızlı başlangıcın ilk adımı ortam değişkenlerini tanımlamaktır.
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"
Depo oluşturma (isteğe bağlı)
(İsteğe bağlı) Bu makalede, kullanmaya başlamanızı kolaylaştırmak için başka bir yol olarak GitHub şablon deposu kullanılmaktadır. Şablonda Azure Static Web Apps'e dağıtılacak bir başlangıç uygulaması bulunur.
- Yeni bir depo oluşturmak için aşağıdaki konuma gidin: https://github.com/staticwebdev/vanilla-basic/generate.
- Deponuza adını verin
my-first-static-web-app
.
Not
Azure Static Web Apps web uygulaması oluşturmak için en az bir HTML dosyası gerektirir. Bu adımda oluşturduğunuz depo tek index.html
bir dosya içerir.
- Create repository (Depo oluştur) öğesine tıklayın.
Statik Web Uygulaması Dağıtma
Uygulamayı Azure CLI'dan statik bir web uygulaması olarak dağıtın.
- Kaynak grubu oluşturun.
az group create \
--name $MY_RESOURCE_GROUP_NAME \
--location $REGION
Sonuçlar:
{
"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"
}
- Deponuzdan yeni bir statik web uygulaması dağıtın.
az staticwebapp create \
--name $MY_STATIC_WEB_APP_NAME \
--resource-group $MY_RESOURCE_GROUP_NAME \
--location $REGION
Statik uygulama dağıtmanın iki yönü vardır. İlk işlem, uygulamanızı oluşturan temel Azure kaynaklarını oluşturur. İkincisi, uygulamanızı derleyen ve yayımlayan bir iş akışıdır.
Yeni statik sitenize gidebilmeniz için önce dağıtım derlemesinin çalıştırılmasını tamamlamanız gerekir.
- Konsol pencerenize dönün ve web sitesinin URL'sini listelemek için aşağıdaki komutu çalıştırın.
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
Sonuçlar:
<!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"
GitHub şablonu kullanma
Azure CLI kullanarak Azure Static Web Apps'e başarıyla statik bir web uygulaması dağıttınız. Artık statik web uygulamasının nasıl dağıtılacağı hakkında temel bilgilere sahip olduğunuz için, Azure Static Web Apps'in daha gelişmiş özelliklerini ve işlevselliğini keşfedebilirsiniz.
GitHub şablon deposunu kullanmak istiyorsanız şu adımları izleyin:
https://github.com/login/device GitHub kişisel erişim belirtecinizi etkinleştirmek ve almak için GitHub'dan aldığınız kodu girin.
- Şuraya git: https://github.com/login/device .
- Konsolunuzun iletisinin görüntülendiği kullanıcı kodunu girin.
Continue
öğesini seçin.Authorize AzureAppServiceCLI
öğesini seçin.
Web Sitesini Git aracılığıyla görüntüleme
Betiği çalıştırırken depo URL'sini aldığınızda, depo URL'sini kopyalayın ve tarayıcınıza yapıştırın.
Actions
sekmesini seçin.Bu noktada Azure, statik web uygulamanızı desteklemek için kaynaklar oluşturmuştur. Çalışan iş akışının yanındaki simge yeşil arka planlı bir onay işaretine dönüşene kadar bekleyin. Bu işlemin yürütülmesi birkaç dakika sürebilir.
Başarı simgesi görüntülendiğinde iş akışı tamamlanır ve konsol pencerenize geri dönebilirsiniz.
Web sitenizin URL'sini sorgulamak için aşağıdaki komutu çalıştırın.
az staticwebapp show \
--name $MY_STATIC_WEB_APP_NAME \
--query "defaultHostname"
- Web sitenize gitmek için URL'yi tarayıcınıza kopyalayın.
Kaynakları temizleme (isteğe bağlı)
Bu uygulamayı kullanmaya devam etmeyecekseniz az group delete komutunu kullanarak kaynak grubunu ve statik web uygulamasını silin .