Share via

Membuat aplikasi web Statis dengan API tanpa server

  • Artikel

Pelajari cara menjalankan secara lokal lalu menyebarkan aplikasi web statis dengan API tanpa server ke Azure. Tutorial ini menggunakan versi pratinjau dari model pemrograman Azure Functions Node.js terbaru. Karena artikel ini menggunakan versi pratinjau Azure Functions, artikel ini disebarkan sebagai aplikasi terpisah dari aplikasi web statis.

Pelajari cara:

  • Menjalankan aplikasi web statis (SWA) secara lokal dengan aplikasi Azure Function
  • Proksi permintaan front-end secara lokal ke API back-end lokal menggunakan SWA CLI.
  • Sebarkan dan jalankan kode yang sama dari jarak jauh.

Proksi antara front-end dan backend-endis yang disediakan oleh CLI aplikasi web Statis menyediakan:

  • URL di React, /api/todo, tidak menentukan server atau nomor port untuk API. Permintaan menggunakan URL ini berhasil secara lokal karena SWA CLI mengelola proxy untuk Anda.
  • Emulator autentikasi lokal saat mengakses /.auth/login/<provider>
  • Manajemen dan otorisasi rute

Autentikasi dalam sampel ini

Autentikasi dalam sampel ini disediakan untuk pengguna front-end dari layanan Azure Static Web Apps:

  • Masuk/Keluar
  • Konten publik dan privat

Kode sumber dalam sampel ini

Kode sumber dalam sampel ini dimaksudkan untuk mempelajari cara membangun dan menyebarkan aplikasi web statis dengan API tanpa server. Kode tidak dimaksudkan untuk produksi.

Anda akan menemukan beberapa tempat dalam kode yang tidak mengikuti praktik keamanan terbaik. Misalnya, kode menggunakan untuk menulis ke konsol console.log browser.

Saat pindah ke lingkungan produksi, Anda harus meninjau dan menghapus kode apa pun, yang melanggar praktik terbaik keamanan untuk organisasi Anda.

1. Siapkan lingkungan pengembangan Anda

Buat akun berikut:

Instal yang berikut ini di komputer pengembangan lokal Anda:

2. Fork repositori sampel di GitHub

Anda harus memiliki fork repositori sampel Anda sendiri untuk menyelesaikan penyebaran dari GitHub. Selama proses fork, Anda hanya perlu menyalin main cabang.

Fork repositori sampel: https://github.com/Azure-Samples/azure-typescript-e2e-apps.

3. Kloning repositori sampel fork

  1. Di terminal bash, kloning repositori fork Anda ke komputer lokal Anda. Jangan mengkloning repositori sampel asli. Contoh URL adalah https://github.com/YOUR-ACCOUNT-NAME/azure-typescript-e2e-apps

    git clone YOUR-FORKED-REPO-URL

  2. Instal dependensi untuk aplikasi front-end lokal:

    cd app-react-vite && npm install

  3. Instal dependensi untuk aplikasi back-end lokal:

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

4. Opsional, bangun dan jalankan aplikasi lokal

