Aracılığıyla paylaş


Sunucusuz API ile Statik web uygulaması oluşturma

Yerel olarak çalıştırmayı ve ardından sunucusuz API ile statik bir web uygulamasını Azure'a dağıtmayı öğrenin. Bu öğreticide en son Azure İşlevleri Node.js programlama modelinin önizleme sürümü kullanılır. Bu makalede Azure İşlevleri önizleme sürümü kullanıldığı için, statik web uygulamasından ayrı bir uygulama olarak dağıtılır.

Şunları nasıl yapacağınızı öğrenin:

  • Azure İşlevi uygulamasıyla statik web uygulamasını (SWA) yerel olarak çalıştırma
  • SWA CLI kullanarak yerel arka uç API'sine yerel olarak ara sunucu ön uç istekleri.
  • Aynı kodu uzaktan dağıtın ve çalıştırın.

Statik web uygulaması CLI tarafından sağlanan ön uç ile arka uç-uç arasındaki ara sunucu aşağıdakileri sağlar:

  • React, içindeki URL, /api/todoAPI için sunucu veya bağlantı noktası numarasını belirtmez. Bu URL'yi kullanan istekler yerel olarak başarılı olur çünkü proxy SWA CLI tarafından yönetilir.
  • Erişim sırasında yerel kimlik doğrulama öykünücüsü /.auth/login/<provider>
  • Yol yönetimi ve yetkilendirme

Bu örnekte kimlik doğrulaması

Bu örnekteki kimlik doğrulaması, Azure Static Web Apps hizmetinden ön uç kullanıcılar için sağlanır:

  • Oturum Açma/Oturumu Kapatma
  • Genel ve özel içerik

Bu örnekteki kaynak kodu

Bu örnekteki kaynak kodu, sunucusuz API ile statik bir web uygulaması oluşturmayı ve dağıtmayı öğrenmek içindir. Kod üretim için tasarlanmamıştır.

Kodda en iyi güvenlik uygulamalarını izlemeyen birkaç yer bulacaksınız. Örneğin, kod tarayıcı konsoluna yazmak için kullanır console.log .

Bir üretim ortamına geçtiğinizde, kuruluşunuz için en iyi güvenlik uygulamalarını ihlal eden tüm kodları gözden geçirip kaldırmanız gerekir.

1. Geliştirme ortamınızı hazırlama

Şu hesapları oluşturun:

Yerel geliştirme bilgisayarınıza aşağıdakileri yükleyin:

2. GitHub'da örnek depo çatalı oluşturma

Dağıtımı GitHub'dan tamamlamak için örnek deponun kendi çatalınız olması gerekir. Çatal işlemi sırasında yalnızca dalını main kopyalamanız gerekir.

Örnek deponun çatalını oluşturun: https://github.com/Azure-Samples/azure-typescript-e2e-apps.

3. Çatallanmış örnek depoyu kopyalayın

  1. Bash terminalinde çatallanmış deponuzu yerel bilgisayarınıza kopyalayın. Özgün örnek depoyu kopyalamayın. Örnek url: https://github.com/YOUR-ACCOUNT-NAME/azure-typescript-e2e-apps

    git clone YOUR-FORKED-REPO-URL
    
  2. Yerel ön uç uygulaması için bağımlılıkları yükleyin:

    cd app-react-vite && npm install 
    
  3. Yerel arka uç uygulaması için bağımlılıkları yükleyin:

    cd ../api-inmemory && npm install && cd ..
    

4. İsteğe bağlı, yerel uygulama derleme ve çalıştırma

