jamstack ecommerce example
1.0.0
웹 사이트 방문자가 액세스 한 페이지는 요청 될 때 동적으로 생성되지 않지만 정적 HTML 파일로 사전 생성 및 정적 인 HTML 파일로 제공되기 때문에 새로운 기능과 컨텐츠를 출시하는 프로세스는 "기존"웹 애플리케이션에서 약간 다르게 보입니다.
지역 개발 : 새로운 기능의 개발은 로컬로 수행 할 수 있습니다.
nuxt.js에는 핫 모듈 교체 및 라이브 재 장전이있는 개발자 서버와 같은 훌륭한 개발자 경험을 지원하는 매우 효과적인 도구가 제공됩니다.
제품의 콘텐츠는 소스 코드와 함께 GIT 저장소에 저장되므로 개발자는 구현 및 테스트 중에 실제 제품 데이터를 사용할 수 있습니다.
실제 외부 시스템과 독립적으로 작동하기 위해 일부 모의 서버 (예 : Wiremock 또는 Mockserver)를 사용하여 API 엔드 포인트를 스튜브해야합니다. OpenID Connect 인증의 경우 로컬로 KeyCloak 설정을 고려하십시오.
참고 :이 예제 프로젝트에는 모의 서버가 포함되어 있지 않습니다.
사전 가져 오기 컨텐츠 : 새 버전의 정적 HTML 파일이 생성되기 전에 새 버전의 json 파일을 웹 사이트에 게시 해야하는 새 또는 업데이트 된 제품 데이터를 웹 사이트에 게시해야합니다.
Special Node.js 컨텐츠 스크립트는 Salesforce에 연결하고 Salesforce REST API를 통해 가장 최근의 데이터를 가져옵니다. 컨텐츠 JSON 파일은 그에 따라 업데이트되며 GIT 저장소에 커밋 될 수 있습니다.
이 스크립트가 언제 어디서 실행되는지는 귀하에게 전적으로 달려 있습니다. 예를 들어, Travis CI의 GitHub 동작 또는 CI 프로세스에서 실행될 수 있습니다.
참고 : Salesforce는 컨텐츠를 획득 할 수있는 잠재적 인 데이터 소스의 예일뿐입니다. 다른 데이터 소스에서 컨텐츠 파일을 만들 수도 있습니다.
정적 HTML 파일 게시 : GIT 저장소의 모든 커밋은 잠재적으로 게시 할 수있는 웹 사이트의 특정 구현 및 컨텐츠 상태를 나타냅니다.
빌드 프로세스는 소스 코드를 최적화 된 청크로 변환하고 구현 된 페이지 구성 요소 및 미리 가져온 컨텐츠 파일에 대한 모든 액세스 가능한 경로를 계산하여 정적 HTML 파일을 생성합니다.
마지막으로, 생성 된 모든 웹 사이트 파일은 모든 웹 서버 또는 콘텐츠 전달 네트워크 (예 : NetLify)에 게시 할 수 있습니다.
참고 : 빌드 프로세스는 API 요청을 활용하여 GIT 저장소의 컨텐츠 파일에 저장되지 않은 컨텐츠로드 할 수 있습니다.
API를 통한 동적 향상 : 방문자는 브라우저에 웹 사이트를로드 할 때 정적 HTML 파일이 제공됩니다. 서버에서 동적으로 생성 될 필요가 없기 때문에 이것은 매우 빠릅니다.
웹 페이지가 동적 JavaScript를로드하고 동적 기능으로 페이지를 향상시킵니다. 쇼핑 카트 또는 개인화 된 사용자 콘텐츠 표시와 같은 기능 일 수 있습니다.
브라우저에서 API 요청을 보내면 동적 데이터를 가져올 수 있습니다. 방문자는 Oauth 2.0 및 OpenID Connect와 같은 표준 프로토콜을 사용하여 인증하여 웹 사이트가 개별 컨텐츠를 제시 할 수 있습니다.
왜? Lightning 커뮤니티의 실제 고객 사용자와 로그인 할 수 있습니다.
콘텐츠 업데이트 스크립트를 사용하려는 경우이 단계가 필요하고 사용자가 웹 사이트에 로그 아웃 할 때 Lightning 커뮤니티에서 자동 로그 아웃을 설정하려는 경우 필요합니다.
왜? Salesforce Org에 사용자 정의 객체 "제품 카테고리"를 추가하고 Product2 객체에 사용자 정의 필드를 설치하여 범주 A 제품을 정의 할 수 있습니다. 또한 특수 로그 아웃 커뮤니티 페이지에 사용할 번개 웹 구성 요소를 설치하여 사용자를 자동으로 로그 아웃합니다.
Salesforce CLI를 다운로드하여 설치하십시오.
Directory salesforce 에서 터미널을 엽니 다.
Salesforce CLI를 Salesforce 조직에 연결하십시오.
sfdx force:auth:web:login -a MyOrg -sSFDX 프로젝트를 Salesforce Org에 배포하십시오.
sfdx force:source:deploy -p force-app왜? 이를 통해 API 서버 및 컨텐츠 스크립트는 개별 액세스 제어를 허용하는 특정 기술 사용자와 Salesforce에 연결할 수 있습니다.
왜? OpenID Connect 인증 흐름 중에 로그인 페이지를 표시해야합니다.
웹 사이트에 로그 아웃 할 때 커뮤니티 사용자를위한 자동 로그 아웃을 설정하려면 다음 단계를 수행합니다.
왜? 웹 사이트 방문자를위한 OpenID Connect 인증이 필요하며 API 서버 및 컨텐츠 스크립트가 안전한 방식으로 Salesforce에 연결할 수 있습니다.
이 단계는 GIT 저장소에 이미 시연용 몇 가지 예제 제품 및 범주가 포함되어 있기 때문에 선택 사항입니다.
Salesforce 조직의 Product2 객체에 대한 레코드가 있어야하며 콘텐츠 업데이트에 사용되는 일부 가격 책에 가격 책가 항목이 있어야합니다.
제품 범주를 만들어 제품에 할당 할 수도 있습니다.
참고 : 스크립트는 org에 Salesforce 메타 데이터를 배포해야합니다.
디렉토리 content-scripts 에서 터미널을 엽니 다.
다음 환경 변수를 설정하십시오.
| 이름 | 설명 |
|---|---|
| salesforce_instance_url | Salesforce 인스턴스의 기본 URL (패턴 https://xx##.salesforce.com ) |
| salesforce_api_version | Salesforce API 버전을 사용할 수 있습니다 |
| salesforce_token_endpoint | Salesforce 인스턴스의 Oauth 2.0 토큰 엔드 포인트 |
| salesforce_client_id | 연결된 앱의 소비자 키 (앱보기에서 이전에 복사) |
| salesforce_client_secret | 연결된 앱의 소비자 비밀 (App View에서 이전에 복사) |
| salesforce_username | 통합 사용자의 사용자 이름 |
| salesforce_password | 통합 사용자 + 보안 토큰의 비밀번호 (간단히 두 사람을 연결) |
| salesforce_price_book_name | 선택 과목. 사용할 가격 책. 기본값 : "표준 가격 책" |
예:
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n 팁 : 이러한 변수 할당을 개발 및 테스트를 위해 디렉토리 content-scripts 에서 .env 라는 파일에 넣을 수 있습니다.
Node.js 종속성을 설치하십시오.
yarn install 디렉토리 content 에서 카테고리 및 제품 JSON 파일을 업데이트하려면 스크립트를 실행하십시오.
yarn start 디렉토리 api 에서 터미널을 엽니 다.
다음 환경 변수를 설정하십시오.
| 이름 | 설명 |
|---|---|
| 포트 | 로컬 서버 포트를 듣습니다. 기본값 : 3000 |
| salesforce_instance_url | Salesforce 인스턴스의 기본 URL (패턴 https://xx##.salesforce.com ) |
| salesforce_api_version | Salesforce API 버전을 사용할 수 있습니다 |
| salesforce_token_endpoint | Salesforce 인스턴스의 Oauth 2.0 토큰 엔드 포인트 (커뮤니티가 아님) |
| salesforce_jwks_endpoint | OpenID Connect JSON 웹 키 세트 Salesforce Lightning 커뮤니티의 엔드 포인트 세트 |
| salesforce_issuer_url | Salesforce가 발행 한 ID 토큰에 포함 된 발급자 URL |
| salesforce_client_id | 연결된 앱의 소비자 키 (앱보기에서 이전에 복사) |
| salesforce_client_secret | 연결된 앱의 소비자 비밀 (App View에서 이전에 복사) |
| salesforce_username | 통합 사용자의 사용자 이름 |
| salesforce_password | 통합 사용자 + 보안 토큰의 비밀번호 (단순히 두 가지에 대해) |
| salesforce_price_book_name | 선택 과목. 사용할 가격 책. 기본값 : "표준 가격 책" |
| 보안 _cors_origin | 웹 응용 프로그램의 기본 URL을 사용하면 서버에 액세스 할 수 있습니다. |
예:
PORT=4000
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_JWKS_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/id/keys
SALESFORCE_ISSUER_URL=https://georgwittberger-developer-edition.eu25.force.com
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n
SECURITY_CORS_ORIGIN=http://localhost:3000 팁 : 개발 및 테스트를 위해 디렉토리 api 의 .env 라는 파일에 이러한 변수 할당을 넣을 수 있습니다.
Node.js 종속성을 설치하십시오.
yarn install서버를 실행하십시오.
yarn start프로젝트 루트 디렉토리에서 터미널을 엽니 다.
다음 환경 변수를 설정하십시오.
| 이름 | 설명 |
|---|---|
| API_URL | API 서버의 기본 URL |
| logout_url | 선택 과목. 로그 아웃 페이지 Salesforce Lightning 커뮤니티의 URL |
| oauth2_authorize_endpoint | Salesforce Lightning 커뮤니티의 Oauth 2.0 승인 종말점 |
| oauth2_userinfo_endpoint | API 서버의 사용자 정보 엔드 포인트 |
| oauth2_client_id | 연결된 앱의 소비자 키 (앱보기에서 이전에 복사) |
| OAUTH2_SCOPES | OAUTH 2.0 인증 중에 요청할 스코프, 쉼표로 구분되었습니다 |
예:
API_URL=http://localhost:4000
LOGOUT_URL=https://georgwittberger-developer-edition.eu25.force.com/s/logout
OAUTH2_AUTHORIZE_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/services/oauth2/authorize
OAUTH2_USERINFO_ENDPOINT=http://localhost:4000/userinfo
OAUTH2_CLIENT_ID=3MVG9...ru7XA
OAUTH2_SCOPES=openid,id 팁 : 이러한 변수 할당을 개발 및 테스트를 위해 프로젝트 루트 디렉토리에서 .env 라는 파일에 넣을 수 있습니다.
참고 : 변수 LOGOUT_URL 제공되지 않으면 사용자는 외부 왕복없이 즉시 웹 사이트 로그 아웃 페이지로 리디렉션됩니다.
Node.js 종속성을 설치하십시오.
yarn install라이브 재 장전을 제공하는 개발 서버를 시작하십시오 ...
yarn dev ... 또는 정적 HTML 파일을 먼저 생성 한 다음 dist 디렉토리에서 이러한 파일을 제공하십시오.
yarn generate
yarn starthttp : // localhost : 3000에서 브라우저를 엽니 다
MIT 라이센스
