example storefront
v5.2.1
Mailchimp Open Commerce는 Node.js, React 및 GraphQL을 사용하여 제작 된 API-First, Headless Commerce 플랫폼입니다. NPM, Docker 및 Kubernetes와 잘 어울립니다.
이 예제 스토어 프론트는 Reaction Commerce GraphQL API를 사용하여 웹 기반 스토어 프론트를 구현하는 방법에 대한 참조로 사용됩니다. 이 프로젝트를 점프 오프 포인트로 포크하거나 선호하는 클라이언트 측 기술을 사용하여 고유 한 사용자 정의 경험을 만들 수 있습니다. 우리는 우리의 예제 상점 프론트가 생산에 사용할 수있을만큼 충분히 기능을 갖추고 있다고 생각하지만, 현재 상점에 필요한 기능이 누락 될 수 있습니다.
MailChimp Open Commerce에는 상자 밖에서 강력한 핵심 상업 기능 세트가 제공됩니다. 또한 코드베이스의 모든 것을 패키지로 확장, 덮어 쓰기 또는 설치할 수 있으므로 플랫폼에서 모든 것을 사용자 정의 할 수도 있습니다.
이 예제 스토어 프론트
빠른 시작 안내서를 따라 매장을 실행하는 데 필요한 모든 서비스를 설치하고 실행하십시오.
| 디렉토리 : 서비스 | URL |
|---|---|
reaction : GraphQL API | 로컬 호스트 : 3000/GraphQL |
reaction-admin : 반응 관리자 | 로컬 호스트 : 4080 |
reaction : mongodb | 로컬 호스트 : 27017 |
example-storefront : 상점 | 로컬 호스트 : 4000 |
참고 : Storefront에는 http : // localhost : 4000/draphql을 열면 GraphQL 놀이터로 리디렉션되도록 리디렉션이 있습니다.
Storefront 및 Reaction을 처음으로 실행할 때는 처음으로 주문 체크 아웃 흐름을 테스트하기 위해 Stripe 지불 처리 및 배송 옵션을 구성해야합니다. Stripe API 키에 가입 한 후 다음 단계를 따르십시오.
STRIPE_PUBLIC_API_KEY )를 .env 에 추가하십시오.http://localhost:4080 에서 반응 관리 앱을 엽니 다. 관리자로 로그인하십시오.세그먼트 또는 사용자 정의 분석 추적기 설정을위한 문서를 읽으십시오.
반응 플랫폼은 Docker와 함께 저장고를 실행하므로 Docker 명령을 사용하여 로그를보고 컨테이너 내부에서 명령을 실행해야합니다. 스토어 프론트에 대해 특별히 명령을 실행하려면 reaction-platform 저장소 내의 example-storefront 디렉토리로 디렉토리를 변경하십시오.
cd example-storefront개발 Docker 이미지를 사용할 수있는 상징적 링크를 만듭니다.
ln -s docker-compose.dev.yml docker-compose.override.yml
.env.example 에서 처음으로 실행되거나 환경 변수가 변경된 경우 환경 변수를 업데이트하기 위해 아래 명령을 실행했습니다.
./bin/setup
실행하여 상점을 시작하십시오.
docker-compose up -d && docker-compose logs -f .env 에서 INTERNAL_GRAPHQL_URL 을 프로덕션 API URL로 변경하십시오. URL은 https://my-website.com/graphql 과 같이 /graphql 에서 끝나야합니다. .env 파일을 저장하고 응용 프로그램을 다음과 같이 다시 시작하십시오.
docker-compose run --rm --service-ports web yarn startdocker-compose run --rm web [command]Docker 컨테이너 내부에서 명령을 실행 한 다음 컨테이너를 제거하십시오. 이것을 사용하여 툴링 작업을 실행하십시오. 프로젝트 디렉토리가 장착되며 일반적으로 일이 작동합니다. 더 많은 예제는 아래 원사 섹션을 참조하십시오.
로컬로 테스트를 실행하십시오
docker-compose run --rm web yarn test캐시없이 로컬로 테스트를 실행합니다 (변경 사항이 표시되지 않으면 도움이 될 수 있음)
docker-compose run --rm web yarn test --no-cacheSnyk 보안 테스트를 실행하려면 (CI와 같은 방식으로 테스트를 실행합니다)
docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "eslint를 실행합니다
docker-compose run --rm web eslint srcGoogle Chrome DevTools를 사용하여 Docker 내부에서 실행되는 동안 Node.js 응용 프로그램 서버에서 실행되는 코드를 디버깅 할 수 있습니다.
docker-compose run --rm --publish 9229:9229 --publish 4000:4000 -e NODE_ENV=development web node --inspect=0.0.0.0:9229 ./src/server.jschrome://inspect 찾아보십시오. 원격 대상 아래의 프로세스를 찾고 검사를 클릭하십시오.원사 & npm은 Docker 컨테이너 내부에서 실행해야합니다. Node_Modules가 캐시 가능한 위치에 배치되도록 조치를 취했습니다. 원사를 로컬로 실행하는 경우 Node_Modules는 프로젝트 디렉토리에 직접 작성되며 Docker 빌드의 것보다 우선합니다. 원사 추가
docker-compose run --rm web yarn add --dev [package]
원사 설치
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
때로는 저장소의 맥락에서 예제 스토어 프론트 구성 요소 라이브러리 구성 요소를 테스트해야합니다. 불행히도, Docker 컨테이너 내 에서이 작업을 수행하기 쉬운 와시는 없으므로 Docker 외부의 storefront 실행해야합니다.
reaction-component-library repo에 cd .package 폴더에 cd 넣고 명령 yarn install 와 yarn build 실행하십시오.cd 새로운 dist 폴더로 구축하고 실 yarn link 실행하여 라이브러리를 스토어 프론트에 설치할 수 있도록합니다. @reactioncommerce/components 연결합니다example-storefront repo 내에서 일시적으로 .yarnrc 파일을 다른 것 (예 : .yarnrc-temp )으로 바꿉니다.yarn install 실행 한 다음 명령 yarn link "@reactioncommerce/components" 실행하여 로컬 버전을 게시 된 NPM 버전의 재정으로 설정합니다..env 파일 내부에서 INTERNAL_GRAPHQL_URL 동일한 http://localhost:3000/graphql , EXTERNAL_GRAPHQL_URL 과 동일하게 변경export $(cat .env | xargs) && yarn dev 실행하여 로컬로 스토어 프론트를 시작하십시오.localhost:4000 에서 실행됩니다package/dist 폴더에 각 패키지를 일시적으로 yarn add 할 수 있습니다. (어쨌든이 폴더는 지질적입니다.)CTRL+C 명령을 실행하여 상점을 종료합니다.yarn unlink "@reactioncommerce/components" 실행하십시오cd reaction-component-library 리포지토리의 package/dist 폴더에 대한 CD입니다. Compling yarn unlink 실행하여 구성 요소 라이브러리의 로컬 버전을 해제하지 않도록합니다..yarnrc 파일의 이름 바꾸기를 취소하십시오.env 파일 내부에서 URL 변경을 취소하십시오 컨테이너를 중지하고 유지하십시오.
docker-compose stop컨테이너를 중지하고 제거하십시오.
docker-compose down컨테이너, 볼륨 및 제작 된 이미지를 중지하고 제거하십시오.
docker-compose down -v --rmi local 때로는 개발 중에 앱의 생산 빌드를 만들고 로컬로 실행하는 것이 도움이됩니다.
이 명령을 실행하여 앱의 프로덕션 빌드를 사용하여 Docker 이미지를 작성하십시오.
docker build --network=host -t reactioncommerce/example-storefront:X.X.X . 여기서 XXX는 사용하려는 태그 버전을 나타냅니다 3.1.0
그런 다음 컴퓨터에서 앱을 시작하려면 반응 API 컨테이너가 이미 실행 중인지 확인하고 다음을 입력하십시오.
docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X 참고 : 4000:4000 의 콜론 이전의 숫자를 응용 프로그램을 실행하려는 다른 지역 호스트 포트로 교체 할 수 있습니다.
참고 : 이것은 실제 생산 배포에서 앱을 실행하는 방법이 아닙니다. 이것은 개발, 데모 또는 시험 목적으로 로컬로 생산 빌드를 운영하기위한 것입니다.
위의 명령으로 시작한 후 Docker 컨테이너를 중지하려면 다음을 사용하십시오.
docker stop reaction-storefront버그, 오타 또는 잘 문서화되지 않은 것을 찾으십니까? 우리는 당신이 우리가 무엇을 개선 할 수 있는지 알려주는 문제를 열고 싶습니다! 이 프로젝트는 Semantic Release를 사용합니다. 커밋 메시지 형식을 사용하십시오 ..
기능을 요청하고 싶습니까? 우리의 반응 기능 요청 저장소를 사용하여 요청을 제출하십시오.
우리는 당신의 풀 요청을 좋아합니다! 우리의 Good First Issue 확인하고 좋은 문제를 해결하기 위해 Help Wanted .
풀 요청은 모든 자동 테스트, 스타일 및 보안 검사를 통과해야합니다.
코드는 모든 수락 테스트 및 단위 테스트를 통과해야합니다. 달리다
docker-compose run --rm web yarn test 테스트 스위트를 현지에서 운영합니다. 반응에 기능을 추가하는 경우 추가 기능에 대한 테스트를 추가해야합니다. --no-cache 플래그를 전달하여 필요한 경우 캐시없이 테스트를 로컬로 실행할 수 있습니다. 변경 사항이 표시되지 않으면 도움이 될 수 있습니다.
docker-compose run --rm web yarn test --no-cache실패한 스냅 샷을 업데이트하려면 (구성 요소를 변경 한 경우)
docker-compose run --rm web yarn test -u우리는 모든 코드가 반응의 eslint 규칙에 따라 반응에 기여해야합니다. 당신은 달릴 수 있습니다
docker-compose run --rm web eslint src
코드에 따라 Eslint를 로컬로 실행합니다.
우리는 반응 상업 오픈 소스 프로젝트에 대한 모든 기여에 대한 기여자 라이센스 계약 대신 개발자 인증서 (DCO)를 사용합니다. 우리는 기고자들이 DCO의 조건에 동의하도록 요청하고 모든 GIT 커밋 메시지에 귀하의 이름과 이메일 주소가있는 라인을 추가하여 반응 상거래 프로젝트에 대한 모든 커밋에 서명함으로써 계약을 표시합니다.
Signed-off-by: Jane Doe <[email protected]>
GIT 구성의 일부로 사용자 user.name 및 user.email Set이있는 경우 git commit -s 사용하여 GIT로 커밋에 자동으로 서명 할 수 있습니다.
우리는 당신이 당신의 실명을 사용하도록 요청합니다 (익명의 기여 나 가명은 없습니다). 귀하의 커밋에 서명함으로써 귀하는 귀하가 특정 반응 상업 프로젝트에서 사용하는 오픈 소스 라이센스에 따라 제출할 권리가 있음을 인증하고 있습니다. 실명을 사용해야합니다 (가명이나 익명의 기여가 허용되지 않습니다.)
Probot DCO Github 앱을 사용하여 모든 커밋의 DCO 사인 오프를 확인합니다.
Commits에 서명하는 것을 잊어 버린 경우 DCO 봇이 상기시켜주고 서명을 추가하기 위해 커밋을 수정하는 방법에 대한 자세한 지침을 제공합니다.
Copyright 2019 Reaction Commerce
Apache 라이센스, 버전 2.0 ( "라이센스")에 따라 라이센스가 부여되었습니다. 라이센스를 준수하는 것 외에는이 파일을 사용할 수 없습니다. 라이센스 사본을 얻을 수 있습니다
http://www.apache.org/licenses/LICENSE-2.0
해당 법률에 의해 요구되거나 서면에 동의하지 않는 한, 라이센스에 따라 배포 된 소프트웨어는 명시 적 또는 묵시적 보증 또는 조건없이 "그대로"기준으로 배포됩니다. 라이센스에 따른 특정 언어 통치 권한 및 제한 사항에 대한 라이센스를 참조하십시오.
