jamstack ecommerce example
1.0.0
Webサイトの訪問者がアクセスしたページは、要求されたときに動的に生成されるのではなく、事前に生成され、静的HTMLファイルとして提供されるため、新機能とコンテンツを展開するプロセスは、「従来の」Webアプリケーションとは少し異なって見えます。
ローカル開発：新機能の開発はローカルで行うことができます。
nuxt.jsには、ホットモジュールの交換とライブリロードを備えた開発者サーバーなどの優れた開発者エクスペリエンスをサポートするための非常に効果的なツールが搭載されています。
製品のコンテンツは、ソースコードとともにGITリポジトリに保存されるため、開発者は実装とテスト中に実際の製品データを利用できます。
APIのエンドポイントは、実際の外部システムから独立して作業するために、WiremockやMockServerなどのMock Serverを使用してスタブする必要があります。 OpenID Connect Authenticationについては、keycloakをローカルに設定することを検討してください。
注：この例プロジェクトには、模擬サーバーは含まれていません。
コンテンツの事前：新しいまたは更新された製品データをWebサイトで公開するたびに、JSONファイルをGITリポジトリで更新する必要があります。
特別なnode.jsコンテンツスクリプトは、Salesforceに接続し、Salesforce Rest APIを介して最新のデータを取得します。コンテンツJSONファイルはそれに応じて更新され、GITリポジトリにコミットできます。
このスクリプトが実行されるのは、完全にあなた次第です。たとえば、GitHubアクションとして、またはTravis CIのCIプロセスで実行できます。
注：Salesforceは、コンテンツを取得するための潜在的なデータソースの単なる例です。コンテンツファイルは、他のデータソースから作成することもできます。
Static HTMLファイルの公開： GITリポジトリでのすべてのコミットは、潜在的に公開できるWebサイトの特定の実装とコンテンツ状態を表します。
ビルドプロセスは、ソースコードを最適化されたチャンクに変換し、実装されたページコンポーネントと事前にフェッチしたコンテンツファイルのすべてのアクセス可能なルートを計算することにより、静的HTMLファイルを生成します。
最後に、生成されたすべてのWebサイトファイルは、任意のWebサーバーまたはコンテンツ配信ネットワークなど、Netlifyに公開できます。
注：ビルドプロセスは、GITリポジトリのコンテンツファイルに保存されていないコンテンツをロードするためにAPI要求を活用することもできます。
APIを介した動的強化：訪問者は、ブラウザでWebサイトをロードするときに静的HTMLファイルを提供されます。サーバーで動的に生成されるものは何も必要ないため、これは非常に高速です。
Webページが動的なJavaScriptがキックインし、動的機能を備えたページを強化すると、Webページがロードされると。これは、ショッピングカートやパーソナライズされたユーザーコンテンツの表示などの機能です。
動的データは、ブラウザからAPIリクエストを送信することでフェッチできます。訪問者は、OAUTH 2.0やOpenID Connectなどの標準プロトコルを使用して認証して、Webサイトが個々のコンテンツを提示できるようにすることができます。
なぜ？これにより、Lightningコミュニティの実際の顧客ユーザーとのログインを可能にします。
コンテンツアップデートスクリプトを使用することを計画している場合、およびユーザーがWebサイトでログアウトしたときにLightningコミュニティで自動ログアウトをセットアップする場合は、この手順が必要です。
なぜ？カスタムオブジェクト「製品カテゴリ」をSalesforce Orgに追加し、Product2オブジェクトにカスタムフィールドをインストールして、製品が属するカテゴリを定義できるようにします。また、ユーザーを自動的にログアウトする特別なログアウトコミュニティページに使用するLightning Webコンポーネントをインストールします。
Salesforce CLIをダウンロードしてインストールします。
ディレクトリsalesforceで端末を開きます。
Salesforce CLIをSalesforce組織に接続します。
sfdx force:auth:web:login -a MyOrg -sSFDXプロジェクトをSalesforce組織に展開します。
sfdx force:source:deploy -p force-appなぜ？これにより、APIサーバーとコンテンツスクリプトが、個々のアクセス制御を可能にする特定の技術ユーザーとのSalesforceに接続できます。
なぜ？ OpenID Connect認証フロー中にログインページを表示する必要があります。
コミュニティユーザーがウェブサイトにログアウトしたときに自動ログアウトをセットアップする場合は、これらの追加の手順を実行します。
なぜ？ Webサイト訪問者向けのOpenID Connect認証に必要であり、APIサーバーとコンテンツスクリプトが安全な方法でSalesforceに接続できるようにします。
GITリポジトリには、デモのためのいくつかの例の製品とカテゴリがすでに含まれているため、このステップはオプションです。
Salesforce組織にProduct2オブジェクトのレコードがアクティブで、コンテンツの更新に使用される価格の本に価格の帳簿エントリがある必要があります。
また、いくつかの製品カテゴリを作成して、それらを製品に割り当てることもできます。
注：スクリプトでは、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 | 接続されたアプリの消費者の秘密（アプリビューからコピーされた） |
| salesforce_username | 統合ユーザーのユーザー名 |
| salesforce_password | 統合ユーザー +セキュリティトークンのパスワード（2つを連結するだけです） |
| 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 | oauth2.0セールスフォースインスタンスのトークンエンドポイント（コミュニティではありません） |
| salesforce_jwks_endpoint | OpenID Connect JSON WebキーセットSalesforce Lightningコミュニティのエンドポイント |
| salesforce_issuer_url | Salesforceが発行したIDトークンに含まれる発行者URL |
| salesforce_client_id | 接続されたアプリの消費者キー（アプリビューから前にコピー） |
| salesforce_client_secret | 接続されたアプリの消費者の秘密（アプリビューからコピーされた） |
| salesforce_username | 統合ユーザーのユーザー名 |
| salesforce_password | 統合ユーザー +セキュリティトークンのパスワード（2つを連結するだけ） |
| salesforce_price_book_name | オプション。使用する価格帳。デフォルト：「標準価格の本」 |
| security_cors_origin | Webアプリケーションのベース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 | OAUTH 2.0 Salesforce Lightningコミュニティの承認エンドポイント |
| 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が提供されていない場合、ユーザーは外部の往復なしですぐにWebサイトのログアウトページにリダイレクトされます。
node.js依存関係をインストールします。
yarn installライブリロードを提供する開発サーバーを起動します...
yarn dev ...または、静的HTMLファイルを最初に生成してから、 distディレクトリからこれらのファイルを提供します。
yarn generate
yarn starthttp：// localhost：3000でブラウザを開きます
MITライセンス
