시작하기 - 개발자 튜토리얼

AEM 프로젝트의 GitHub 저장소를 만듭니다. 저장소를 만드는 방법은 다음과 같습니다.

1. https://github.com/adobe-rnd/aem-boilerplate-forms로 이동합니다.

   

2. 이 템플릿 사용 옵션을 클릭하고 새 저장소 만들기 옵션을 선택합니다. 새 저장소 만들기 화면이 열립니다.

   

3. 새 저장소 만들기 화면에서 소유자 ​를 선택하고 저장소 이름 ​을 지정합니다. Adobe에서는 저장소를 공개 ​로 설정할 것을 권장합니다. 따라서 공개 옵션을 선택하고 저장소 만들기 ​를 클릭합니다.

저장소에 AEM Code Sync GitHub 앱을 설치합니다. 설치하는 방법은 다음과 같습니다.

1. https://github.com/apps/aem-code-sync/installations/new로 이동합니다.
2. AEM Code Sync 설치 화면에서 저장소만 선택 옵션을 선택하고 새로 만든 저장소를 선택합니다. 저장을 클릭합니다.

축하합니다! https://<branch>--<repo>--<owner>.hlx.page/에서 새 웹 사이트가 실행되고 있습니다.

• <branch>는 GitHub 저장소의 분기를 나타냅니다.
• <repository>는 GitHub 저장소를 나타냅니다.
• <owner>는 GitHub 저장소를 호스팅하는 GitHub 계정의 사용자 이름을 나타냅니다.

예를 들어 분기 이름이 main이고 저장소가 wefinance이며 소유자가 wkndforms인 경우 웹 사이트는 https://main–wefinance–wkndforms.hlx.page/에서 실행됩니다.

Google Drive 또는 Microsoft SharePoint에서 AEM 콘텐츠를 위한 전용 폴더를 새로 만듭니다. 이 문서에서는 Microsoft SharePoint에서 만든 폴더를 사용합니다.

Adobe Experience Manager 사용자(helix@adobe.com)와 폴더를 공유합니다.

Adobe Experience Manager 사용자에게 폴더에 대한 편집 권한을 제공해야 합니다.

Google Drive 폴더에 저장된 예시 콘텐츠를 폴더에 복사합니다. 복사하는 방법은 다음과 같습니다.

1. 파일을 함께 다운로드하거나 개별 파일을 다운로드합니다.

   

   nav 및 footer 파일은 페이지의 기본 레이아웃을 정의하며 프로젝트 전체에서 거의 변경되지 않습니다. 또한 대부분의 다른 콘텐츠 파일과 다른 특정한 구조를 하고 있습니다. 이러한 파일을 검토하면 AEM 프로젝트에서 콘텐츠가 어떻게 구성되어 있는지 파악할 수 있습니다.

2. 이 파일을 Microsoft SharePoint 또는 Google 드라이브 폴더에 업로드합니다.

   

   샘플 콘텐츠의 enquiry 시트를 Google Drive 또는 Microsoft SharePoint의 폴더로 복사해야 합니다. 여기에 샘플 양식의 구조가 포함되어 있습니다.

이제 콘텐츠 폴더를 설정했으므로 앞서 AEM Forms 상용구를 사용하여 만든 GitHub의 프로젝트에 이를 연결할 차례입니다. 연결하는 방법은 다음과 같습니다.

1. 앞서 AEM Forms 상용구를 사용하여 만든 GitHub 저장소로 이동합니다.

2. 편집할 fstab.yaml을 엽니다.

3. 기존 참조를 AEM 사용자(helix@adobe.com)와 공유한 폴더 경로로 바꿉니다.

   

   Microsoft SharePoint를 사용하는 경우 폴더 경로는 다음 형식을 사용합니다.

   code language-html
   https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>

   예:

   code language-html
   https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance

   Microsoft SharePoint에서의 파일 관리에 대한 자세한 내용은 Adobe SharePoint 사용 방법을 확인하십시오.

