Web uygulamanızı Azure Static Web Apps'e dağıtma
Bu makalede, istediğiniz çerçeveye sahip yeni bir web uygulaması oluşturacak, yerel olarak çalıştıracak ve ardından Azure Static Web Apps'e dağıtacaksınız.
Önkoşullar
Bu öğreticiyi tamamlamak için aşağıdakiler gerekir:
Kaynak | Açıklama |
---|---|
Azure Aboneliği | Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz. |
Node.js | Sürüm 20.0 veya üzerini yükleyin. |
Azure CLI | Sürüm 2.6x veya üzerini yükleyin. |
Ayrıca bir metin düzenleyicisine de ihtiyacınız vardır. Azure ile çalışmak için Visual Studio Code önerilir.
Bu makalede oluşturduğunuz uygulamayı istediğiniz platformda çalıştırabilirsiniz: Linux, macOS, Windows veya Linux için Windows Alt Sistemi.
Web uygulamanızı oluşturma
- Bir terminal penceresi açın.
Kodunuz için uygun bir dizin seçin ve aşağıdaki komutları çalıştırın.
npm create vite@latest swa-vanilla-demo -- --template=vanilla cd swa-vanilla-demo npm install npm run dev
Bu komutları çalıştırdığınızda geliştirme sunucusu web sitenizin URL'sini yazdırır. Bağlantıyı seçerek varsayılan tarayıcınızda açın.
Kodunuz için uygun bir dizin seçin ve aşağıdaki komutları çalıştırın.
npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults cd swa-angular-demo npm start
Bu komutları çalıştırdığınızda geliştirme sunucusu web sitenizin URL'sini yazdırır. Bağlantıyı seçerek varsayılan tarayıcınızda açın.
Kodunuz için uygun bir dizin seçin ve aşağıdaki komutları çalıştırın.
npm create vite@latest swa-react-demo -- --template react cd swa-react-demo npm install npm run dev
Bu komutları çalıştırdığınızda geliştirme sunucusu web sitenizin URL'sini yazdırır. Bağlantıyı seçerek varsayılan tarayıcınızda açın.
Kodunuz için uygun bir dizin seçin ve aşağıdaki komutları çalıştırın.
npm create vite@latest swa-vue-demo -- --template vue cd swa-vue-demo npm install npm run dev
Bu komutları çalıştırdığınızda geliştirme sunucusu web sitenizin URL'sini yazdırır. Bağlantıyı seçerek varsayılan tarayıcınızda açın.
- Geliştirme sunucusunu durdurmak için Cmd/Ctrl+C'yi seçin.
Azure'da statik web uygulaması oluşturma
Azure portalını, Azure CLI'yı, Azure PowerShell'i veya Visual Studio Code'u (Azure Static Web Apps uzantısıyla) kullanarak statik bir web uygulaması oluşturabilirsiniz. Bu öğreticide Azure CLI kullanılır.
Azure CLI'da oturum açın:
az login
Varsayılan olarak, bu komut işlemi tamamlamak için bir tarayıcı açar. Azure CLI, bu yöntem ortamınızda çalışmazsa oturum açmak için çeşitli yöntemleri destekler.
Birden çok aboneliğiniz varsa bir abonelik seçmeniz gerekebilir. Geçerli aboneliğinizi aşağıdaki komutu kullanarak görüntüleyebilirsiniz:
az account show
Bir abonelik seçmek için komutunu çalıştırabilirsiniz
az account set
.az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"
Kaynak grubu oluşturun.
Kaynak grupları, Azure kaynaklarını birlikte gruplandırmak için kullanılır.
az group create -n swa-tutorial -l centralus --query "properties.provisioningState"
-n
parametresi site adına-l
, parametre ise Azure konum adına başvurur. komutu ile--query "properties.provisioningState"
sona erer, bu nedenle komut yalnızca bir başarı veya hata iletisi döndürür.Yeni oluşturduğunuz kaynak grubunuzda statik bir web uygulaması oluşturun.
az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"
-n
parametresi site adına, parametre ise-g
Azure kaynak grubunun adına başvurur. Önceki adımda kullandığınız kaynak grubu adını belirttiğinizden emin olun. Statik web uygulamanız genel olarak dağıtıldığı için konum, uygulamanızı nasıl dağıttığınızda önemli değildir.Komut, web uygulamanızın URL'sini döndürecek şekilde yapılandırılır. Dağıtılan web uygulamanızı görüntülemek için değeri terminal pencerenizden tarayıcınıza kopyalayabilirsiniz.
Dağıtım için yapılandırma
Uygulama kodunuza aşağıdaki içeriklere sahip bir
staticwebapp.config.json
dosya ekleyin:{ "navigationFallback": { "rewrite": "/index.html" } }
Geri dönüş yolu tanımlamak, sitenizin
index.html
etki alanında yapılan istekler için dosyayı sunucu yapmasına olanak tanır.Kullanıyorsanız bu dosyayı kaynak kodu denetim sisteminize (git gibi) denetleyin.
Projenize Azure Static Web Apps (SWA) CLI'sini yükleyin.
npm install -D @azure/static-web-apps-cli
SWA CLI, sitenizi buluta dağıtmadan önce yerel olarak geliştirmenize ve test etmenize yardımcı olur.
Projeniz için yeni bir dosya oluşturun ve adını verin
swa-cli.config.json
.Dosyada
swa-cli.config.json
sitenizin nasıl derlenip dağıtılacağı açıklanır.Bu dosya oluşturulduktan sonra, komutunu kullanarak
npx swa init
içeriğini oluşturabilirsiniz.npx swa init --yes
Uygulamanızı dağıtım için oluşturun.
npx swa build
Azure'da oturum açmak için SWA CLI'yi kullanın.
npx swa login --resource-group swa-tutorial --app-name swa-demo-site
Önceki bölümde oluşturduğunuz kaynak grubu adını ve statik web uygulaması adını kullanın. Oturum açmaya çalışırken, gerekirse işlemi tamamlamak için bir tarayıcı açılır.
Uyarı
Angular v17 ve üzeri dağıtılabilir dosyaları, seçebileceğiniz çıkış yolunun alt dizinine yerleştirin. SWA CLI, dizinin belirli konumunu bilmiyor. Aşağıdaki adımlarda bu yolun nasıl doğru ayarlanacağı gösterilmektedir.
Projenizde oluşturulan index.html dosyasını dist/swa-angular-demo/browser klasöründe bulun.
Ortam değişkenini
SWA_CLI_OUTPUT_LOCATION
index.html dosyasını içeren dizine ayarlayın:export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
Sitenizi Azure’a dağıtma
Kodunuzu statik web uygulamanıza dağıtın:
npx swa deploy --env production
Uygulamanın dağıtılması birkaç dakika sürebilir. İşlem tamamlandıktan sonra sitenizin URL'si görüntülenir.
Çoğu sistemde, sitenin URL'sini seçerek varsayılan tarayıcınızda açabilirsiniz.
Kaynakları temizleme (isteğe bağlı)
Diğer öğreticilere devam ediyorsanız Azure kaynak grubunu ve kaynaklarını kaldırın:
az group delete -n swa-tutorial
Bir kaynak grubunu kaldırdığınızda, içerdiği tüm kaynakları silersiniz. Bu eylemi geri alamazsınız.