example storefront
v5.2.1
MailChimp Open Commerceは、Node.js、React、およびGraphQLを使用して構築されたAPIファーストのヘッドレスコマースプラットフォームです。 NPM、Docker、Kubernetesでうまく機能します。
この例のストアフロントは、Reaction Commerce GraphQL APIを使用してWebベースのストアフロントを実装する方法に関するリファレンスとして機能することです。このプロジェクトは、オフポイントのジャンプとしてフォークしたり、希望するクライアント側のテクノロジーを使用して独自のカスタムエクスペリエンスを作成したりできます。私たちの例の店舗は、生産で使用するのに十分なフル機能があると考えていますが、現時点ではあなたのショップが必要とする機能が欠落している可能性があります。
MailChimp Open Commerceには、すぐにコアコマース機能の堅牢なセットが付属しています。また、コードベース内のすべてをパッケージとして拡張、上書き、またはインストールすることができるため、プラットフォームで何でもカスタマイズすることもできます。
この例StoreFrontは、next.js、React、GraphQL、およびApolloクライアントで構築されています
クイックスタートガイドに従って、ストアフロントを実行するために必要なすべてのサービスをインストールして実行します。
| ディレクトリ：サービス | URL |
|---|---|
reaction ：GraphQL API | localhost：3000/graphql |
reaction-admin ：反応管理者 | LocalHost：4080 |
reaction ：mongodb | LocalHost：27017 |
example-storefront ：ストアフロント | LocalHost：4000 |
注：ストアフロントにはリダイレクトがあるため、http：// localhost：4000/graphqlを開くと、GraphQLプレイグラウンドにリダイレクトされます。
ストアフロントと反応を初めて実行するときは、完全な注文チェックアウトフローをテストするために、ストライプ支払い処理と配送オプションを構成する必要があります。 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 -fINTERNAL_GRAPHQL_URLを.env in .envに変更します。 URLは/graphql https://my-website.com/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 。リモートターゲットの下でプロセスを見つけて、 [検査]をクリックします。Yarn＆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
ストアフロントのコンテキストで、StoreFrontコンポーネントのサンプルコンポーネントライブラリコンポーネントをテストする必要がある場合があります。残念ながら、Dockerコンテナ内でこれを行うのは簡単なことはないので、Dockerの外でstorefrontを実行する必要があります。
reaction-component-libraryリポジトリへのcd 。packageフォルダーにcdを使用し、コマンドyarn installを実行し、その後yarn build実行しますcd新しいdistフォルダーに組み込んで構築してyarn linkを実行して、ライブラリをストアフロントにインストールできるようにします。これにより、 @reactioncommerce/componentsがリンクされますexample-storefrontリポジトリ内で、 .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ことができます。 （とにかくこのフォルダーはGitignoredです。）CTRL+Cを実行してストアフロントをシャットダウンしますyarn unlink "@reactioncommerce/components"を実行しますreaction-component-libraryレポのpackage/distフォルダーへのcd 。コマンド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バグ、タイプミス、またはよく文書化されていないものを見つけますか？私たちが何を改善できるかを教えてくれる問題を開くことを願っています！このプロジェクトはセマンティックリリースを使用しています。コミットメッセージフォーマットを使用してください。
機能をリクエストしたいですか？ Reaction Feature Requests Repositoryを使用して、リクエストを提出します。
私たちはあなたのプルリクエストが大好きです！私たちの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を実行します。
Reaction Commerceのオープンソースプロジェクトへのすべての貢献について、貢献者ライセンス契約の代わりに、開発者証明書（DCO）を使用します。貢献者はDCOの条件に同意し、すべてのGITコミットメッセージに名前とメールアドレスを追加することにより、反応コマースプロジェクトに行われたすべてのコミットに署名することにより、その合意を示すことを要求します。
Signed-off-by: Jane Doe <[email protected]>
git構成の一部としてuser.nameとuser.emailを設定している場合、 git commit -sに自動的に署名できます。
本名を使用するようお願いします（匿名の貢献や仮名はありません）。あなたのコミットに署名することにより、あなたはその特定の反応商取引プロジェクトで使用されるオープンソースライセンスの下でそれを提出する権利を持っている権利があることを証明します。本名を使用する必要があります（仮名や匿名の貢献は許可されていません。）
Probot DCO Githubアプリを使用して、すべてのコミットのDCOサインオフを確認します。
署名を忘れた場合、DCOボットはあなたに思い出させ、署名を追加するためにコミットを修正する方法について詳細な指示を与えます。
Copyright 2019 Reaction Commerce
Apacheライセンス、バージョン2.0（「ライセンス」）に基づいてライセンスされています。ライセンスに準拠している場合を除き、このファイルを使用することはできません。ライセンスのコピーを取得できます
http://www.apache.org/licenses/LICENSE-2.0
適用法で要求されていないか、書面で合意されていない限り、ライセンスに基づいて配布されたソフトウェアは、明示または黙示のいずれかの保証または条件なしに、「現状のまま」に基づいて配布されます。ライセンスに基づく権限と制限を管理する特定の言語のライセンスを参照してください。