4. 참조를 업데이트했고 모든 항목에 문제가 없으면 업데이트된 fsatb.yaml 파일을 커밋합니다. 빌드 문제가 발생하면 GitHub 빌드 문제 해결을 참조하십시오.

   

   그러면 콘텐츠 폴더가 웹 사이트에 연결됩니다. 참조를 업데이트한 후 처음에는 “404 Not Found” 오류가 발생할 수 있습니다. 이는 콘텐츠의 미리보기를 아직 완료하지 않았기 때문입니다. 다음 섹션에서는 콘텐츠 작성 및 미리보기를 시작하는 방법을 설명합니다.

AEM Sidekick이라는 Chrome 확장 기능을 설치합니다.

Chrome에 확장 기능을 설치한 후 고정하는 것을 잊지 마십시오. 이렇게 하면 쉽게 찾을 수 있습니다.

Sidekick Chrome 확장 기능을 설정하려면 이전에 공유한 Google Drive 또는 Microsoft SharePoint 폴더로 이동하여 브라우저 도구 모음에서 확장 기능 아이콘을 마우스 오른쪽 버튼으로 클릭하고 Add this project를 선택합니다.

확장 기능이 설치되고 프로젝트가 추가되면 Google Drive에서 콘텐츠를 미리 보고 게시할 수 있습니다.

Microsoft SharePoint 또는 Google Drive 폴더에 있는 모든 문서를 선택합니다. Ctrl 키(Windows/Linux) 또는 Cmd 키(Mac)를 누른 상태에서 클릭하면 여러 문서를 선택할 수 있습니다.

Chrome 확장 기능 막대에 고정된 AEM Sidekick 아이콘을 클릭합니다. 화면에 도구 모음이 나타납니다. 콘텐츠를 미리 보거나 게시할 수 있습니다.

index, nav, footer 및 enquiry 파일을 복사한 경우, 모두 자체 미리보기 및 게시 주기가 있는 별도의 문서이므로 모두 미리 보고 게시해야 합니다.

파일을 미리 보고 나면 새 브라우저 탭에 문서가 표시됩니다. 샘플 양식을 미리 보려면 다음 URL로 이동합니다.

https://<branch>--<repository>--<owner>.hlx.live

• <branch>는 GitHub 저장소의 분기를 나타냅니다.
• <repository>는 GitHub 저장소를 나타냅니다.
• <owner>는 GitHub 저장소를 호스팅하는 GitHub 계정의 사용자 이름을 나타냅니다.

https://<branch>--<repo>--<owner>.hlx.page/enquiry URL.

예를 들어 프로젝트 저장소의 이름이 “wefinance”이고 “wkndforms” 계정 아래에서 “main” 분기를 사용하는 경우 URL은 다음과 같습니다.

https://main–wefinance–wkndforms.hlx.page

AEM CLI 설치: AEM CLI는 개발 작업을 단순화합니다. npm을 사용하여 전역적으로 설치해 보겠습니다.

    npm install -g @adobe/aem-cli

GitHub 프로젝트 복제: 다음 명령을 사용하여 GitHub에서 프로젝트 저장소를 복제합니다. 이때 저장소 소유자와 저장소 이름은 바꿉니다.

git clone https://github.com/<owner>/<repo>

로컬 환경 시작: 프로젝트 디렉터리로 이동하고 다음 단일 명령으로 로컬 AEM 인스턴스를 실행합니다.

cd <repo>
aem up

적응형 양식 블록 저장소 https://github.com/adobe-rnd/aem-boilerplate-forms를 컴퓨터에 복제합니다.

다운로드한 폴더 내에서 blocks/form 폴더를 찾습니다. 이 폴더를 복사합니다. 이제 AEM 프로젝트의 로컬 blocks 폴더로 이동하여 복사한 양식 폴더를 여기에 붙여넣습니다.

GitHub의 AEM 프로젝트에 이러한 변경 사항을 커밋하고 푸시합니다.