Gatsby 및 Medusa로 오픈 소스 전자상거래 상점 만들기

Medusa은 전자 상거래 상점을 만드는 동안 뛰어난 개발자 경험을 제공하는 데 중점을 둔 오픈 소스 헤드리스 상거래 플랫폼입니다.

Medusa의 헤드리스 아키텍처를 사용하면 원하는 프로그래밍 언어나 프레임워크를 REST API에 연결하기만 하면 매장을 만들 수 있습니다. 상점 첫화면에 제품을 표시할 수 있고 전체 전자상거래 체크아웃 워크플로우를 갖게 됩니다.

이 자습서에서는 Gatsby 스타터를 Medusa 서버에 연결하는 방법을 배웁니다.

특징

Gatsby 스토어프론트는 기본적으로 많은 기능을 제공하며 그 중 일부는 다음과 같습니다.

모든 제품을 보고 장바구니를 관리합니다.

고객 인증.

전체 체크아웃 워크플로.

고객의 주문 ID와 이메일을 사용하여 교환 및 반품을 요청하십시오.

전제 조건

이 문서에서는 Medusa 서버가 이미 설치되어 있다고 가정합니다. 그렇지 않은 경우 this quickstart guide을(를) 팔로우하여 몇 분 안에 시작할 수 있습니다.

또한 Gatsby 스토어를 생성하는 데 사용할 Gatsby CLI 도구가 설치되어 있어야 합니다. 다음 명령으로 설치할 수 있습니다.

npm install -g gatsby-cli

Gatsby 매장 만들기

터미널에서 다음 명령을 실행하여 Gatsby로 Medusa 상점을 생성합니다.

gatsby new my-medusa-store https://github.com/medusajs/gatsby-starter-medusa

이렇게 하면 기존Medusa Gatsby starter을 사용하여 Gatsby 웹 사이트가 생성됩니다.

환경 변수 설정

백엔드로 연결하기 위해서는 환경 변수에 백엔드로 연결되는 URL을 설정해야 합니다.

Gatsby 스타터는 환경 변수를 추가하는 데 사용할 수 있는 파일.env.template과 함께 제공됩니다. 먼저 파일 이름을 바꿉니다.

mv .env.template .env.development

이렇게 하면 이름이 .env.development 로 변경됩니다. 프로덕션 용도로 이름을 .env.production로 바꾸거나 그냥 .env로 이름을 바꿀 수도 있습니다.

이 파일에는 2개의 환경 변수가 포함되어 있습니다.

GATSBY_MEDUSA_BACKEND_URL=http://localhost:9000
GATSBY_STRIPE_KEY=pk_test_something

첫 번째는 Medusa 서버의 URL입니다. 기본적으로 Medusa 서버는 localhost:9000에서 실행됩니다. 따라서 변경하지 않은 경우 그대로 둘 수 있습니다.

두 번째는 Stripe을 설정한 경우 Stripe 공개 키입니다. 없으면 그대로 두셔도 됩니다.

테스트해보기

상점을 실행하기 전에 Medusa 서버가 실행 중인지 확인하십시오.

그런 다음 Gatsby 상점 첫화면의 터미널에서 다음 명령으로 상점 첫화면을 시작하십시오.

npm start

상점은 localhost:8000에서 실행되어야 합니다.

개발에 대한 참고 사항

Gatsby 스타터는 gatsby-source-medusa 플러그인을 사용하여 Medusa 서버에서 데이터를 가져옵니다. 이 데이터에는 제품, 컬렉션 및 지역이 포함되며 결과적으로 GraphQL 쿼리를 사용하여 스타터에서 이 데이터를 쿼리할 수 있습니다. localhost:8000/___graphql에서 스토어의 데이터를 탐색할 수도 있습니다.

따라서 이 데이터가 상점 첫화면에 반영되도록 업데이트할 때마다 사이트를 다시 빌드해야 합니다. 우리는 곧 증분 빌드를 추가하는 플러그인의 새 버전을 출시할 예정이며, 이는 빌드 시간을 개선하지만 나중에 더 자세히 설명합니다.

결론

이 자습서에서는 Gatsby 스토어를 시작하고 실행하는 방법을 배웠습니다. 스토어프론트에는 제품 목록, 장바구니 관리, 체크아웃 워크플로, 고객이 이전 주문에 대한 반품 및 교환을 요청할 수 있는 옵션, 고객 로그인 및 고객 주문 내역이 포함됩니다.

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.