Örnek depo, ön uç ve arka uç uygulamalarının çeşitli sürümlerine sahiptir. Aşağıdaki adımlarda ön ucun React 18 (Vite) sürümü ve ve /todo API yolları ile arka ucun Node.js sürümüne sahip /status Azure İşlevi v4 kullanılır.

  1. Örnek uygulamanın kökünden, ön uç ve arka uç uygulamalarını oluşturmak için SWA CLI'yı dosyasıyla ./swa-cli.config.json birlikte kullanın:

    swa build
    

    Çeşitli paketlerin sürümüne ve ortamınıza bağlı olarak oluşabilecek hatalara karşılaşırsanız devam etmeden önce hataları düzeltin. Azure Static Web Apps'e dağıtıma geçmeden önce projenizin başarıyla yerel olarak derlendiğini bilmeniz önemlidir.

  2. Örnek uygulamanın kökünden SWA CLI kullanarak uygulamaları bir ara sunucuyla başlatın.

    swa start
    
  3. Bash terminalinde aşağıdaki satırları gördüğünüzde proje başarıyla başlatıldı.

    [swa] Serving static content:
    [swa]   /workspaces/azure-typescript-e2e-apps/app-react-vite/dist
    [swa] 
    [swa] Serving API:
    [swa]   /workspaces/azure-typescript-e2e-apps/api-inmemory
    [swa] 
    [swa] Azure Static Web Apps emulator started at http://0.0.0.0:4280. Press CTRL+C to exit.
    
  4. Prxied URL'sine bir web tarayıcısı açın. http://localhost:4280 Aşağıdaki sayfayı göreceksiniz:

    Kimlik doğrulamasından önce yerel React uygulamasının ekran görüntüsü.

  5. SWA CLI tarafından sağlanan kimlik doğrulamasını kullanarak oturum açabilirsiniz. Bu işlem, bulut tabanlı Azure Static web uygulamalarında kimlik doğrulamasının sahtesini oluşturur. Ön uç kodu, kullanıcının kimliğini almak için uç noktayı kullanır /.auth/me . Sahte bir kullanıcı adı girin ve kalan alanları değiştirmeyin.

    Yerel React uygulamasının sahte kimlik doğrulama formunun ekran görüntüsü.

  6. Kullanıcının kimliği doğrulandıktan sonra ön uç, API'nin ortam değişkenleri gibi özel bilgileri görüntüler.

    Kimlik doğrulaması tamamlanmış yerel React uygulamasının ekran görüntüsü.

    Bu API için Azure İşlevi v4 uygulama kaynak kodu:

    import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
    
    import { name, version } from '../../package.json';
    function isObject(v) {
        return '[object Object]' === Object.prototype.toString.call(v);
    };
    function sortJson(o){
        if (Array.isArray(o)) {
            return o.sort().map(sortJson);
        } else if (isObject(o)) {
            return Object
                .keys(o)
            .sort()
                .reduce(function(a, k) {
                    a[k] = sortJson(o[k]);
    
                    return a;
                }, {});
        }
        return o;
    }
    
    export async function status(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
        context.log(`Http function processed request for url "${request.url}"`);
    
        const sortedEnv = sortJson(process.env);
    
        return { jsonBody: {
            name,
            version,
            env: sortedEnv,
            requestHeaders: request.headers 
        }};
    };
    
    app.http('status', {
        route: "status",
        methods: ['GET'],
        authLevel: 'anonymous',
        handler: status
    });
    
  7. API'den gelen içeriğin görüntülendiğini görmek için genel ve özel bölümleri genişletin.

5. Yeni bir Azure İşlevleri uygulaması oluşturma

Statik web uygulamasını API ile çalıştırmanın önceki bölümü isteğe bağlıydı. Uygulamayı ve API'yi Azure buluta dağıtmak için makalenin kalan bölümleri gereklidir.

