Craft CMS 시작 및 실행

Craft CMS는 Pixel & Tonic의 재능 있는 사람들이 제공합니다. 현대 웹 개발 세계의 변화에 ​​따라 적극적으로 유지 관리되고 유지되며 Netflix와 같은 인상적인 클라이언트 목록과 함께 CMS 사이에서 인기를 얻고 있습니다. 또한 매우 활동적인 Discord 서버를 보유하고 있으며 라이브 시작 1년 만에 5,000명 이상의 회원으로 성장했습니다.

왜 크래프트 CMS를 사용합니까?

Craft CMS는 약 4년 동안 우리가 가장 많이 사용하는 CMS였습니다. 우리는 Craft에서 클라이언트 웹사이트와 우리 자신의 비즈니스를 구축했습니다. 회사로서 우리는 CMS 시장을 지속적으로 확인하고 있으며 항상 Craft로 돌아왔습니다. 따라서 시장에 나와 있는 다른 제품보다 Craft CMS를 선택한 이유를 살펴보겠습니다.

• 인터페이스 친숙성, WordPress에서 오는 모든 사람이 상당히 쉽게 만들 수 있습니다.
• 활발한 개발 커뮤니티.
• 콘텐츠 구성 방식을 제어할 수 있는 유연한 필드.
• 고정 또는 월 사용료가 없습니다. Pro/eCommerce로 이동하는 경우 일회성 비용입니다.
• Craft의 성장하는 플러그인 스토어를 통한 확장성.

따라서 소개는 생략하고 15분 안에 완전히 설정된 Craft CMS 로컬 환경을 시작하고 실행하는 방법을 보여 드리겠습니다. 다음 단계를 완료하면 다음 웹 프로젝트를 시작할 수 있는 훌륭한 기반을 갖게 되며, WordPress에서 영원히 벗어날 준비가 되었을 것입니다.

개발 환경 설치

Craft CMS는 로컬 환경을 설정하는 데 매우 편리한 도구와 함께 제공됩니다. 이 도구를 Craft Nitro라고 하며 Craft CMS 환경을 간단하게 설정할 수 있습니다. Craft 장면에 새롭지만 많은 도움이 됩니다.

멀티패스 설정

Craft Nitro에는 시스템에 Ubuntu 가상 머신을 생성하는 Multipass라는 것이 필요합니다. (걱정하지 마세요. Ubuntu를 설정하거나 열 필요가 없습니다.)

• 공식 웹사이트에서 운영 체제에 맞는 최신 Multipass 설치 프로그램을 다운로드하십시오.
• 다운로드가 완료되면 설치 프로그램을 실행합니다. 이 작업이 완료되면 다음 단계로 이동할 준비가 된 것입니다.
  

Craft Nitro 설정

Craft Nitro 설정은 간단하며 macOS 및 Linux에 설치하기 위한 하나의 명령줄 스크립트가 포함되지만 Windows의 경우 약간 다릅니다. 아래에서 두 가지 유형의 운영 체제에 대해 설정하는 방법을 살펴보겠습니다. 좋은 소식은 일단 설정이 완료되면 이 과정을 다시 거치지 않고도 새로운 Craft 설치를 쉽게 만들 수 있다는 것입니다.

macOS 및 Linux에 설치

터미널을 열고 다음 스크립트 줄을 붙여넣습니다. 붙여넣은 후 명령줄의 옵션 프롬프트에 따라 Craft Nitro에 있는 사전 설정으로 가상 머신을 만듭니다. 이것은 완벽해야 하지만 미세 조정을 원하면 가십시오. Craft는 원활하게 실행하기 위한 최소 요구 사항이 있음을 명심하십시오.

