[ SharePoint Framework ] 10. Host your client-side web part from Office 365 CDN (Hello World part 4)

CDN (Office 365 Content Delivery Network)은 간편하게 자신의 Office 365 테넌트에서직접 호스팅 할 수있는 솔루션을 제공합니다. SharePoint Online에서 사용되는  static assets을 호스팅하는 데 사용할 수 있습니다.

 

Enable CDN in your Office 365 tenant

1. 관리자 역할로 PowerShell을 실행하고 다음 PowerShell cmdlet을 실행하여 PowerShell 갤러리에서 최신 버전의 cmdlet을 다운로드하여 최신 버전의 SharePoint Online 관리 셸이 있는지 확인합니다.

 

2.  powershell에서 Get-Host 를 누르면  프레임 워크의 버전 및 정보를 알 수 있습니다.

3. 해당 명령으로 모듈을 설치한다. 

Install-Module -Name Microsoft.Online.SharePoint.PowerShell

4. PowerShell 세션으로 SharePoint Online 테넌트에 연결한다.

Connect-SPOService -Url https://contoso-admin.sharepoint.com

contoso-admin.sharepoint.com 는 각자의 sharepoint  주소를 쓰면 된다.

 

해당 명령을 치면 로그인화면이 나오는데 이 때 E5 개발자 구독시 사용한 id로 로그인을 하면 됩니다. 

 

참고로 주소를 contoso-admin.sharepoint.com 로 바꾸지 않고 그대로 명령어를 넣으면 

 

이와 같이 오류가 발생합니다.

 

 

 

 

5. 다음 명령을 하나씩 실행하여 테넌트 수준에서 공개 CDN 설정의 현재 상태를 가져옵니다.

Get-SPOTenantCdnEnabled -CdnType Public
Get-SPOTenantCdnOrigins -CdnType Public
Get-SPOTenantCdnPolicies -CdnType Public

테넌트에서 사용이 가능하면 SharePoint Framework 솔루션은 Office 365 Public CDN을 자동으로 활용할 수 있습니다. CDN이 활성화되면 */CLIENTSIDEASSETS이 자동 추가됩니다.

 

6. 테넌트에서 공개 CDN을 활성화합니다.

Set-SPOTenantCdnEnabled -CdnType Public

7. 를 선택한 Y다음 Enter 를 선택하여 설정을 확인 하십시오.

 

 

이제 허용 된 기본 파일 유형 구성을 사용하여 테넌트에서 퍼블릭 CDN이 활성화되었습니다. 이는 CSS, EOT, GIF, ICO, JPEG, JPG, JS, MAP, PNG, SVG, TTF 및 WOFF와 같은 파일 형식 확장자가 지원됨을 의미합니다.

테넌트에서 SharePoint 프레임 워크 솔루션이 활성화되어 있으면 Office 365 Public CDN의 이점을 자동으로 활용할 수 있습니다. CDN이 활성화되면 */CLIENTSIDEASSETS원본이 유효한 원본으로 자동 추가됩니다.

 

 

8. 엔드 포인트의 현재 설정을 다시 확인할 수 있습니다. 테넌트에서 CDN 오리진 목록을 가져 오려면 다음 명령을 실행하십시오.

Get-SPOTenantCdnOrigins -CdnType Public

CDN을 처음 활성화하면 기본 출처를 활성화하는 기본 구성에 다소 시간이 걸립니다 (약 15 분). 명령 을 실행할 때 (구성 보류) 메시지 가 없으면 구성이 완료됩니다 Get-SPOTenantCdnOrigins -CdnType Public.

 

Finalize solution for deployment

1. 콘솔로 전환하여 웹 파트 프로젝트를 설정하는 데 사용한 프로젝트 디렉토리에 있는지 확인합니다. 

2. gulp serveCtrl + C를 선택 하여 가능한 태스크를 종료하고 프로젝트 디렉토리에 있는지 확인합니다

Review solution settings

 

1. Visual Studio Code 또는 선호하는 IDE에서 HelloWorldWebPart 웹 파트 프로젝트를 엽니 다 .

2.  config 의  package-solution.json 파일을 열고  다음 코드와 같이 패키지 메타 데이터를 정의합니다 :

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "helloword-webpart-client-side-solution",
    "id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false
  },
  "paths": {
    "zippedPackage": "solution/helloword-webpart.sppkg"
  }
}

의 기본값 includeClientSideAssets은 입니다 true고정 자산이 자동으로 내부의 패키지로되어있는 수단 .sppkg의 파일 및 사용자가 별도로 외부 시스템에서 자산을 호스트 할 필요가 없습니다.

 

솔루션이 테넌트에 배포 될 때 자산이 자동으로 호스팅되도록이 실행 중에는 설정을 변경하면 안됩니다.

 

Office 365 CDN을 사용하도록 설정하면 기본 설정과 함께 자동으로 사용됩니다. Office 365 CDN을 사용하지 않으면 앱 카탈로그 사이트 모음에서 asset이 제공됩니다. 즉, includeClientSideAssets 설정을 true로두면 솔루션 자산이 테넌트에서 자동으로 호스팅됩니다.

 

Prepare web part assets to deploy

1. 다음 태스크를 실행하여 솔루션을 번들하면, 동적 레이블을 자산의 호스트 URL로 사용하여 프로젝트의 릴리스 빌드가 실행됩니다 이 URL은 테넌트 CDN 설정에 따라 자동으로 업데이트됩니다.

gulp bundle --ship

2. 솔루션을 패키지하려면 다음 작업을 실행하십시오. 공유 지점 / 솔루션 폴더에 업데이트 된 helloworld-webpart.sppkg 패키지가 생성됩니다.

 

gulp package-solution --ship

3. 새로 생성 된 클라이언트 측 솔루션 패키지를 테넌트의 앱 카탈로그에 업로드하거나 끌어다 놓습니다.

 

4.  패키지를 이미 배포 했으므로 기존 패키지를 교체할지 묻는 메시지가 표시되며, 여기서 바꾸기를 선택합니다. 

 

5. 테넌트 설정에 따라 콘텐츠가 Office 365 CDN 또는 앱 카탈로그에서 제공되기 때문에 prompt의 도메인 목록에 SharePoint Online이 어떻게 표시되는지 확인합니다.

 

 

배치를 선택합니다.

 

 

6.  이전에 helloworld-webpart-client-side-solution을 설치 한 사이트를 열거 나 솔루션을 새 사이트에 설치하십시오.

 

7. 솔루션을 설치 한 후 톱니 바퀴 메뉴에서 페이지 추가를 선택하고 최신 페이지 웹 파트 선택기에서 HelloWorld를 선택하여 사용자 정의 웹 파트를 페이지에 추가합니다.

 

8. node.js 서비스를 로컬로 실행하지 않더라도 웹 파트가 렌더링되는 방법을 확인합니다.

 

9. 웹 파트를 사용하여 페이지의 변경 사항을 저장합니다.

 

10.  개발자도구를 열고 ( F12를 누르면 된다. ) 소스에서 publiccdn.sharepointonline.com을 확장하고 hello-world-web-part 파일이 공개 CDN URL에서 어떻게로드되어 앱 카탈로그 사이트 콜렉션 아래에있는 라이브러리를 동적으로 가리키는 지 확인합니다.

 

 

이제 사용자 지정 웹 파트를 SharePoint Online에 배포했으며 Office 365 CDN에서 자동으로 호스팅됩니다.