시작하기 - 개발자 자습서

이 튜토리얼에서는 새로운 AEM(Adobe Experience Manager) 프로젝트를 시작하고 실행하게 됩니다. 10~20분 만에 나만의 사이트를 구축하고, 콘텐츠를 만들고, 스타일링하고, 미리 보고, 게시하고, 새 블록을 추가할 수 있습니다.

사전 요구 사항:

이 자습서에서는 macOS, Chrome 및 Visual Studio 코드를 개발 환경으로 사용하며 스크린샷과 지침은 해당 설정을 반영합니다. 다른 운영 체제, 브라우저 및 코드 편집기를 사용할 수 있지만 표시되는 UI와 수행해야 하는 단계는 그에 따라 다를 수 있습니다.

보일러판 저장소 템플릿 시작

AEM 모범 사례를 따르는 가장 빠르고 쉬운 방법은 Boilerplate GitHub 저장소를 템플릿으로 사용하여 저장소를 만드는 것입니다.

https://github.com/adobe/aem-boilerplate

Use this template 단추를 클릭하고 Create a new repository을(를) 선택한 다음 저장소를 소유하는 사용자 조직을 선택합니다

저장소를 public(으)로 설정하는 것이 좋습니다.

GitHub의 남은 유일한 단계는 다음 링크를 방문하여 저장소에 AEM 코드 동기화 GitHub 앱을 설치하는 것입니다. https://github.com/apps/aem-code-sync/installations/new

AEM 코드 동기화 앱의 Repository access 설정에서 All Repositories이(가) 아닌 Only select Repositories을(를) 선택해야 합니다. 그런 다음 새로 만든 리포지토리를 선택하고 Save을(를) 클릭합니다.

참고: IP 필터링과 함께 Github Enterprise를 사용하는 경우 허용 목록에 다음 IP를 추가할 수 있습니다. 3.227.118.73

축하합니다! https://<branch>--<repo>--<owner>.aem.page/에서 실행 중인 새 웹 사이트가 있습니다. 위의 예에서는 https://main–mysite–aemtutorial.aem.page/입니다.

Google 드라이브를 사용하여 고유한 콘텐츠 소스 연결

Boilerplate GitHub 리포지토리의 포크에서 사이트는 Google 드라이브의 기존 콘텐츠 소스를 가리킵니다. 예제 컨텐츠가 필요하면 이 폴더를 참조하십시오.

이 콘텐츠는 읽기 전용이지만 시작점으로 사용하기 위해 Google 드라이브 폴더에 복사할 수 있습니다.

나만의 콘텐츠를 작성하려면 나만의 Google 드라이브에 폴더를 만들고 이 폴더를 Adobe Experience Manager 사용자(helix@adobe.com)와 공유하십시오.

나만의 콘텐츠 작성을 시작하는 좋은 방법은 샘플 콘텐츠에서 index, nav 및 footer을(를) 복사하고 콘텐츠 구조를 숙지하는 것입니다. nav 및 footer은(는) 프로젝트에서 자주 변경되지 않으며 특수 구조를 갖습니다. 프로젝트에 있는 대부분의 파일은 index과(와) 더 비슷합니다.

파일을 열고 전체 콘텐츠를 자신의 Google 드라이브에 있는 해당 파일에 복사하거나 붙여 넣습니다. Download All을(를) 통해 파일을 다운로드하거나 개별 파일을 다운로드할 수도 있습니다. 그러나 다운로드한 .docx개의 파일을 Google 드라이브의 폴더에 업로드할 때에는 다시 기본 Google Docs으로 변환해야 합니다.

이제 콘텐츠가 준비되었으므로 해당 콘텐츠를 GitHub 저장소에 연결해야 합니다. GitHub 저장소의 fstab.yaml에 있는 참조를 방금 공유한 폴더로 변경하면 됩니다.
Google 드라이브의 폴더 URL을 fstab.yaml(으)로 복사/붙여넣으십시오.

변경 작업을 수행하면 콘텐츠를 아직 미리 보지 않았으므로 404 not found 오류가 표시됩니다. 다음 섹션을 참조하여 콘텐츠 작성 및 미리보기를 시작하는 방법을 확인하십시오. index, nav 및 footer을(를) 통해 복사한 경우 이들 세 문서는 모두 고유한 미리보기 및 게시 주기가 있는 별도의 문서이므로 필요한 경우 모두 미리보기(및 게시)해야 합니다.

변경 사항을 커밋하고 자신의 콘텐츠 소스를 웹 사이트에 연결했습니다.

콘텐츠 미리보기 및 게시

마지막 단계를 완료한 후 새 콘텐츠 원본은 비어 있지 않지만, 콘텐츠가 preview 또는 live 단계로 승격되지 않았습니다. 즉, 웹 사이트가 404초 동안 제공됩니다.

콘텐츠를 미리 보려면 작성자가 Sidekick Chrome 확장을 설치해야 합니다. Chrome 웹 스토어에서 Chrome 확장을 찾습니다.

확장을 Chrome에 추가한 후 고정하면 쉽게 찾을 수 있습니다.

Chrome 확장을 설정하려면 이전에 공유한 Google 드라이브 폴더로 이동하여 브라우저 도구 모음에서 확장 아이콘을 클릭하고 Add this project을(를) 선택합니다.

확장이 설치되고 프로젝트가 추가되면 바로 Google 드라이브에서 콘텐츠를 미리 보고 게시할 준비가 된 것입니다.

세 개의 문서를 모두 선택하고 고정된 확장을 클릭하여 AEM Sidekick을 활성화합니다. 새 도구 모음이 나타납니다. preview 또는 publish 단추를 클릭하면 해당 작업이 트리거됩니다.

index 문서를 열고 일부 내용을 변경합니다. 고정된 확장을 클릭하여 Sidekick을 활성화한 다음 Preview 단추를 클릭하면 미리 보기 작업이 트리거되고 컨텐츠의 미리 보기 렌디션이 포함된 새 탭이 열립니다.

스타일 및 기능 개발 시작

개발을 시작하려면 다음을 사용하여 AEM 명령줄 인터페이스(CLI)를 설치하고 저장소를 로컬로 복제하는 것이 가장 쉽습니다.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

여기에서 프로젝트 폴더를 변경하고 다음을 사용하여 로컬 개발 환경을 시작합니다.

cd <repo>
aem up

http://localhost:3000/이(가) 열리고 변경할 준비가 되었습니다.
blocks 폴더에서는 대부분의 스타일 및 코드가 프로젝트에 사용됩니다. .css 또는 .js 을(를) 변경하면 변경 내용이 즉시 브라우저에 표시됩니다.

변경 사항을 푸시할 준비가 되면 Git을 사용하여 코드를 미리보기(https://<branch>--<repo>--<owner>.aem.page/) 및 프로덕션(https://<branch>--<repo>--<owner>.aem.live/) 사이트에 추가, 커밋 및 푸시하면 됩니다.

완료되었습니다. 성공했습니다! 축하합니다. 첫 번째 사이트가 실행 중입니다. 자습서에 대한 도움이 필요한 경우 디스코드 채널에 참여 하거나 문의하세요.