Membangun Static Web App baru di Azure dengan Node.js

Artikel
05/02/2023

Azure Static Web Apps adalah layanan yang secara otomatis membangun dan menerapkan 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 yang tidak memerlukan perenderan sisi server.
API: Titik akhir API dihosting menggunakan arsitektur tanpa server, yang menghindari kebutuhan untuk server back-end penuh secara bersamaan.

Seri video:

Sampel:

Sampel komunitas Static Web Apps adalah cara terbaik menemukan kode untuk menggunakan starter proyek Anda.
Proyek starter Static Web App adalah cara terbaik lainnya untuk memulai proyek Anda.

Apa itu Static Web App?

Azure Static Web Apps adalah aplikasi yang dihosting dengan file klien statik yang dihasilkan serta titik akhir API opsional. Saat Anda membuat Static Web App, sertakan informasi yang diperlukan Tindakan GitHub untuk membangun file statik dari repositori GitHub yang kemudian disebarkan ke Azure.

Buat Static Web App dengan salah satu fitur berikut:

Menggunakan Static Web Apps CLI

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

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
Meniru autentikasi dan otorisasi pengguna
Meniru konfigurasi Static Web Apps, termasuk perutean

Menyertakan API untuk aplikasi tumpukan penuh

API Azure Function disediakan dalam Static Web Apps secara opsional dan biasanya ada di dalam folder bernama /api. Fungsi ini memungkinkan Anda untuk mengembangkan situs web tumpukan penuh tanpa perlu berurusan dengan konfigurasi sisi server dari seluruh lingkungan hosting web. Pelajari lebih lanjut aplikasi Azure Function dengan JavaScript.

Sampel:

Pustaka sampel komunitas tanpa server Azure

Mengembangkan dengan Visual Studio Code

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

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

Saat mendorong ke repositori dan cabang ini, kode Anda juga disebarkan ke Static Web App. Sudah hal biasa memiliki cabang live atau deploy untuk tujuan tersebut.
Dalam langkah pembuatan, pilih struktur proyek, lokasi kode aplikasi, dan direktori build.

Anda biasanya dapat mengambil nilai default jika struktur folder Anda mengikuti struktur folder khusus untuk jenis proyek tersebut.
Saat Anda menyelesaikan langkah pembuatan tersebut, fork repositori Anda memiliki Tindakan GitHub untuk dibangun dan disebarkan ke Static Web App 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 pada waktu pembuatan. Variabel sisi klien ini perlu dikonfigurasi di yaml Tindakan GitHub di bagian env. Rahasia harus disimpan dalam rahasia GitHub dan ditarik 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 bahasa umum yang dikonfigurasi di portal Azure atau Azure CLI.

Portal Azure: Di bawah Pengaturan lalu Konfigurasi
Ekstensi VSCode: Di bawah Produksi lalu Pengaturan Aplikasi
Azure CLI: Menggunakan az staticwebapp appsettings set

Sebarkan ke Azure

Menyebarkan Static Web App ke Azure dimulai dengan mendorong ke cabang spesifik repositori kode sumber, tercantum dalam Tindakan GitHub di bawah pull_requests:branches. Pendorongan dari komputer lokal Anda perlu menggunakan repositori atau fork repositori Static Web App. Jika akun pengguna GitHub Anda tidak memiliki izin untuk mendorong ke cabang tertentu pada repositori organisasi yang ditentukan, seperti organisasi GitHub perusahaan, Anda harus membayar repositori, lalu konfigurasikan Tindakan GitHub untuk menggunakan fork Anda.

Lihat keberhasilan penyebaran dari Tindakan GitHub.

View deployment success from the GitHub Action.

Aktifkan Log

Aktifkan Application Insights di portal Azure untuk Static Web App Anda untuk mengumpulkan pengelogan. Pengelogan Application Insights terintegrasi mengumpulkan sejumlah informasi untuk Anda tanpa ada perubahan ke kode.

Mengembangkan pengelogan kustom

Untuk menambahkan pengelogan kustom dari aplikasi Anda ke Application Insights, tambahkan paket npm @microsoft/applicationinsights-web 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 lebih lanjut tentang Static Web Apps
Menambahkan API di Static Web Apps

Bagikan melalui