자습서: GitHub Spark 및 Codespaces를 사용하여 단일 페이지 애플리케이션 만들기 및 배포

새로운 단일 페이지 애플리케이션 지원을 통해 개발자는 소스 코드에서 Power Pages 사이트를 완전히 만들고, 사용자 지정하고, 관리할 수 있습니다. GitHub Spark의 최근 릴리스를 통해 개발자는 이제 사이트를 작성하고, GitHub Codespace에서 직접 편집하고, 브라우저를 종료하지 않고 Power Pages 환경에 배포할 수 있습니다. 이 자습서에서는 전체 워크플로를 안내합니다.

GitHub Spark는 GitHub Copilot의 새로운 AI 기반 자연어 플랫폼입니다. 개발자가 최신 웹 애플리케이션을 빠르게 부트스트랩할 수 있도록 설계되었습니다. 코드 편집을 위해 GitHub Codespaces와 결합된 경우 Spark는 다음을 제공합니다.

  • 프로젝트에 사용할 준비가 된 템플릿 리포지토리입니다.
  • 일관된 환경에 대해 미리 구성된 개발 컨테이너입니다.
  • GitHub Copilot의 AI 기반 자연어 플랫폼입니다.

Power Pages 개발자의 경우 즉, 기존 로컬 설정 없이 즉시 사용할 수 있는 사이트 서식 파일로 시작하고, 사용자 지정하고, 배포할 수 있습니다.

이 문서의 끝부분에서 다음 방법을 알아봅니다.

  1. GitHub Spark를 사용하여 프로토타입 Power Pages 사이트를 만듭니다.
  2. .NET 및 PAC CLI 지원을 위한 Codespace를 구성합니다.
  3. 단일 페이지 애플리케이션을 빌드하고 Power Pages 환경에 업로드합니다.
  4. Power Pages에서 직접 사이트를 다시 활성화하고 테스트합니다.

필수 조건

시작하기 전에 다음을 확인합니다.

  • 관리자 권한이 있는 Power Pages 환경.
  • Power Platform CLI(PAC CLI) 버전 1.44.x 이상이 설치 및 인증.
  • 버전 9.7.4.x 이상의 Power Pages 사이트.
  • 사용자 지정 프런트 엔드 프로젝트에 대한 Codespaces를 사용하는 GitHub Spark 라이선스.

비고

  • GitHub Spark를 사용하려면 적절한 GitHub 라이선스가 있는지 확인합니다.
  • GitHub Spark 또는 Codespaces에 대한 지원은 Spark 지원 팀을 통해 사용할 수 있습니다.

1단계: GitHub Spark 템플릿 시작

  1. GitHub Spark 도구로 이동하여 자연어를 사용하여 새 사이트를 생성합니다.
  2. 만든 후 Codespaces에서 열기를 클릭합니다.

이렇게 하면 로컬 설정 없이 Power Pages 프로젝트에서 작업할 수 있는 클라우드 기반 개발 환경이 제공됩니다.

2단계: 개발 컨테이너 구성 업데이트

리포지토리 내에서 파일을 찾습니다.

.devcontainer/devcontainer.json

기능 섹션을 수정하여 .NET 9.0에 대한 지원을 추가합니다. 구성은 다음과 같습니다.

"features": {
  "ghcr.io/devcontainers/features/sshd:1": {
    "version": "latest"
  },
  "ghcr.io/devcontainers/features/dotnet:2.3.0": {
    "version": "9.0"
  }
}

컨테이너 재구성

변경 내용을 저장한 후:

  1. Ctrl + Shift + P 키를 누르거나, Mac에서는 Command + Shift + P 키를 눌러 명령 팔레트를 엽니다.
  2. Codespaces: Rebuild Container를 입력하고 선택하세요.
  3. 컨테이너가 다시 시작됩니다. 이 프로세스 중에 .NET 9 및 기타 모든 종속성이 설치됩니다.
  4. 계속하기 전에 설치가 완료되기까지 몇 초 정도 기다립니다.

이 단계에서는 Codespace 환경이 새 구성으로 새로 고쳐지도록 합니다. 이렇게 하면 Codespace에 Power Pages 빌드 도구에 필요한 런타임이 포함됩니다.

3단계: Power Platform 도구 설치

Codespaces 터미널에서:

  1. Power Platform 도구를 설치합니다(VS Code 확장으로 사용 가능).
  2. 또한 이 설치는 사이트를 인증, 다운로드 및 업로드할 수 있는 명령줄 인터페이스인 PAC CLI를 제공합니다.

4단계: Power Platform 환경에 연결

PAC CLI를 사용하여 대상 환경에 대해 인증합니다.

pac auth create -u https://org12x34x45.crm.dynamics.com

URL을 실제 Power Platform 환경 URL로 바꿉다.

5단계: 사이트 빌드

배포하기 전에 사이트 코드를 빌드합니다.

npm run build

이 명령은 사이트를 컴파일하고 아티팩트를 폴더에 dist 출력합니다.

6단계: 사이트 업로드

다음을 사용하여 Power Pages 환경에 사이트를 배포합니다.

pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"

매개 변수

매개 변수 Alias Description
--rootPath -rp 사이트의 원본 파일이 있는 로컬 폴더
--compiledPath -cp React build와 같은 컴파일된 자산의 경로
--siteName -sn Power Pages 사이트의 표시 이름

7단계: 다시 활성화 및 테스트

  1. 업로드 후 사이트가 Power Pages의 비활성 사이트 아래에 표시됩니다.
  2. 비활성 사이트로 이동하여 사이트를 찾은 후 다시 활성화를 선택합니다.
  3. 사이트가 활성화되면 URL을 열어 배포를 확인합니다.

다음 단계: 사이트 보안 및 확장

이제 사이트가 배포되었습니다.

  • Last updated on