Azure İşlevleri v4 çalışma zamanının önizleme sürümünü kullanmak için yeni bir Azure İşlevleri uygulaması oluşturmanız gerekir. Statik web uygulamanızın ayrıca, prxied ve managed API kullanmak yerine API'ye getirme isteklerinde Azure İşlevleri uygulama URI'sini kullanmak için yeniden oluşturulması ve yeniden dağıtılması gerekir.

  1. Yeni bir Azure İşlevleri uygulaması oluşturmak için web tarayıcısında Azure portalını açın: Yeni uygulama oluşturma

  2. İşlev Uygulamasını oluşturmak için aşağıdaki bilgileri kullanın::

    Sekme:Ayar Değer
    Temel Bilgiler: Abonelik Kullanmak istediğiniz aboneliği seçin.
    Temel Bilgiler: Kaynak Grubu gibi first-static-web-app-with-apiyeni bir kaynak grubu oluşturun. Ad, uygulamanın genel URL'sinde kullanılmaz. Kaynak grupları, ilgili Azure kaynaklarını gruplandırmanıza ve yönetmenize yardımcı olur.
    Temel bilgiler: Örnek ayrıntıları: İşlev Uygulaması adı Sonuna 3 rastgele karakter eklenmiş gibi swa-api genel olarak benzersiz bir ad girin; örneğin swa-api-123.
    Temel bilgiler: Örnek ayrıntıları: Kod veya kapsayıcı Code öğesini seçin.
    Temel bilgiler: Örnek ayrıntıları: Çalışma zamanı yığını Node.js öğesini seçin.
    Temel bilgiler: Örnek ayrıntıları: Çalışma zamanı yığını 18LTS öğesini seçin.
    Temel Bilgiler: İşletim sistemi Linux öğesini seçin.
    Temel Bilgiler: Barındırma Consumption öğesini seçin.
    Depolama: Depolama hesabı Bunu değiştirmeyin. İşlev olaylarına yardımcı olmak için yeni bir Azure Depolama hesabı oluşturulur.
    Hiçbir şeyi değiştirme.
    İzleme: Application Insights: Application Insights'ın etkinleştirilmesi Yes öğesini seçin. Sağlanan varsayılan adı değiştirmeyin.
    Dağıtım: GitHub Actions Ayarları: Sürekli dağıtım Enable öğesini seçin.
    Dağıtım: GitHub hesabı GitHub hesabınızı seçin.
    Dağıtım: Kuruluş Örnek depoyu çatallarken kullandığınız GitHub hesabınızı seçin.
    Dağıtım: Depo Çatallanmış deponuzun adını azure-typescript-e2e-appsseçin.
    Dağıtım: Dal main öğesini seçin.
    Etiketler Hiçbir şeyi değiştirme.
    Gözden geçirme ve oluşturma Create öğesini seçin.

    Adım, çatallanmış deponuza bir GitHub yaml iş akışı dosyası ekler.

  3. Kaynak oluşturulduğunda düğmeyi Go to resource seçin.

  4. Ayarlar - Yapılandırma'ya tıklayın ve ardından Azure İşlevi Node.js v4 çalışma zamanı için adı AzureWebJobsFeatureFlags ve değeriyle EnableWorkerIndexingbir> yapılandırma ayarı ekleyin.

  5. Ayarları kaydetmek için Kaydet’i seçin.

  6. Bash terminalinde git kullanarak yeni yaml iş akışı dosyasını GitHub çatallı deponuzdan yerel bilgisayarınıza çekin.

    git pull origin main
    
  7. Visual Studio Code'da, konumunda ./.github/workflows/bulunan yeni yaml iş akışı dosyasını açın.

  8. Sizin için sağlanan varsayılan iş akışı dosyası, işlev kaynak kodunun deponun kökünde olduğunu ve depodaki tek uygulama olduğunu varsayar, ancak bu örnekte böyle bir durum söz konusu değildir. Bunu düzeltmek için dosyayı düzenleyin. Düzenlenecek satırlar aşağıdaki yaml bloğunda vurgulanır ve aşağıda açıklanmıştır:

    # Docs for the Azure Web Apps Deploy action: https://github.com/azure/functions-action
    # More GitHub Actions for Azure: https://github.com/Azure/actions
    
    # Deploy Azure Functions Node.js v4 runtime
    # with api-inmemory subdir
    
    name: Azure Function App - api-inmemory
    
    on:
      push:
        branches:
          - main
        paths:
          - 'api-inmemory/**'
      workflow_dispatch:
    
    env:
      AZURE_FUNCTIONAPP_PACKAGE_PATH: 'api-inmemory' # set this to the path to your web app project, defaults to the repository root
      NODE_VERSION: '18.x' # Azure Functions v4 runtime requires 18
      VERBOSE: true # For debugging
    
    jobs:
      build-and-deploy:
        runs-on: ubuntu-latest
        steps:
          - name: 'Checkout GitHub Action'
            uses: actions/checkout@v2
    
          - name: Setup Node ${{ env.NODE_VERSION }} Environment
            uses: actions/setup-node@v1
            with:
              node-version: ${{ env.NODE_VERSION }}
    
          - name: 'Resolve Project Dependencies Using Npm'
            shell: bash
            run: |
              pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}'
              npm install
              npm run build --if-present
              npm run test --if-present
              popd
          - name: 'Upload artifact for deployment job' # For debugging
            uses: actions/upload-artifact@v3
            with:
              name: azure-function-v4-app
              path: |
                ${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}
                !${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}/node_modules
                !${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}/dist          
          - name: 'Run Azure Functions Action'
            uses: Azure/functions-action@v1
            id: fa
            with:
              app-name: 'swa-api' # change this to your Azure Function app name
              slot-name: 'Production'
              package: ${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}
              publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_123 }}
              scm-do-build-during-deployment: false
              enable-oryx-build: false
    
    Özellik değişikliği Purpose
    name Çatalınızın GitHub eylemler listesinde kolayca bulabilmek için adı kısaltın.
    paths Dağıtımı yalnızca Azure İşlevleri API kodu değiştiğinde çalışacak şekilde sınırlamak için yollar bölümünü ekleyin. İş akışı dosyasını düzenlerken dağıtımı el ile tetikleyebilirsiniz.
    AZURE_FUNCTIONAPP_PACKAGE_PATH Kaynak kodu için bir alt dizin kullanılırken bu alt dizin yolu ve adı olmalıdır.
    VERBOSE Bu ayar derleme ve dağıtma işleminde hata ayıklamak için yararlıdır.
    adlı adım Upload artifact for deployment job Bu adım indirilebilir bir yapıt oluşturur. Bu, Azure İşlevinize tam olarak hangi dosyaların dağıtıldığında hata ayıklaması yaparken yararlıdır.

    Upload artifact for deployment job isteğe bağlıdır. Azure İşlevleri dağıtılan dosyaları anlamak ve hatalarını ayıklamak veya bu dosyaları ayrı bir ortamda kullanmak için kullanılır.

  9. Dosyayı kaydedin ve git ile ekleyin, işleyin ve GitHub'a geri gönderin:

    git add .
    git commit -m "fix the workflow for a subdir"
    git push origin main
    
  10. Bir tarayıcıdan, çatalınızın eylemler alanında GitHub'da iş akışını yeniden çalıştırın.

    GitHub eylemini yeniden çalıştırmayı gösteren, Çatallanmış GitHub deposunun ekran görüntüsü.

  11. Devam etmeden önce eylemin başarıyla tamamlanmasını bekleyin.

  12. Web tarayıcısında, uygulamanın başarıyla dağıtıldığından emin olmak için işlev uygulamanızın dış API uç noktasını kullanın.

    https://YOUR-FUNCTION-APP-NAME.azurewebsites.net/api/todo
    

    Bellek içi veriler için döndürülen JSON sonucu:

    {
        "1": "Say hello"
    }
    
  13. İşlevinizin URL'sini not edin. Sonraki bölümde buna ihtiyacınız olacak.

  14. Azure İşlev uygulamanızın bulutta çalıştığını biliyorsunuz. Şimdi API'yi kullanmak için bulutta statik web uygulamanızı oluşturmanız gerekir.

