다음을 통해 공유

Azure에 웹앱 호스트

  • 아티클

웹앱에 대한 일반적인 구성을 설정하는 방법을 알아봅니다. 일반 설정이 없는 경우 피드백에서 이슈를 열고 알려주세요.

리소스를 만들 때 필수 설정이 요청됩니다. 해당 시간에 설정이 요청되지 않은 경우 기본값이 있으며 리소스를 만든 후에 변경할 수 있습니다.

웹앱이란?

웹앱은 인터넷 URL을 사용하여 도달하는 모든 항목입니다. 웹앱으로 간주할 수 있는 수많은 Azure 서비스가 있습니다. 웹앱에 일반적으로 사용되는 최상위 서비스는 다음과 같습니다.

웹앱 설정을 구성하는 방법

대부분의 Azure 서비스는 설정을 구성하는 다음과 같은 네 가지 방법을 제공합니다.

확장을 사용하여 Visual Studio Code 내에서 많은 설정을 구성할 수도 있습니다.

Azure에서 제공하는 기본 do기본 이름 사용

대부분의 Azure 서비스는 리소스에 대한 URL을 제공합니다. 서비스 이름은 하위 기본 Azure에서 제공되는 나머지 기본 결정합니다.

예시:

  • Azure Functions - https://my-function-app.azurewebsites.net
  • Azure 웹앱 - https://my-web-app.azurewebsites.net
  • Azure Storage Blob - https://mystorage.blob.core.windows.net/

정적 웹앱과 같은 일부 서비스는 상대적으로 고유한 하위 도메인을 자동으로 제공하므로, 다음과 같이 즉시 프로덕션 환경에 사용할 수 있습니다.

  • Azure Static Web Apps = https://gentle-tree-0b08aaf12.azurestaticapps.net

사용자 지정 do기본 이름 구성

각 서비스는 사용자 지정 작업을 추가하는 고유한 메커니즘을 제공합니다기본.

포트 전달 구성

기본 포트가 아닌 경우 앱의 포트 번호를 매핑해야 합니다. 이렇게 하면 App 서비스에서 올바른 포트에 요청을 전달할 수 있습니다.

// 3000 is an example port
const port = process.env.PORT || 3000

서버와 연결하도록 CORS에 대한 브라우저 구성

사용자 고유의 서버에 연결해야 하고 클라이언트를 로컬로 실행하고 디버깅하는 동안 CORS 보안을 무시해야 하는 경우 Visual Studio Code 디버그 파일 launch.json에서 이 설정을 구성하여 브라우저에 설정을 전달하여 보안을 사용하지 않도록 설정하는 것이 좋습니다.

이 파일은 디버깅 세션을 시작하는 데 엄격하게 사용되므로 소스 제어에 검사 것이 안전합니다.

디버깅을 위해 CORS를 사용하지 않도록 Edge 브라우저 구성

다음 launch.json 파일은 디버그 세션--disable-web-security에 대한 CORS 보안을 해제하도록 Edge 브라우저 설정을 구성합니다.

{
    // Debug client, with requests to server, w/o 
    // changes to client or server
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Edge against localhost",
            "request": "launch",
            "type": "pwa-msedge",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": [
                "--disable-web-security"
            ],
        },
    ]
}

디버깅 시 CORS를 사용하지 않도록 Chrome 브라우저 구성

다음 launch.json 파일은 디버그 세션--disable-web-security에 대한 CORS 보안을 해제하도록 Chrome 브라우저 설정을 구성합니다.

{
    // Debug client, with requests to server, w/o 
    // changes to client or server
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": [
                "--disable-web-security"
            ],
        }
    ]
}

인증서 구성

앱에 즉시 인증서가 필요한 경우 인증서를 제공하는 방법에 대한 몇 가지 선택 사항이 있습니다.

  • 사용자 고유의 인증서 업로드
  • App Service 내에서 인증서 관리
  • Azure Key Vault에서 인증서 가져오기
  • 코드에서 인증서 제공

비밀 구성

비밀은 일반적으로 다음과 같은 방법으로 제공됩니다.

설정, 설정 및 기능 플래그 저장

Azure 앱 구성을 사용하여 설정 및 기능 플래그를 저장합니다. Key Vault 비밀을 App Configuration 리소스에 연결한 다음 비밀을 끌어올 수 있습니다.

App Configuration에는 설정 및 기능 플래그의 일반적인 이름/값 쌍을 넘어서는 몇 가지 기능이 있습니다.

로깅 구성

로깅에는 다음이 포함됩니다.

  • 플랫폼 로깅 - 앱 외부에서 발생
  • 앱 로깅 - 앱 내에서 발생하는 작업

플랫폼 로그가 제공됩니다.

  • 환경의 상태를 이해합니다.
  • 다른 가격 책정 계층 또는 다른 지역으로 확장하기 위해

기본 로깅 기능을 사용하는 경우 애플리케이션 로그가 제공될 수 있습니다.

데이터베이스 및 스토리지 구성

일반적으로 데이터베이스 또는 데이터 스토리지에 대한 연결은 연결 문자열 시작합니다.

데이터 연결에 대한 고려 사항:

  • 현재 연결 가져오기
  • 새 데이터 스토리지 - 앱에 새 스토리지 메커니즘이 필요한 경우 Azure는 다양한 데이터베이스 선택 항목을 제공합니다. 연결을 안전하게 저장해야 합니다.

뭔가 누락?

이 목록에서 누락된 항목이 있으면 피드백을 작성하여 알려주세요.

다음 단계