SXA에서 새로운 사이트를 생성하고 스타일 업데이트하기

이번 포스트에서 Sitecore Experience Accelerator (SXA)에 대하여 소개하고 Creative Exchange Live를 통하여 웹사이트 Theme을 로컬 컴퓨터에서 수정하도록 하겠다.
필자는 "My Tenant"라는 영역에 "New Site"라는 SXA 사이트를 생성하였다. 아래의 스크린샷처럼 새로운 Theme 생성을 선택하고 사이트를 생성하면 새로운 Theme이 Media Library에 생성이 된다.

SXA Theme은 SASS, CSS, Javascript, Images 그리고 Fonts로 구성되어져 있으며, 새로 생성된 Theme은 SXA의 "Basic2" theme으로부터 복사 되어진 것이다. 이제는 Node.js 을 설치하여 Gulp를 사용하도록 하겠다. Gulp는 프론트엔드 개발자를 위한 Javascript 툴킷으로써 리얼타임 스트리밍 기능은 소스파일을 쉽게 수정하고 개발할 수 있도록 도와준다.

필자는 이미 Node.js 를 설치하였으므로 Creative Exchange를 통하여 새로 생성한 Theme을 내려받고 Visual Code에서 수정하도록 하겠다.

새로 생성한 Theme을 내려받기 전 "Site -> Presentation -> Page Designs"으로 이동 후 기본 Theme을 설정한다.
사용자가 Gulp로 Remote 엑세스할 수 있다록 "\App_Config\Include\z.Feature.Overrides\z.SPE.Sync.Enabler.Gulp.config.disabled" 파일 이름의 ".disabled" 지우고 "z.SPE.Sync.Enabler.Gulp.config" 이름으로 변경한다.

사용자자의 Account가 Powershell API를 사용할수 있도록 아래의 세팅을 Patch를 한다.

<configuration>
  <sitecore>
    <powershell>
      <services>
        <restfulv2>
          <authorization>
            <add Permission="Allow" IdentityType="User" Identity="sitecore\YourUserName" />
          </authorization>
        </restfulv2>
    </powershell>
  </sitecore>
</configuration>

Content Editor에서 새로 생성한 사이트를 클릭 후, "Home" 탭에서 "Export" 버턴을 누른다.
아래의 세팅처럼 필자는 패키지를 서버로 저장하고 추후 패키지를 다시 "Import" 할 수있다록 "Agent" 모드를 사용하였다.

패키지의 기본 저장경로는 파일 시스템의 "/App_Data/packages/CreativeExchange" 이다.
Agent Mode: 사이트 및 페이지의 모든 프리뷰 코드를 제공하며 Theme을 Import하는 필수 파일들이 포함되어있다.
End-User Mode: 사이트 및 페이지의 모든 프리뷰 코드를 제공하며 Theme을 Import하는 필수 파일들이 포함되어 있지 않다.

Visual Code에서 "/App_Data/packages/CreativeExchange/FileStorage/{Site Name}" 경로를 열어 Gulp를 사용하도록 하자.
먼저 경로의 "{Site Name}/{Site Theme Name}/gulp/config.js" 파일을 열어 "Server Options"의 "server"를 CMS URL로 변경한다.
예) server: 'http://sc92u0sc.dev.local',
"{Site Theme Name}"의 경로에서 Visual Code 터미널을 열어준다.
"npm install" 커맨드를 통하여 Gulp 커맨드가 사용되어질수있는 환경을 생성한다.
*Node Framework을 정상적으로 설치를 하였다면 아래처럼 Gulp 유틸이 설치되는것을 볼수있다.
설치가 완료되면 "gulp" 커맨드를 실행하고 Access가 주어진 Username과 Password를 입력 후, Gulp Watch가 실행되는지 확인한다.
새로 생성한 사이트로 이동하여 Home 페이지를 열어 기본적인 페이지를 생성한다.
필자는 "Home" 아이템에서 Accordion 컴포넌트를 추가하였다. Accordion 스타일은 Theme의 SXA "component-accordion.css"에서 지정되는데 Creative Exchange Live를 통하여 SASS 파일을 수정하고 Live 업데이트 과정을 보도록 하자.

필자는 Gulp를 통하여 Creative Exchange Live를 컨넥하고 SASS Pre-Processor를 이용하여 CSS file을 생성하였다. 새로운 CSS 파일이 생성되고 업로드되면 Sitecore SXA는 Theme 안의 CSS 파일들을 모아 Optimized CSS 파일을 생성하여 페이지 레이아웃에 적용한다.

Sitecore Space - 사이트코어

2019년 9월 25일 수요일

SXA에서 새로운 사이트를 생성하고 스타일 업데이트하기