다음을 통해 공유

Node.js를 사용하여 Azure에서 새 Static Web App 빌드

  • 아티클

Azure Static Web Apps는 코드 리포지토리에서 전체 스택 웹앱을 Azure에 자동으로 빌드하고 배포하는 서비스입니다.

  • 클라이언트 앱: Static Web Apps는 일반적으로 서버 쪽 렌더링이 필요하지 않은 Angular, React, Svelte, Vue 또는 Blazor와 같은 라이브러리와 프레임워크를 사용하여 빌드됩니다.
  • API: API 엔드포인트는 전체 백 엔드 서버가 모두 함께 필요하지 않도록 서버리스 아키텍처를 사용하여 호스팅됩니다.

비디오 시리즈:

샘플:

정적 웹앱이란?

Azure Static Web Apps는 생성된 정적 클라이언트 파일과 선택적 API 엔드포인트가 모두 있는 호스트되는 앱입니다. 정적 웹앱을 만들 때 GitHub 리포지토리에서 정적 파일을 빌드한 다음 Azure에 배포하기 위해 GitHub 작업에 필요한 정보를 포함합니다.

다음 중 하나를 사용하여 정적 웹앱을 만듭니다.

Static Web Apps CLI 사용

SWA CLI라고도 하는 Static Web Apps CLI는 Azure Static Web Apps에 대한 로컬 개발 도구 역할을 합니다. 다음과 같은 기능이 있습니다.

  • 정적 앱 자산 또는 프록시를 앱 개발 서버에 제공
  • Azure Functions Core Tools에서 실행되는 API에 대한 API 요청 또는 프록시 제공
  • 인증 및 권한 부여 에뮬레이트
  • 라우팅을 포함하여 Static Web Apps 구성 에뮬레이트

전체 스택 앱에 대한 API 포함

Azure Function API는 선택적으로 Static Web Apps에서 제공되며 일반적으로 이름이 지정된 /api폴더에 있습니다. 이러한 기능을 사용하면 전체 웹 호스팅 환경의 서버 쪽 구성을 처리할 필요 없이 전체 스택 웹 사이트를 개발할 수 있습니다. JavaScript를 사용하는 Azure Function 앱에 대해 자세히 알아봅니다.

샘플:

Visual Studio Code를 사용하여 개발

Static Web Apps용 Visual Studio 코드 확장을 사용하여 로컬 폴더 구조 및 초기 종속성을 만듭니다.

  1. 클라이언트 및 API 선택에 대한 GitHub 템플릿 리포지토리 중 하나를 포크하거나 새 리포지토리를 만듭니다.

  2. VS Code에서 새 Static Web App을 만듭니다.

  3. 만들기 단계에서 리포지토리 포크 및 분기를 선택합니다.

    이 리포지토리 및 분기로 푸시할 때 코드도 Static Web App에 배포됩니다. 해당 목적을 위해 분기 live 를 deploy 갖는 것이 일반적입니다.

  4. 만들기 단계에서 프로젝트 구조, 애플리케이션 코드의 위치 및 빌드 디렉터리를 선택합니다.

    일반적으로 폴더 구조가 프로젝트 형식의 일반적인 폴더 구조를 따르는 경우 기본값을 사용할 수 있습니다.

  5. 만들기 단계를 완료하면 리포지토리 포크에 디렉터리에 있는 /.github/workflows Static Web App을 빌드하고 배포하는 GitHub 작업이 있습니다.

Azure Static Web Apps 확장을 사용하는 자습서는 다음과 같습니다.

클라이언트 환경 변수 구성

GitHub 작업은 빌드 시 프로젝트에 삽입된 환경 변수를 제어합니다. 이러한 클라이언트 쪽 변수는 섹션의 GitHub Action yaml에서 env 구성해야 합니다. 비밀은 GitHub 비밀에 저장하고 섹션으로 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"

API 환경 변수 구성

API 환경 변수는 Azure Portal 또는 Azure CLI에서 구성된 런타임 변수입니다.

Azure에 배포

Azure에 정적 웹앱 배포는 아래 GitHub 작업에 나열된 소스 코드 리포지토리의 특정 분기로 푸시하여 시작됩니다 pull_requests:branches. 로컬 컴퓨터에서 푸시하려면 정적 웹앱의 리포지토리 또는 리포지토리 포크를 사용해야 합니다. GitHub 사용자 계정에 회사의 GitHub 조직과 같이 지정된 조직 리포지토리의 지정된 분기로 푸시할 수 있는 권한이 없는 경우 리포지토리를 포크한 다음 포크를 사용하도록 GitHub 작업을 구성해야 합니다.

GitHub Action에서 배포 성공을 봅니다.

View deployment success from the GitHub Action.

로그 사용 설정

Azure Portal에서 Static Web App에 대한 Application Insights를 켜서 로깅을 수집합니다. 통합 Application Insights 로깅은 코드를 변경하지 않고 엄청난 양의 정보를 수집합니다.

사용자 지정 로깅 개발

앱에서 Application Insights에 사용자 지정 로깅을 추가하려면 @microsoft/applicationinsights-web npm 패키지를 추가한 다음, JavaScript 코드를 추가하여 사용자 지정 정보를 캡처합니다.

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'});

다음 단계