Repositori sampel memiliki beberapa versi aplikasi front-end dan backend. Langkah-langkah berikut menggunakan versi React 18 (Vite) dari front-end dan Azure Function v4 dengan versi Node.js dari back-end dengan /status rute API dan /todo .

  1. Dari akar aplikasi sampel, gunakan SWA CLI dengan ./swa-cli.config.json file untuk membangun aplikasi front-end dan back-end:

    swa build

    Jika Anda menemukan kesalahan, yang mungkin terjadi tergantung pada versi berbagai paket dan lingkungan Anda, perbaiki kesalahan tersebut sebelum melanjutkan. Penting untuk diketahui bahwa proyek Anda berhasil dibangun secara lokal sebelum beralih ke penyebaran ke Azure Static Web Apps.

  2. Dari akar aplikasi sampel, gunakan SWA CLI untuk memulai aplikasi dengan proksi.

    swa start

  3. Saat Anda melihat baris berikut di terminal bash, proyek berhasil dimulai.

    [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. Buka browser web ke URL yang diproksikan, http://localhost:4280. Anda akan melihat halaman berikut:

    Screenshot of local React app prior to authentication.

  5. Anda dapat masuk menggunakan autentikasi yang disediakan oleh SWA CLI. Proses ini meniru autentikasi di aplikasi web Azure Static berbasis cloud. Kode front-end menggunakan /.auth/me titik akhir untuk mendapatkan identitas pengguna. Masukkan nama pengguna palsu apa pun dan jangan ubah bidang lainnya.

    Screenshot of local React app's mock authentication form.

  6. Setelah pengguna diautentikasi, front-end menampilkan informasi privat seperti variabel lingkungan API.

    Screenshot of local React app with authentication complete.

    Kode sumber aplikasi Azure Function v4 untuk API ini adalah:

    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. Perluas bagian publik dan privat untuk melihat konten dari API ditampilkan.

5. Buat aplikasi Azure Functions baru

Bagian sebelumnya dari menjalankan aplikasi web statis dengan API bersifat opsional. Bagian artikel yang tersisa diperlukan untuk menyebarkan aplikasi dan API ke cloud Azure.

Untuk menggunakan versi pratinjau runtime Azure Functions v4, Anda perlu membuat aplikasi Azure Functions baru. Aplikasi web statis Anda juga perlu dibangun kembali dan disebarkan ulang untuk menggunakan URI aplikasi Azure Functions dalam permintaan Ambil ke API alih-alih menggunakan API yang diproksi dan dikelola.

  1. Di browser web, buka portal Azure untuk membuat aplikasi Azure Functions baru: Membuat aplikasi baru

  2. Gunakan informasi berikut untuk membuat Aplikasi Fungsi::

    Tab:Pengaturan Value
    Dasar-dasar: Langganan Pilih langganan yang ingin Anda gunakan.
    Dasar-dasar: Grup Sumber Daya Buat grup sumber daya baru seperti first-static-web-app-with-api. Nama tidak digunakan di URL publik aplikasi. Grup sumber daya membantu Anda mengelompokkan dan mengelola sumber daya Azure terkait.
    Dasar-dasar: Detail instans: Nama Aplikasi Fungsi Masukkan nama unik global seperti swa-api dengan 3 karakter acak yang ditambahkan di akhir, seperti swa-api-123.
    Dasar-dasar: Detail instans: Kode atau kontainer Pilih Code.
    Dasar-dasar: Detail instans: Tumpukan runtime Pilih Node.js.
    Dasar-dasar: Detail instans: Tumpukan runtime Pilih 18LTS.
    Dasar-dasar: Sistem operasi Pilih Linux.
    Dasar-dasar: Hosting Pilih Consumption.
    Penyimpanan: Akun penyimpanan Jangan mengubah ini. Akun Azure Storage baru dibuat untuk membantu peristiwa fungsi.
    Jaringan Jangan mengubah apapun.
    Pemantauan: Application Insights: Mengaktifkan Application Insights Pilih Yes. Jangan ubah nama default yang disediakan.
    Penyebaran: GitHub Actions Pengaturan: Penyebaran berkelanjutan Pilih Enable.
    Penyebaran: Akun GitHub Pilih akun GitHub Anda.
    Penyebaran: Organisasi Pilih akun GitHub Anda, yang Anda gunakan saat membuat fork repositori sampel.
    Penyebaran: Repositori Pilih nama repositori fork Anda, azure-typescript-e2e-apps.
    Penyebaran: Cabang Pilih main.
    Tag Jangan mengubah apapun.
    Tinjau + buat Pilih Create.

    Langkah ini menambahkan file alur kerja yaml GitHub ke repositori fork Anda.

  3. Saat sumber daya dibuat, pilih tombol Go to resource .

  4. Pilih Pengaturan -> Konfigurasi lalu tambahkan pengaturan konfigurasi untuk runtime Azure Function Node.js v4 dengan nama AzureWebJobsFeatureFlags dan nilai EnableWorkerIndexing.

  5. Pilih Simpan untuk menyimpan pengaturan.

  6. Di terminal bash, gunakan git untuk menurunkan file alur kerja yaml baru dari repositori fork GitHub Anda ke komputer lokal Anda.

    git pull origin main

  7. Di Visual Studio Code, buka file alur kerja yaml baru yang terletak di ./.github/workflows/.

  8. File alur kerja default yang disediakan untuk Anda mengasumsikan kode sumber fungsi berada di akar repositori dan merupakan satu-satunya aplikasi di repositori tetapi bukan itu masalahnya dengan sampel ini. Untuk memperbaikinya, edit file. Baris yang akan diedit disorot dalam blok yaml berikut dan dijelaskan di bawah ini:

    # 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
    Perubahan properti Tujuan
    name Persingkat nama sehingga Anda dapat dengan mudah menemukannya di daftar tindakan GitHub fork Anda.
    paths Tambahkan bagian jalur untuk membatasi penyebaran agar berjalan hanya saat kode API Azure Functions berubah. Saat mengedit file alur kerja, Anda dapat memicu penyebaran secara manual.
    AZURE_FUNCTIONAPP_PACKAGE_PATH Saat menggunakan subdirektori untuk kode sumber, ini harus menjadi jalur dan nama subdirektori tersebut.
    VERBOSE Pengaturan ini berguna untuk men-debug proses build dan penyebaran.
    langkah bernama Upload artifact for deployment job Langkah ini membuat artefak yang dapat diunduh. Ini berguna saat menelusuri kesalahan persis file apa yang disebarkan ke Azure Function Anda.

    bersifat Upload artifact for deployment job opsional. Ini digunakan untuk memahami dan men-debug file apa yang disebarkan ke Azure Functions atau untuk menggunakan file tersebut di lingkungan terpisah.

  9. Simpan file lalu tambahkan, terapkan, dan dorong kembali ke GitHub dengan git:

    git add .
git commit -m "fix the workflow for a subdir"
git push origin main

  10. Dari browser, jalankan ulang alur kerja di GitHub di area tindakan fork Anda.

    Screenshot of GitHub forked repository, showing how to rerun a GitHub action.

  11. Tunggu hingga tindakan berhasil diselesaikan sebelum melanjutkan.

  12. Di browser web, gunakan titik akhir API eksternal aplikasi fungsi Anda untuk memverifikasi aplikasi berhasil disebarkan.

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

    Hasil JSON yang dikembalikan untuk data dalam memori adalah:

    {
    "1": "Say hello"
}

  13. Catat URL fungsi Anda. Anda memerlukannya di bagian berikutnya.

  14. Anda tahu bahwa aplikasi Azure Function Anda berfungsi di cloud. Sekarang Anda perlu membuat aplikasi web statis di cloud untuk menggunakan API.

6. Buat aplikasi web Statis Azure baru

Proses pembuatan ini menyebarkan repositori sampel GitHub fork yang sama ke Azure. Anda mengonfigurasi penyebaran untuk hanya menggunakan aplikasi front-end.

  1. Buka portal Azure dan masuk dengan akun Azure Anda: portal Azure.

  2. Gunakan informasi berikut untuk menyelesaikan langkah-langkah pembuatan:

    Prompt Pengaturan
    Langganan Pilih langganan yang ingin Anda gunakan.
    Grup Sumber Daya Pilih Create new dan masukkan baru untuk grup sumber daya seperti first-static-web-app. Nama tidak digunakan di URL publik aplikasi. Grup sumber daya membantu Anda mengelompokkan sumber daya yang digunakan untuk satu proyek.
    Jenis paket Hosting Pilih Free
    Azure Functions dan detail pementasan Jangan ubah default. Anda tidak menyebarkan Api Fungsi dalam aplikasi web statis.
    Detail penyebaran - sumber Pilih GitHub
    Detail penyebaran - GitHub Masuk ke GitHub jika perlu.
    Detail penyebaran - Organisasi Pilih akun GitHub Anda.
    Detail penyebaran - Repositori Pilih repositori fork bernama azure-typescript-e2e-apps.
    Detail penyebaran - Cabang Pilih cabang main .
    Detail build - Build Presents Pilih Custom.
    Detail build - Lokasi aplikasi Memasuki /app-react-vite.
    Detail build - Lokasi api Biarkan kosong
    Detail build - Lokasi output Masukkan lokasi direktori output front-end, dist.

  3. Pilih Tinjau + buat, lalu pilih Buat.

  4. Saat sumber daya dibuat, pilih tombol Go to resource .

  5. Pada halaman Gambaran Umum , catat URL aplikasi web statis Anda. Anda memerlukannya di bagian berikutnya saat mengatur pengaturan CORS Azure Function.

  6. Proses pembuatan membuat file alur kerja yaml GitHub di repositori GitHub fork Anda. Tarik perubahan tersebut ke bawah dengan perintah berikut:

    git pull origin main

  7. Tindakan GitHub yang ditemukan di ./.github/workflows/azure-static-web-apps-*.yml bertanggung jawab untuk membangun dan menyebarkan aplikasi front-end. Edit file untuk menambahkan variabel lingkungan untuk URL API back-end berbasis cloud. Baris yang akan diedit disorot di blok yaml berikut dan dijelaskan di bawah blok yaml.

    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"
    Perubahan properti Tujuan
    paths Tambahkan bagian jalur untuk membatasi penyebaran agar berjalan hanya saat kode API Azure Functions berubah. Saat mengedit file alur kerja, Anda dapat memicu penyebaran secara manual.
    workflow_dispatch Tambahkan workflow_dispatchhanya saat mempelajari proses penyebaran dan men-debug masalah apa pun di build Vite. Hapus baris ini, ketika Anda melanjutkan kode sumber ini di luar artikel ini.
    if ... || github.event_name == 'workflow_dispatch' workflow_dispatch Sertakan peristiwa sebagaimana diizinkan untuk menghasilkan build saja sambil mempelajari proses penyebaran dan men-debug masalah apa pun dalam build Vite.
    env Tambahkan variabel lingkungan yang diperlukan untuk menyertakan URL AZURE Function API dalam build statis dengan Vite. VITE_BACKEND_URL adalah URL aplikasi Azure Function Anda. VITE_CLOUD_ENV adalah parameter untuk menunjukkan kapan harus menggunakan URL VITE_BACKEND_URL. Jangan gunakan NODE_ENV untuk sampel ini karena memiliki efek samping yang tidak diinginkan.

  8. Simpan file lalu tambahkan, terapkan, dan dorong kembali ke GitHub dengan git:

    git add .
git commit -m "fix the workflow for a subdir"
git push origin main

  9. Dari browser, jalankan ulang alur kerja di GitHub di area tindakan fork Anda untuk aplikasi web statis Anda.

  10. Aplikasi front-end Anda disebarkan ke Azure. Sekarang Anda perlu mengonfigurasi aplikasi Azure Function untuk mengizinkan permintaan CORS dari aplikasi web statis Anda.

7. Mengonfigurasi CORS untuk aplikasi Azure Function Anda

Saat menggunakan aplikasi Azure Function terpisah, alih-alih aplikasi Fungsi terkelola, Anda perlu mengonfigurasi CORS untuk mengizinkan permintaan dari aplikasi web statis Anda.

  1. Di portal Azure, buka aplikasi Azure Function Anda.
  2. Di bagian API -> CORS , tambahkan URL aplikasi web statis Anda ke daftar asal yang diizinkan.

8. Uji aplikasi web statis Anda

  1. Di browser, buka aplikasi web statis Anda.
  2. Berinteraksi dengan aplikasi untuk masuk, melihat informasi publik dan privat, dan keluar lagi.

9. Bersihkan semua sumber daya yang digunakan dalam seri artikel ini

Bersihkan semua sumber daya yang dibuat dalam seri artikel ini.

  1. Di portal Azure, hapus grup sumber daya Anda, yang menghapus aplikasi web statis dan aplikasi fungsi.
  2. Di portal GitHub, hapus repositori fork Anda.

Pemecahan Masalah

Sampel ini menyimpan daftar masalah dan resolusi yang diketahui. Jika masalah Anda tidak tercantum, silakan buka masalah.

URL publik aplikasi web statis dan aplikasi fungsi

Anda selalu dapat menemukan URL aplikasi web statis dan URL aplikasi fungsi Anda di portal Azure, di halaman Gambaran Umum setiap sumber daya. URL ini bersifat publik secara default.

Langkah berikutnya