Öğretici: Azure Static Web Apps'da BirNizi sitesi yayımlama

  • Makale
  • Okumak için 3 dakika

Bu makalede, web uygulaması oluşturmak ve bu web uygulamasına Bir Web uygulaması Azure Static Web Apps. Son olarak, uygulamanın nasıl yerleşik ve yayımlandır olduğu üzerinde denetime sahip GitHub Actions ile ilişkili yeni bir Azure Statik Web Uygulaması elde edilecektir.

Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:

  • Birİleri uygulaması oluşturma
  • Bir Azure Static Web Apps
  • Aşağıdaki uygulamayı Azure'a dağıtma

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

Önkoşullar

Bir Kullanıcı Uygulaması Oluşturma

Satırı Komut Satırı Arabirimi'ne (CLI) sahip birİleri uygulaması oluşturun:

  1. Işletim sisteminize yükleme kılavuzunu izleyin.

  2. Terminal açma

  3. Yeni bir uygulama oluşturmak için Kullanıcı CLI'sini çalıştırın.

    hugo new site static-app

  4. Yeni oluşturulan uygulamaya gidin.

    cd static-app

  5. Git depolarını başlatma.

    git init

  6. Dal'nizin adlı olduğundan emin main olmak.

    git branch -M main

  7. Ardından, bir temayı git altmodül olarak yükleyerek ve sonra Dale yapılandırma dosyasında belirterek siteye bir tema ekleyin.

    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

  8. Değişiklikleri işle.

    git add -A
git commit -m "initial commit"

Uygulamanızı GitHub

Veritabanına bağlanmak için GitHub depoya ihtiyacınız Azure Static Web Apps. Aşağıdaki adımlar, siteniz için nasıl depo oluşturulacaklarını gösterir.

  1. adlı adlı GitHub boş bir kaynak (README oluşturma) https://github.com/new oluşturun.

  2. Depoyu GitHub depoya uzak depo olarak ekleyin. Aşağıdaki komutta yer GitHub yerine kullanıcı adınızı <YOUR_USER_NAME> ekleyin.

    git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app

  3. Yerel GitHub.

    git push --set-upstream origin main

Web uygulamanızı dağıtma

Aşağıdaki adımlar, yeni bir statik site uygulaması oluşturma ve bunu üretim ortamına dağıtmayı gösterir.

Uygulama oluşturma

  1. Azure portalına gidin

  2. Kaynak Oluştur'a seçin

  3. Statik Web Uygulamaları için arama yapın

  4. Yeni bir Static Web Apps

  5. Oluştur’u seçin

  6. Temel Bilgiler sekmesinde aşağıdaki değerleri girin.

    Özellik Değer
    Abonelik Azure aboneliğinizin adı.
    Kaynak grubu my-sonra-group
    Ad veri-statik-uygulama
    Plan türü Ücretsiz
    Api ve Azure İşlevleri ortamları için bölge Size en yakın bölgeyi seçin.
    Kaynak GitHub

  7. Oturum açma bilgileriyle oturum GitHub ve kimlik doğrulaması GitHub.

  8. Aşağıdaki değerleri GitHub girin.

    Özellik Değer
    Kuruluş İstediğiniz kuruluş GitHub seçin.
    Depo aşağıdakini-static-app öğesini seçin.
    Dal main öğesini seçin.

  9. Derleme Ayrıntıları bölümünde, Derleme Ön Ayarları açılan menüsünden Öğesini seçin ve varsayılan değerleri bırakın.

Gözden geçir ve oluştur

  1. Ayrıntıların doğru olduğunu doğrulamak için Gözden Geçir + Oluştur düğmesini seçin.

  2. App Service Statik Web Uygulaması'nın oluşturulmasını başlatmak ve dağıtım için bir GitHub Eylemi sağlamayı seçin.

  3. Dağıtım tamamlandıktan sonra Kaynağına git'e tıklayın.

  4. Kaynak ekranında, dağıtılan uygulamanızı açmak için URL bağlantısına tıklayın. GitHub Eyleminin tamamlanması için bir veya iki dakika beklemesi gerekir.

    Dağıtılan uygulama

Özel Kullanıcı sürümü

Statik Web Uygulaması yapılandırmasını yapılandırmasını içeren bir iş akışı dosyası oluşturulur. bölümünde için bir değer sağlayarak iş akışı dosyasında belirli bir Hangi HUGO_VERSION sürümün adını ve env sonralarını bulabilirsiniz. Aşağıdaki örnek yapılandırmaDale'nin belirli bir sürüme nasıl ayarlay olduğunu gösterir.

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          HUGO_VERSION: 0.58.0

Kaynakları temizleme

Bu uygulamayı kullanmaya devam edemeyecekecekseniz, Azure statik Web uygulaması kaynağını aşağıdaki adımlarla silebilirsiniz:

  1. Azure portalı açın
  2. En üstteki arama çubuğunda, daha önce verdiğiniz adı izleyerek uygulamanızı arayın
  3. Uygulamaya tıklayın
  4. Sil düğmesine tıklayın
  5. Silme eylemini onaylamak için Evet ' e tıklayın

Sonraki adımlar

Özel etki alanı ekleme