Membangun Static Web App baru di Azure dengan Node.js

2025-02-15

Azure Static Web Apps adalah layanan yang secara otomatis membangun dan menyebarkan aplikasi web tumpukan penuh ke Azure dari repositori kode.

Aplikasi klien: Aplikasi web statis umumnya dibuat menggunakan pustaka dan kerangka kerja seperti Angular, React, Svelte, Vue, atau Blazor di mana penyajian sisi server tidak diperlukan.
API: API endpoint dihosting menggunakan arsitektur tanpa server, yang menghindari kebutuhan akan server back-end sepenuhnya.

seri video:

Sampel:

Sampel komunitas Static Web Apps adalah cara yang hebat untuk menemukan kode yang dapat digunakan sebagai permulaan untuk proyek Anda.
Proyek awal Static Web App adalah salah satu cara hebat untuk memulai proyek Anda.

Apa itu Static Web App?

Azure Static Web Apps adalah aplikasi yang dihosting dengan file klien statis yang dihasilkan dan titik akhir API opsional. Saat membuat Static Web App, Anda menyertakan informasi yang diperlukan untuk GitHub Action untuk membangun file statis dari repositori GitHub Anda lalu menyebarkan ke Azure.

Buat Static Web App dengan salah satu hal berikut ini:

Menggunakan CLI dari Static Web Apps

CLI Static Web Apps, juga dikenal sebagai SWA CLI, berfungsi sebagai alat pengembangan lokal untuk Azure Static Web Apps. Ini dapat:

Menyajikan aset aplikasi statis, atau proksi ke server dev aplikasi Anda
Melayani permintaan API, atau proksi ke API yang berjalan di Azure Functions Core Tools
Mensimulasikan autentikasi dan otorisasi
Meniru konfigurasi Static Web Apps, termasuk pengaturan perutean

Sertakan API untuk aplikasi full-stack

Dengan memasukkan Azure Functions, Anda dapat mengembangkan situs web full-stack tanpa perlu berurusan dengan konfigurasi server dari lingkungan hosting web. Pelajari selengkapnya tentang aplikasi fungsi Azure dengan JavaScript.

azure Function tersedia untuk aplikasi web statis dengan dua cara:

Managed Functions: API ini disediakan di Static Web Apps secara opsional dan biasanya berada di folder bernama /api.
Linked Functions: Aplikasi fungsi terpisah tetapi tertaut ini memungkinkan Anda menggunakan API tersebut tanpa harus mengelola dari kode sumber yang sama dan menyebarkan secara bersamaan.

Sampel:

Mengembangkan dengan Visual Studio Code

Gunakan ekstensi Visual Studio Code untuk Static Web Apps guna membuat struktur folder lokal dan dependensi awal Anda.

Fork salah satu repositori templat GitHub untuk klien dan API pilihan Anda atau buat repositori baru .
Di Visual Studio Code, buat Static Web App baru.
Dalam langkah-langkah pembuatan, pilih fork dan cabang repositori Anda.

Saat Anda melakukan push ke repositori dan cabang ini, kode Anda juga disebarkan ke Static Web App. Adalah umum untuk memiliki cabang live atau deploy untuk tujuan tersebut.
Dalam langkah-langkah pembuatan, pilih struktur proyek, lokasi kode aplikasi, dan direktori build.

Anda biasanya dapat mengambil nilai default jika struktur folder Anda mengikuti struktur folder umum untuk jenis proyek.
Saat Anda menyelesaikan langkah-langkah pembuatan, fork repositori Anda memiliki GitHub Action untuk membangun dan menyebarkannya ke Aplikasi Web Statis Anda, yang terletak di direktori /.github/workflows.

Tutorial, yang menggunakan ekstensi Azure Static Web Apps meliputi:

Mengonfigurasi variabel lingkungan klien

Tindakan GitHub mengontrol variabel lingkungan yang disuntikkan ke dalam proyek Anda saat proses build. Variabel sisi klien ini perlu dikonfigurasi di yaml GitHub Action di bagian env. Rahasia harus disimpan dalam Secrets GitHub dan dimasukkan ke bagian env.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

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@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          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: "search-website" # App source code path
          api_location: "search-website/api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
          # Inject vars at build time
          myvarname: 'myvarvalue' 
          # Inject secrets at build time from GitHub Secrets
          password: ${{ secrets.PASSWORD }}

  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@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          action: "close"

Mengonfigurasi variabel lingkungan API

Variabel lingkungan API adalah variabel runtime yang dikonfigurasi di portal Microsoft Azure atau Azure CLI.

Portal Microsoft Azure: Di bawah Pengaturan kemudian Konfigurasi
Ekstensi Visual Studio Code: Pada Produksi lalu Pengaturan Aplikasi
Azure CLI: Menggunakan az staticwebapp appsettings set

Menyebarkan ke Azure

Menyebarkan Static Web App ke Azure dimulai dengan mendorong kode ke cabang tertentu dari repositori kode sumber, yang disebutkan dalam GitHub Action di bawah pull_requests:branches. Dorongan dari komputer lokal Anda perlu menggunakan repositori Static Web App atau fork dari repositori tersebut. Jika akun pengguna GitHub Anda tidak memiliki izin untuk push ke cabang yang ditentukan pada repositori organisasi yang ditentukan, seperti organisasi GitHub perusahaan Anda, Anda harus melakukan fork terhadap repositori tersebut, lalu mengonfigurasi GitHub Action Anda untuk menggunakan fork Anda.

Lihat keberhasilan penyebaran dari GitHub Action.

Aktifkan log

Aktifkan Application Insights di portal Azure untuk mengumpulkan log pada Static Web App Anda. Pengelogan Application Insights terintegrasi mengumpulkan sejumlah besar informasi untuk Anda, tanpa perubahan apa pun pada kode Anda.

Mengembangkan pengelogan kustom

Untuk menambahkan pengelogan kustom dari aplikasi Anda ke Application Insights, tambahkan paket @microsoft/applicationinsights-web npm lalu tambahkan kode JavaScript untuk mengambil informasi kustom.

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.trackTrace({message: 'some trace'});

Langkah berikutnya

Pelajari selengkapnya tentang Static Web Apps

Bagikan melalui