터미널에서 다음 줄을 실행합니다.

 bash <(curl -sLS https://installer.getnitro.sh)

Windows 10 Pro에 설치

Windows에 설치하는 것은 상당히 복잡하지만 시작하고 실행하는 데 너무 많은 시간이 걸리지 않아야 합니다. Hyper-V가 활성화되어 있는지 확인하십시오. 불행히도 Hyper-V는 Windows의 Home Edition 버전에 설치할 수 없습니다.

1. Hyper-V가 활성화되어 있는지 확인하십시오(자세한 내용은 여기).
2. 최신 릴리스에서 nitro_windows_x86_64.zip 을 다운로드하십시오.
3. home 폴더에 Nitro 폴더가 없으면 생성합니다(예: C:\Users\<username>\Nitro ).
4. zip 파일의 압축을 풀고 nitro.exe 를 홈 폴더에서 방금 만든 Nitro 폴더에 복사합니다.
5. 처음 설치하는 경우 명령줄에서 실행하여 전역 경로에 Nitro를 추가합니다.
   

    setx path "%PATH%;%USERPROFILE%\Nitro"

6. 관리자 권한으로 Windows 터미널( cmd.exe )을 시작하고 Nitro를 실행합니다.

위의 작업을 완료했으면 터미널 지침에 따라 첫 번째 컴퓨터를 만듭니다. Craft Nitro에서 설정한 기본 사전 설정은 사용자 환경에 완벽해야 합니다.

크래프트 CMS 설치

지금까지 Craft Nitro를 설치하고 가상 머신을 만들었으며 이제 Craft CMS를 설치할 준비가 되었습니다. 다음 지침에서는 Craft를 다운로드하고 파일을 "마운트"하여 현재 시스템에서 개발하고 Ubuntu 가상 머신에 반영된 변경 사항을 볼 수 있습니다. 또한 초기 데이터베이스를 설정하고 사용할 수 있는 로컬 도메인(예: myfancyproject.test)을 얻을 것입니다. 가자:

새 프로젝트 만들기

1. Craft를 개발/설치할 새 폴더를 만듭니다.
2. 최신 릴리스에서 Craft CMS를 다운로드합니다(Composer 또는 Zip을 통해).
3. 방금 만든 폴더로 내용의 압축을 풀거나 이동합니다.
4. 터미널/명령줄 열기;
5. 생성된 폴더로 이동합니다. $ cd /path/to/project ;
6. nitro add 실행 ;
7. 화면의 명령줄 프롬프트를 따릅니다. (사전 설정은 일반적으로 괜찮지만 원하는 대로 수정합니다.)

팁 : macOS에서 "읽을 수 없음" 문제가 표시되면 Multipass에 전체 디스크 액세스 권한이 있어야 합니다. 이렇게 하려면 시스템 환경 설정 → 보안 및 개인 정보 보호 → 개인 정보 보호 → 전체 디스크 액세스에서 multipassd가 선택되어 있는지 확인하십시오.

데이터베이스에 연결하기

이제 테스트 도메인이 있어야 하고 프로젝트 파일이 마운트되어야 합니다. 지금까지는 꽤 쉬웠고 어려운 부분이 완료되었습니다. 데이터베이스에 연결하려면 프로젝트의 .env 파일에 새로 생성된 사이트에 대한 데이터베이스 세부 정보를 추가해야 합니다.

1. 프로젝트의 .env 파일(루트 폴더에 있음)을 엽니다.
2. 데이터베이스 세부 정보를 다음으로 변경합니다.
   

    DB_USER="nitro" DB_PASSWORD="nitro" # 'nitro' is the default database DB_DATABASE="nitro"

팁 : 선택한 SQL 프로그램에서 데이터베이스를 열려면 명령줄에서 nitro info를 실행하기만 하면 됩니다. 그러면 "IPV4" 아래에 데이터베이스 IP 주소가 표시됩니다. 위의 사용자 이름과 암호(설정 중에 선택한 포트와 함께)를 사용하여 연결합니다.

크래프트 CMS 설치

가상 머신을 설정하고 테스트 도메인을 설정했으며 데이터베이스를 사용할 준비가 되었습니다. 이제 실제로 Craft CMS를 설치하고 관리 섹션으로 들어갈 시간입니다. 여기에서 모든 것이 순조롭게 진행되어야 합니다. 이제 시작하겠습니다.

1. 설정하는 동안 설정한 테스트 도메인으로 이동한 다음 /admin (예: testdomainyouset.test/admin )을 입력합니다.
2. Craft CMS의 설치 화면이 표시되어야 합니다( 만세! ).
3. 화면의 설치 프로그램 지침을 따르십시오.
4. 완료되면 새 관리자 패널로 리디렉션되어야 합니다.

팁 : Composer를 통해 Craft를 설치하지 않은 경우 보안 키를 입력하라는 메시지가 표시될 수 있습니다. 암호화 보안 키를 생성하려면 1Password / LastPass와 같은 암호 관리자를 사용하십시오. (길이 제한이 없으므로 원하는 만큼 복잡할 수 있습니다.) .env 파일을 한 번 더 열고 SECURITY_KEY="" 줄을 찾아 생성된 키를 따옴표 안에 붙여넣고 저장합니다.

이제 WordPress에서 고양이 블로그를 옮기거나 전자 상거래 상점을 만드는 등 개발하려는 모든 것에 대한 훌륭한 출발점을 제공할 Craft CMS용 로컬 개발 환경이 완전히 설정되어 있어야 합니다. 명령줄에서 nitro stop 을 사용한 후에는 서버를 끄는 것을 잊지 마십시오.

다음은 개발 중에 도움이 될 Craft의 Nitro에 대한 몇 가지 유용한 명령입니다.

• nitro start (개발 서버 시작)
• nitro stop (개발 서버 중지)
• nitro context (설치된 환경에 대한 정보 표시)
• nitro info (현재 환경 정보, PHP 버전 등)

고양이 블로그 설정하기

이제 Craft를 시작하고 실행했으므로 고양이 블로그를 시작하고 Craft가 제공하는 기능을 즐길 수 있습니다. 이 섹션에서는 콘텐츠 모델을 설정하고 기본 테마 템플릿을 만들고 홈페이지와 내부 게시물 페이지를 구축할 것입니다.

콘텐츠 모델은 무섭게 들리지만 Craft에서는 그 반대입니다. 사용하기 쉬운 GUI 시스템이 있습니다. 복잡한 코드가 필요 없습니다! 고양이 블로그의 경우 고양이 이름, 사진 및 간단한 설명이 필요한 "고양이"라는 섹션을 설정한 다음 단일 페이지 "홈페이지"를 설정해야 합니다.

섹션 및 페이지를 만드는 방법 고양이 게시물을 만드는 방법

섹션 및 페이지를 만드는 방법

Craft의 언어 내에서 "단일"로 분류될 "고양이" 섹션과 홈페이지를 만들 것입니다. 섹션은 웹사이트의 섹션처럼 들리는 것과 정확히 같으며 페이지는 법률 및 당사 홈페이지와 같은 웹사이트의 단일 페이지이기도 합니다.

고양이 섹션 만들기

1. 왼쪽 메뉴에서 설정으로 이동합니다.
2. "섹션"을 클릭하십시오.
3. "새 섹션"을 클릭하십시오.
4. "이름"에 Cats 를 넣으십시오.
5. 섹션 유형 Channel
   ( 채널은 고양이처럼 유사한 콘텐츠의 스트림에 사용됩니다. )
6. "항목 URI 형식" 내에서 /cats/{slug} 인지 확인합니다.
7. "Template" 안에 cat 을 넣을 것입니다.
8. 구하다.

위에서 우리가 한 것은 Cats 섹션 내의 모든 게시물이 ourtestdomain.test/cats/fluffy 와 같은 URL 형식을 갖기를 원하고 우리가 사용하려는 템플릿은 cats.twig 에 알리는 것입니다.

홈페이지 만들기

1. "섹션" 내에서 "새 섹션"을 클릭합니다.
2. "이름"에 Homepage ;
3. 단면 유형 Single ;
4. "홈페이지" 확인란을 선택합니다.
5. "템플릿" 안에 index 를 넣을 것입니다.
6. 구하다.

필드 생성

Craft에는 만들고 싶은 것에 대한 선입견이 없습니다. 그것은 당신에게 완전히 백지 상태를 제공합니다. 우리는 우리 자신의 "필드"를 생성하여 우리가 원하는 포스트 구조를 정확히 생성합니다. 다음 이름, 설명 및 사진에 대해 고양이의 "필드"를 만들어 보겠습니다.

1. yourchosendomain.test/admin 을 방문하여 사이트의 관리 섹션으로 이동하십시오.
2. 왼쪽 메뉴에서 설정으로 이동합니다.
3. "필드"를 클릭하십시오.
4. 오른쪽 상단에서 "새 필드"를 클릭합니다.

고양이 이름 설정하기

고양이의 이름이 필요하므로 name 필드를 만들어 보겠습니다.

• 이름 에 "고양이 이름"을 입력하십시오.
• 필드 유형에서 "일반 텍스트"를 선택하십시오.
• 이제 저장합니다.
  

고양이 설명 설정하기

고양이도 설명이 필요하지만 작가가 각 고양이에 대해 입력할 수 있는 문자 수를 제한합시다.

• "새 필드"를 다시 클릭하십시오.
• 이름에 "고양이 설명"을 입력하십시오.
• "일반 텍스트"필드 유형을 다시 선택하십시오.
• 필드 제한 상자에 "2000"을 추가하여 제한을 만듭니다.
• 저장을 클릭합니다.

고양이 사진 설정하기

우리는 각각의 고양이 게시물에 사진을 추가하려고 하며 고양이당 여러 장의 사진이 있을 수 있습니다. 문제가 되지는 않습니다. 그러나 필드를 생성하기 전에 Craft에게 서버에서 사진을 저장할 위치를 알려야 합니다. (Craft에는 클라우드 스토리지 솔루션에 업로드하는 옵션도 있습니다.)

• 왼쪽 메뉴에서 "설정"으로 이동하십시오.
• "자산"을 클릭하십시오.
• "새 볼륨"을 클릭하십시오.
• 이름에 "고양이 사진"을 넣으십시오.
• "이 볼륨의 자산에는 공개 URL이 있습니다"를 활성화합니다.
• "기본 URL"에 @web/uploads/ 를 입력하십시오.
• "파일 시스템 경로"에 @webroot/uploads/ 를 입력하십시오.
• 구하다.

위의 속성은 Craft에 업로드된 파일을 저장할 위치를 알려줍니다. 원하는 대로 변경할 수 있습니다. 문서에서 이에 대한 환경 변수 설정에 대해 자세히 알아볼 수도 있습니다.

섹션에 필드 일치

이제 필드와 섹션을 설정하고 실행했으므로 섹션에 포함할 필드를 지정하여 두 가지를 결합해야 합니다. 이것은 Craft에서 드래그 앤 드롭만큼 쉽습니다.

• 설정으로 이동하십시오.
• "섹션"을 클릭하십시오.
• 이제 "섹션 유형 편집"을 클릭하십시오.
• 이제 "고양이"섹션을 클릭하십시오.
• 오른쪽 메뉴에서 "필드" 탭을 선택합니다.
• 이전에 생성한 "Cats" 필드를 콘텐츠 창으로 드래그 합니다.
• 드래그하면 고양이 섹션을 저장하십시오.

팁 : "제목 필드 표시" 옵션을 비활성화하여 게시물에서 "제목" 필드를 제거할 수 있습니다. 예를 들어 고양이의 이름을 제목으로 원할 수 있습니다.

고양이 포스트를 만드는 방법

이제 실제로 푹신한 고양이 게시물을 만들 차례입니다. 왼쪽 관리 메뉴의 "항목"으로 이동합니다.

• "새 항목"을 클릭하십시오.
• 드롭다운에서 "고양이"를 선택하십시오.
• 게시물을 작성하세요! ( 부드러울수록 좋습니다. )

고양이 기사 나열하기

이제 콘텐츠 모델이 완료되었으므로 고양이 블로그의 기본 인터페이스 구축을 시작할 수 있습니다. Craft는 Twig/Liquid 언어로 작성되었습니다. Shopify 개발에 손을 댄 적이 있다면 이것은 익숙할 것입니다. 그렇지 않은 경우 픽업하기가 매우 쉽습니다. 그러나 먼저 즐겨 사용하는 코드 편집기(Craft 설치의 압축을 푼 위치)에서 Craft 설치 폴더를 열어야 합니다.

1. 코드 편집기에서 Craft Install을 엽니다.
2. index.twig 라는 템플릿에서 새 파일을 만듭니다.
   ( Craft는 기본 인덱스를 설치했을 수 있습니다. 대신 이것을 열고 지우십시오. )
3. 다음 코드를 추가합니다.

 <!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml" lang="en-US"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> {# Create an entry query with the 'section' and 'limit' parameters #} {% set myEntryQuery = craft.entries() .section('cats') .limit(10) %} {# Fetch the entries #} {% set entries = myEntryQuery.all() %} {# Display the entries #} <div class="container"> <div class="row"> {% for entry in entries %} <div class="col"> <article class="card"> {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} <div class="card-body"> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> <h2>{{ entry.catsName }}</h2> <p>{{ entry.catsDescription }}</p> <a class="btn btn-primary" href="{{ entry.url }}">View {{ entry.catsName }}</a> </div> </article> </div> {% endfor %} </div> </div> </body> </html>

위의 코드에서 Craft에 "Cats" 섹션에 대해 알리고 게시물에 제한을 10으로 설정합니다. 그런 다음 해당 섹션에서 항목을 가져오고 다음 코드의 가져오기 항목 내에서 각 고양이를 계속 반복합니다. . 이미지는 Craft에서 약간 다릅니다. 배열로 저장되므로 고양이의 이미지를 가져오기 위해 코드 내에서 또 다른 루프를 수행합니다.

테스트하자

설정 중에 생성한 테스트 개발 URL을 엽니다. (nitro 서버가 nitro start 를 사용하여 실행 중인지 확인하십시오). 이제 인덱스 페이지에 생성된 게시물이 표시되어야 합니다. 자세한 정보를 보기 위해 클릭하면 404 오류가 발생하므로 다음에 수정하겠습니다!

팁 : 좀 더 멋지게 보이도록 Bootstrap을 포함했지만 원하는 프레임워크를 자유롭게 포함할 수 있습니다.

고양이 포스트 페이지

인덱스 페이지에서 했던 것과 동일한 작업을 수행할 것입니다. 템플릿 폴더 안에 cat.twig 라는 새 파일을 만들어 cat 템플릿을 만들어 보겠습니다. 이미 Entry 컨텍스트 내에 있으므로 다시 쿼리할 필요가 없습니다.

 <html> <body> {% block content %} {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} {{ entry.title }} {{ entry.catsName }} {{ entry.catsDescription }} {% endblock %} </body> </html>

이것을 저장하고 테스트 개발 웹사이트를 새로 고칩니다. 이제 고양이 항목 페이지를 탐색할 수 있어야 합니다! 짜잔!

머리가 없어진다

Craft로 더 많은 기술을 사용하고 웹 앱에 피드하기 위한 콘텐츠 관리 시스템으로 사용하고 싶다면 사용자 계정과 GraphQL을 구성에 추가하는 Craft CMS의 Pro 패키지를 사용하여 이를 수행할 수 있습니다. Craft의 Pro 버전은 무료로 시험 및 테스트할 수 있습니다. 즉, 커밋하기 전에 철저한 테스트를 수행할 수 있습니다. 이제 Craft의 내장 GraphQL 편집기를 사용하여 기본 GraphQL API를 설정하는 방법에 대해 알아보겠습니다.

프로 평가판 시작

Craft CMS를 설치했으면 "플러그인 스토어"로 이동하여 왼쪽 메뉴 옵션에서 "업그레이드"를 찾으십시오. "Pro" 섹션에서 "Trial"을 클릭하고 업그레이드 프로세스를 실행합니다.

기본 설정

Pro Craft CMS 평가판을 시작하면 이제 관리자 측면 패널에 GraphQL이라는 새로운 메뉴 옵션이 표시됩니다. 바로 시작하기 전에 출력을 구성할 수 있는 몇 가지 콘텐츠 모델이 필요합니다. 콘텐츠 모델을 생성하면 Craft CMS가 자동으로 GraphQL API를 즉시 생성합니다. 스키마를 정의할 필요도 없습니다!

Cat API 엔드포인트 생성

콘텐츠가 정렬되었습니다. 이제 귀여운 고양이 콘텐츠를 모두 가져올 수 있도록 끝점을 만들고 싶습니다. 지금 해보자:

1. IDE에서 Craft CMS 프로젝트 route.php 를 엽니다.
2. 다음 규칙을 추가하면 https://yourprojecturl.test/api 에서 API 엔드포인트를 사용할 수 있습니다.
   

    return [ 'api' => 'graphql/api', // ... ];

3. 저장하고 닫습니다.
4. 엔드포인트를 ping하여 테스트합니다.
   

    curl -H "Content-Type: application/graphql" -d '{ping}' https://yourprojecturl.test/api

5. 응답으로 "퐁"을 받아야 합니다.

콘텐츠 활성화

요청을 수신하도록 엔드포인트를 설정했습니다. 이제 API를 통해 사용하고자 하는 사이트의 특정 부분을 활성화/비활성화할 차례입니다. 예를 들어 민감한 정보가 포함된 특정 항목을 해제할 수 있습니다. Craft는 이 프로세스를 매우 쉽게 만듭니다. 틱/언틱의 경우입니다. (자신만의 스키마를 작성하여 더 복잡해질 수도 있습니다.) 지금은 공개적으로 사용할 수 있는 공개 스키마를 만들 것입니다. 비밀 키가 필요한 개인 스키마를 생성할 수 있지만 이는 이 가이드의 범위를 벗어납니다.

1. 관리자 패널 사이드바를 통해 GraphQL 섹션으로 이동하십시오.
2. "공개 스키마"를 클릭하십시오.
3. "고양이"섹션을 활성화하십시오.
   ( 이렇게 하면 엔드포인트를 통해 콘텐츠를 사용할 수 있습니다. )
4. 구하다.
   

엔드포인트 테스트

이제 끝점을 통해 사용할 수 있도록 하려는 데이터를 선택했으므로 이제 테스트할 차례입니다. 왼쪽 관리자 패널의 GraphQL 드롭다운에서 "GraphiQL"이라는 항목을 볼 수 있습니다. GraphiQL을 사용하면 API를 탐색하고 대시보드 내에서 쿼리할 수 있습니다.

1. GraphiQL을 엽니다.
2. "전체 스키마"를 "공개 스키마"로 변경하십시오.
3. 왼쪽 창에 다음 GraphQL 쿼리를 작성합니다.
   

    query ($section: [String], $orderBy: String) { entries(section: $section, orderBy: $orderBy) { title slug id } }

4. "재생" 버튼을 클릭합니다.

팁 : GraphQL 쿼리를 100% 사용하지 않더라도 문제가 되지 않습니다. Craft는 도움이 되는 편리한 가이드와 함께 제공됩니다.

마무리

우리는 이제 Craft CMS의 세계에 대해 상당히 가벼운 다이빙을 했습니다. 다음 가이드에서 수행한 작업을 요약해 보겠습니다.

• Multipass로 로컬 개발 환경을 설정하십시오.
• 새로운 Craft 설치를 만들고 설정했습니다.
• 설치에 액세스할 수 있는 테스트 도메인을 추가했습니다.
• 귀여운 고양이 블로그를 만들었습니다.
• 머리가 없어졌다;
• 고양이에 액세스하기 위한 API 엔드포인트를 만들었습니다.
  

Craft CMS에 더 많이 참여하고 커뮤니티의 일원이 되는 데 관심이 있다면 매우 활발한 Craft Discord 서버에 가입하고 공식 문서를 통해 자세한 내용을 읽어야 합니다.