어떻게 메두사와 함께 짧은 시간 안에 머리 없는 E2 전자상거래 상점을 창설합니까🛍️

Wassup 여러분, 본고에서, 우리는 ShopifyMedusa의 소스 오픈 대체품을 사용하여 머리 없는 전자상거래 응용 프로그램을 만들 것입니다.

우리는 무엇을 짓고 있습니까?

https://www.loom.com/share/0b3dd851cb2d449f8c452369aa514017

메두사가 뭐예요?

메두사는 시작된 무두상무 플랫폼으로 전자상거래 사이트를 신속하게 구축하는 것이 매우 쉽다!이것은 신기한 도구입니다. 왜 메두사를 선택했는지 -

사용 편이성

확장성

개원

사용자 정의 용이

무료 시작!

도움이 필요한 대규모 지원 커뮤니티

사용하기 쉬운 많은 통합

선결 조건

우리는 기계에 어떤 물건을 설치해야 하는데, 우리에게 무엇인지 보여 주어야 한다

노드js

백엔드 서버는 Node로 구축되었습니다.그래서 서버를 실행하기 위해서는 그것이 필요합니다.우리의 앞부분도 넥스트와 함께 건설될 것이다.js는 npm가 필요하기 때문에 우리도 필요해!따라서 the Node.js website로 이동하여 권장 버전을 설치하십시오.

PostgreSQL

메두사는 전자상거래 사이트의 데이터를 저장하기 위해 Postgres를 사용한다.당신은 site에 가서 당신의 시스템에 Postgres를 설치할 수 있습니다!

레디스

Redis는 캐시에 자주 사용되는 또 다른 데이터베이스입니다.당신은 here에서 다운로드할 수 있습니다.

메두사 CLI

마지막으로 메두사 CLI가 필요합니다.우리는 이미 노드가 있기 때문이다.js가 저희 기계에 설치되어 있습니다. 이 명령을 사용하여 npm에서 쉽게 설치할 수 있습니다 -

npm i -g @medusajs/medusa-cli

초보자 빠른 시작 설명서

백엔드 서버 만들기

우리는 당신을 위한 백엔드 전자상거래 상점이 필요할 것입니다. 따라서 이 부분에서 어떻게 그것을 세우는지 봅시다.
Medusa를 사용하여 starter 서버 만들기
Medusa CLI 를 사용하면 새 서버를 쉽게 만들 수 있습니다.그래서 이 명령을 실행하면-

medusa new my-medusa-server --seed

이것은 우리를 위해 먼저 기본 서버, Postgres 데이터베이스를 만들 것이다. - seed 로고는 데이터베이스에 테스트 데이터를 추가할 것이다.
서버 시작
응용 프로그램으로 이동 -

cd my-medusa-server

Medusa를 사용하여 서버 시작 -

medusa develop 

이렇게 하면 http://localhost:9000에서 서버가 시작됩니다.

스토어의 프런트엔드 만들기

다음 거 쓸래요.우리 상점의 앞부분에 대해 메두사는 게이츠비와Create React 응용 프로그램도 지원한다.나는 초보자 템플릿을 사용할 것이다.그래서 이 명령을 실행합니다-

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

이것은 우리를 위해 새로운 다음 js 프로젝트를 만들 것입니다.TailwindCSS를 사용하고 싶다면, 내가 만든 이것 template 을 사용해 보세요..env.template의 이름을 .env.local로 변경합니다.너도 명령 하나로 완성할 수 있어-

mv .env.template .env.local

어플리케이션 실행 -

npm run dev

지금 localhost:8000로 이동하면 저희 상점의 간단한 앞면을 볼 수 있습니다.

이것도 주문 제작 가능!그래서 당신이 가장 좋아하는 코드 편집기에서 그것을 열면 VScode를 사용할 것입니다.
니가 넥스트랑 일했으면그것은 보기에 정상적인 다음 것 같다.js 응용 프로그램 드릴게요!응용 프로그램의 로고를 변경하는 것부터 시작합시다.components/layout/nav-bar.jsx로 이동하여 이미지의 src를 로고로 변경합니다.현재, 나는 icons8의 간단한 집 그림을 사용할 것이다.그림의 크기에 따라 너비와 높이를 변경해야 할 수도 있습니다 -

<a>
  <Image
    src="https://img.icons8.com/fluency/96/000000/shop.png"
    height="50px"
    width="50px"
    alt="logo"
  />
</a>

이제 로고가 바뀌었어!

사용자 정의 색상globals.css와 내부:root로 넘어가면 한 무더기의 색깔을 볼 수 있고 브랜드 색깔로 바꿀 수 있습니다.이것은 사이트의 전체 테마를 바꿉니다. 만약 더 많은 CSS를 바꾸고 싶다면, 이 구성 요소로 직접 이동해서 사용자 정의할 수 있습니다😉. 약간의 조정과 변화를 거쳐 당신은 완전히 맞춤형 기능 상점을 가지게 될 것입니다!
이렇게 많이 했을 뿐인데, 우리 응용 프로그램이 시작되고 실행되었다!
https://www.loom.com/share/0b3dd851cb2d449f8c452369aa514017

초보자로서 메두사를 위해 공헌하다

만약 당신이 개원 프로젝트에 관심이 있고 경탄할 만한 프로젝트에 기여한다면, 메두사를 위해 공헌을 시도해야 한다.첫 번째 질문은 어떻게 하는 거예요?패키지나 사이트에서 문제가 발견되면 복구를 위한 요청이 생성됩니다.인출 요청을 만드는 방법을 모르면 이 article 를 보십시오. 이것은 매우 간단합니다.메두사(Medusa) 산하에는 많은 저장소organization가 있다.가장 인기 있는 것은 main repository다.당신은 문서, 문제 및 더 많은 방식으로 그것을 위해 공헌할 수 있습니다!

결론

나는 네가 메두사로 너의 전자상거래 사이트를 쉽게 세울 수 있기를 바란다.만약 당신에게 어떤 문제가 있으면 평론에서 저에게 알려주세요👇😉.

유용한 링크

GitHub Repo
Medusa
Join the Medusa discord server
Connect with me