Aracılığıyla paylaş

Web uygulamanızı Azure Static Web Apps'e dağıtma

  • Makale

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

  1. Bir terminal penceresi açın.

  1. 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.

    Oluşturulan vanilya web uygulamasının ekran görüntüsü.

  1. 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.

    Oluşturulan angular web uygulamasının ekran görüntüsü.

  1. 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.

    Oluşturulan react web uygulamasının ekran görüntüsü.

  1. 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.

    Oluşturulan Vue web uygulamasının ekran görüntüsü.

  1. 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.

  1. 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.

  2. 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>"

  3. 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.

  4. 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

  1. 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.

  2. 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.

  3. 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

  4. Uygulamanızı dağıtım için oluşturun.

    npx swa build

  5. 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.

  1. 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.

Dağıt komutunun ekran görüntüsü.

Ç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.

Sonraki adımlar

Kimlik doğrulaması ekleme

İlgili içerik