6. Yeni bir Azure Statik web uygulaması oluşturma

Bu oluşturma işlemi aynı çatallanmış GitHub örnek deposunu Azure'a dağıtır. Dağıtımı yalnızca ön uç uygulamasını kullanacak şekilde yapılandırabilirsiniz.

  1. Azure portalını açın ve Azure hesabınızla oturum açın: Azure portalı.

  2. Oluşturma adımlarını tamamlamak için aşağıdaki bilgileri kullanın:

    İstem Ayar
    Abonelik Kullanmak istediğiniz aboneliği seçin.
    Kaynak Grubu Kaynak grubu için gibi first-static-web-appyeni bir seçin Create new ve girin. Ad, uygulamanın genel URL'sinde kullanılmaz. Kaynak grupları, tek bir proje için kullanılan kaynakları gruplandırmanıza yardımcı olur.
    Barındırma planı türü Free seçeneğini belirleyin
    Azure İşlevleri ve hazırlama ayrıntıları Varsayılanı değiştirmeyin. İşlev API'sini statik web uygulaması içinde dağıtmazsınız.
    Dağıtım ayrıntıları - kaynak GitHub seçeneğini belirleyin
    Dağıtım ayrıntıları - GitHub Gerekirse GitHub'da oturum açın.
    Dağıtım ayrıntıları - Kuruluş GitHub hesabınızı seçin.
    Dağıtım ayrıntıları - Depo adlı azure-typescript-e2e-appsçatallanmış depoyu seçin.
    Dağıtım ayrıntıları - Dal Dalı main seçin.
    Derleme ayrıntıları - Derleme Sunumları Custom öğesini seçin.
    Derleme ayrıntıları - Uygulama konumu /app-react-vite girin.
    Derleme ayrıntıları - Api konumu Boş bırakın
    Derleme ayrıntıları - Çıkış konumu Ön uç çıkış dizininin konumunu girin. dist
  3. Gözden Geçir + oluştur’u ve sonra da Oluştur’u seçin.

  4. Kaynak oluşturulduğunda düğmeyi Go to resource seçin.

  5. Genel Bakış sayfasında, statik web uygulamanızın URL'sini not alın. Sonraki bölümde Azure İşlevi'nin CORS ayarını yaparken buna ihtiyacınız vardır.

  6. Oluşturma işlemi, çatallanmış GitHub deponuzda bir GitHub yaml iş akışı dosyası oluşturur. Aşağıdaki komutla bu değişikliği aşağı çekin:

    git pull origin main
    
  7. adresinde ./.github/workflows/azure-static-web-apps-*.yml bulunan GitHub eylemi, ön uç uygulamasını oluşturmak ve dağıtmakla sorumludur. Dosyayı düzenleyerek bulut tabanlı arka uç API'si URL'si için bir ortam değişkeni ekleyin. Düzenlenecek satırlar aşağıdaki yaml bloğunda vurgulanır ve yaml bloğunun altında açıklanmıştır.

    name: Azure Static Web Apps CI/CD
    
    on:
      push:
        branches:
          - main
        paths:
          - 'app-react-vite/**'
      pull_request:
        types: [opened, synchronize, reopened, closed]
        branches:
          - main
        paths:
          - 'app-react-vite/**'      
      workflow_dispatch:
    
    jobs:
      build_and_deploy_job:
        if: github.event_name == 'push' || github.event_name == 'workflow_dispatch' || (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_ORANGE_DUNE_123 }}
              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 your app requirements. ######
              # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
              app_location: "/app-react-vite" # App source code path
              api_location: "" # Api source code path - optional
              output_location: "dist" # Built app content directory - optional
              ###### End of Repository/Build Configurations ######
            env: 
              VITE_BACKEND_URI: https://swa-api-123.azurewebsites.net
              VITE_CLOUD_ENV: production
    
      close_pull_request_job:
        if: github.event_name == 'pull_request' && github.event.action == 'closed'
        runs-on: ubuntu-latest
        name: Close Pull Request Job
        steps:
          - name: Close Pull Request
            id: closepullrequest
            uses: Azure/static-web-apps-deploy@v1
            with:
              azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_123 }}
              action: "close"
    
    Özellik değişikliği Purpose
    paths Dağıtımı yalnızca Azure İşlevleri API kodu değiştiğinde çalışacak şekilde sınırlamak için yollar bölümünü ekleyin. İş akışı dosyasını düzenlerken dağıtımı el ile tetikleyebilirsiniz.
    workflow_dispatch Yalnızca dağıtım işlemini öğrenirken ve Vite derlemesindeki sorunlarda hata ayıklarken ekleyin.workflow_dispatch Bu makalenin ötesinde bu kaynak koduna devam ettiğinizde bu satırı kaldırın.
    if ... || github.event_name == 'workflow_dispatch' workflow_dispatch Olayı yalnızca dağıtım işlemini öğrenirken ve Vite derlemesindeki sorunlarda hata ayıklarken derleme oluşturmak için izin verilen şekilde ekleyin.
    env Azure İşlevi API'sinin URL'sini Vite ile statik derlemeye eklemek için gereken ortam değişkenlerini ekleyin. VITE_BACKEND_URL, Azure İşlevi uygulamanızın URL'sidir. VITE_CLOUD_ENV, VITE_BACKEND_URL URL'sinin ne zaman kullanılacağını belirten bir parametredir. İstenmeyen yan etkilere sahip olduğundan bu örnek için NODE_ENV kullanmayın.
  8. Dosyayı kaydedin ve git ile ekleyin, işleyin ve GitHub'a geri gönderin:

    git add .
    git commit -m "fix the workflow for a subdir"
    git push origin main
    
  9. Tarayıcıdan, statik web uygulamanız için çatalınızın eylemler alanında GitHub'da iş akışını yeniden çalıştırın.

  10. Ön uç uygulamanız Azure'a dağıtılır. Şimdi Azure İşlevi uygulamasını statik web uygulamanızdan GELEN CORS isteklerine izin verecek şekilde yapılandırmanız gerekir.

