GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
NuxtShop은 전자 상거래에 대한 코로나19 대유행의 여파로 예고된 필요성 때문에 태어났습니다. Forrester와 Bloomreach가 발견한 바와 같이 2019년 전자 상거래 매출 증대 및 브랜드 매출이 급격히 증가했으며, 83%의 기업이 디지털 매출 부문에서 두 자릿수 성장을 기록한 것은 9%에 불과했습니다.
이 기간 동안 세계에서 가장 규모가 큰 패션 브랜드인 유니버설 스탠다드는 모든 소매 공간을 폐쇄했다. Universal Standard는 NuxtJS 및 Shopify로 구축된 헤드리스 아키텍처로 성공적으로 마이그레이션했으며, 개발 팀의 규모가 상대적으로 작고 예산이 적음에도 불구하고 온라인 판매에서 수입되는 수익의 100%를 확보했습니다.
이 의류 회사는 모바일 전환율이 200% 상승하고 마이그레이션으로 전례 없이 높은 매출을 올렸을 뿐만 아니라 팀 속도도 개선되었습니다.
마이그레이션 성공에 이어 유니버설 스탠다드 기술 책임자인 저스틴 메트로스는 유니버설 스탠다드가 마이그레이션할 때 갖고 싶었던 스타터 키트인 NuxtShop을 만들기 시작했습니다. NuxtShop은 Universal Standard가 마이그레이션을 설계하고 다음과 같은 헤드리스 상거래의 주요 과제를 해결한 방법을 보여줍니다.
- CART 관리를 위한 도메인 간 통신
- 핵심 웹 바이탈 최적화
- Apollo 클라이언트 및 GraphQL API 캐싱(출시 예정)
- 실시간 CDN 데이터 동기화
- 개발자 생산성
- 성능 최적화
오픈 소스 프로젝트는 개발자 경험에 중점을 둔 서버 측 렌더링(SSR), 캐싱, 성능 최적화 및 배포를 위한 원활한 마이그레이션과 검증된 기술을 제공합니다.
NuxtShop은 무엇이고 그렇지 않은 것은 무엇입니까?
NuxtShop은 Vue 3, Nuxt 3, Apollo, Tailwind 3 및 Pinia와 함께 Shopify에서 헤드리스 전자 상거래를 개발하기 위한 오픈 소스 시작 키트입니다. Nuxt3 및 Tailwind 3와 같은 최신 기술을 사용할 수 있으며 성능이 우수한 전자 상거래 사이트에 대한 의존도가 낮습니다. Nuxt를 작성했다면 NuxtShop을 통해 집에 있을 것입니다.
NuxtShop은 다음과 같습니다.
- 가벼운 시작점
- 신속한 생산성 향상을 위한 구성
- 기본 기능을 확장할 수 있는 최소한의 스타일
- 의견이 있으나 규범적이지 않음
- Layer0으로 엣지에서 Nuxt + Shopify 전자 상거래의 출발점
- 우수한 개발 사례를 장려하는 구조의 기본 전자 상거래 기능을 위한 프로젝트
- Nuxt를 통해 헤드리스 Shopify 전자 상거래에 착수하는 개발자를 위해 제작
NuxtShop은 다음 사항이 아닙니다.
- Shopify 테마
- 모든 기능을 갖춘 플러그 앤 플레이 솔루션/즉시 생산 가능 매장
- 설계 시스템
- 하나의 도구와 밀접하게 연동되어 원하는 것을 교체하고 필요한 것을 추가하십시오.
NuxtShop은 어떤 기술을 기반으로 구축되었습니까?
NuxtShop의 핵심은 미니멀리즘과 단순함입니다. 품질을 희생하거나 손상시키지 않고 실행하는 데 필요한 기술을 기반으로 구축되었습니다. 또한 혁신의 최첨단에 최신 기술로 구축되었기 때문에 미래 지향적입니다.
Vue 프레임워크로서의 Nuxt 3
Nuxt 3는 더 작은 코어로 재설계되었으며 더 빠른 성능과 더 나은 개발자 경험을 위해 최적화되었습니다. NuxtShop은 Nuxt 3 (현재 베타 버전)을 통해 Nuxt의 미래를 기반으로 구축되었습니다.
피니아와 국가 관리
NuxtShop 은 Pinia 와 함께 주들을 관리한다. 그것은 직관적이고, 유형 안전, 확장 가능하고, 극단적으로 가볍고, 디자인에 의하여 모듈 입니다, 그리고 devtools 지원이 있습니다.
Tailwind CSS를 사용한 CSS 스타일링
NuxtShop은 시맨틱 클래스 이름을 다루지 않고도 마크업에서 직접 스타일 작성을 할 수 있는 고도로 사용자 정의 가능한 유틸리티 우선 CSS 프레임워크인 Tailwind CSS 와 함께 제공됩니다.
GraphQL용 아폴로
NuxtShop은 GraphQL로 API를 관리하기 위해 Apollo를 사용합니다. Apollo [Studio]를 사용하면 GraphQL API의 라이프사이클을 관리할 수 있을 뿐만 아니라 활동을 개발, 제공 및 관찰할 수도 있습니다.
Layer0을 통해 호스팅
기본적으로 NuxtShop은 Universal Standard를 지원하는 많은 기능을 제공하기 때문에 Layer0을 호스팅 플랫폼으로 제공합니다. 핵심 웹 바이탈 및 실제 사용자 모니터링, GraphQL 캐싱, 보안(DDoS 방어, WAF, 봇 관리) 등의 기능
헤드리스 전자 상거래를 위한 Shopify 및 결제 시스템입니다.
NuxtShop은 API에 의해 상호 연결된 분산형 헤드리스 아키텍처에 의해 구동됩니다. 이 플랫폼은 장바구니, 체크아웃 등과 같은 기본 기능과 기능을 갖춘 StoreFront API를 제공하므로 처음부터 실행할 수 있습니다. 헤드리스 접근 방식을 사용하면 결제 게이트웨이, 헤드리스 CMS 또는 결제 시스템과 같은 새로운 서비스를 스택에 추가하거나 쉽게 도입할 수 있습니다.
TypeScript 지원
NuxtShop은 정적 형식 검사를 위한 TypeScript와 함께 제공됩니다.
기능
간편한 설정/시작
NuxtShop을 다운로드하고 실행하면 Shopify 및 앱 설정으로 간단하게 설치 및 실행하거나 1-Click Deploy로 Layer0에 배포하여 프로젝트를 GitHub 계정에 복제할 수 있습니다.
최소 외부 패키지 설치 공간
NuxtShop은 운영에 필요한 패키지 서비스만 제공하여 사용자를 통제의 바퀴로 안내합니다.
최소 예비 스타일
NuxtShop은 가장 낮은 공통 분모로 만들어졌을 뿐만 아니라 최소한의 스타일링으로 제공되어 새로운 Nuxt 프로젝트와 마찬가지로 디자인을 제어할 수 있습니다.
헤드리스 아키텍처
NuxtShop은 API를 기반으로 구축되었습니다. 간결한 API 풋프린트로 시작하여 필요에 따라 서비스를 교환하고 교체하십시오.
Layer0을 통해 호스팅
NuxtShop은 에지 로직을 앱 코드에 통합하고 에지를 브라우저로 확장하는 에지 플랫폼인 Layer0에 1-Click 배포로 공장에서 구축됩니다. Core Web Vitals 및 Real User Monitoring, GraphQL 캐싱, Edge Experiments, Security에 이르는 다양한 기능을 통해 보다 빠르게 구축, 배포 및 배송할 수 있습니다.
시작하기
시작하려면 아래 링크를 방문하십시오.
출연금
NuxtShop에 기여하고 싶습니까?
- GitHub 계정에 NuxtShop을 포크하고 로컬 장치에 복제합니다.
- 새 브랜치 `git checkout -b branch-name` 만들기 <>
- Shopify 스토어 설정
- 로컬 복제본에서 `.env.sample”을 `.env”로 바꿉니다.
- Shopify 액세스 토큰 및 *.myshopify URL을 .env 변수에 추가합니다.
- ‘yarn’을 실행하여 종속성을 설치합니다.
- `yarn dev`를 실행하여 로컬 개발 서버에서 응용 프로그램을 시작합니다.
풀 요청 열기
풀 요청은 ‘main’ 브랜치에 대해 이루어져야 합니다.
문제
NuxtShop에 문제가 있습니까? 새 문제점 생성