7. Azure İşlev uygulamanız için CORS'yi yapılandırma

Yönetilen İşlev uygulaması yerine ayrı bir Azure İşlevi uygulaması kullanırken CORS'yi statik web uygulamanızdan gelen isteklere izin verecek şekilde yapılandırmanız gerekir.

  1. Azure portalında Azure İşlevi uygulamanızı açın.
  2. API -> CORS bölümünde, statik web uygulamanızın URL'sini izin verilen kaynaklar listesine ekleyin.

8. Statik web uygulamanızı test edin

  1. Tarayıcıda statik web uygulamanızı açın.
  2. Oturum açmak, genel ve özel bilgileri görüntülemek ve yeniden oturumu kapatmak için uygulamayla etkileşim kurun.

9. Bu makale serisinde kullanılan tüm kaynakları temizleyin

Bu makale serisinde oluşturulan tüm kaynakları temizleyin.

  1. Azure portalında, statik web uygulamasını ve işlev uygulamasını silen kaynak grubunuzu silin.
  2. GitHub portalında çatallanmış deponuzu silin.

Sorun giderme

Bu örnek, bilinen sorunların ve çözümlerin listesini tutar. Sorununuz listede yoksa lütfen bir sorun açın.

Statik web uygulaması ve işlev uygulaması genel URL'leri

Statik web uygulamanızın URL'sini ve işlev uygulamanızın URL'sini her kaynağın Genel Bakış sayfasında Her zaman Azure portalında bulabilirsiniz. Bu URL'ler varsayılan olarak geneldir.

Sonraki adımlar