ヘッドレス コマースは長い間存在しており、Medusa はモジュラー コンポーネントを提供するための最良のツールの 1 つです。 Medusa の構成可能なアーキテクチャにより、選択した任意のフレームワークまたは言語でストアを構築できるため、完全なカスタマイズ機能が提供されます。 Medusa を使用すると、開発者が強力な e コマース Web サイトを作成するために追加できる一連のツールと必須のビルディング ブロックを提供することで、独自の e コマース エクスペリエンスを構築することもできます。顧客、製品、配送、税金と地域の管理、RMA フローなどのすぐに使える機能を提供します。今日のチュートリアルでは、ファイル サービス プラグインを追加して、 を介して Medusa ストアに製品を追加できるようにする方法を学びます。 管理ダッシュボード メデューサとは Medusa は、驚くほど信頼性の高い e コマース Web サイトを構築できるオープンソースのツール セットです。  を備えたこのヘッドレス コマース ソリューションには、基本的なものから高度なものまで、いくつかのコマース モジュールが付属しており、無料で利用できます。モジュールまたはプラグインを追加する方法に関する段階的なガイドラインがあるため、 も成功に貢献しています.とりわけ人気のあるプラグインには、支払い、通知、検索、およびファイル サービスのプラグインがあります。 GitHub で 17.8k を超えるスターと 1.3k のフォーク よく書かれたドキュメント ファイル サービス プラグインとは ファイル サービス プラグインを使用すると、Medusa で使用される画像などのファイルをホストできます。 Medusa ストアのファイル サービスを適切に使用または設定しないと、問題が発生する可能性があります。 Medusa は、ファイル ストレージを管理する 3 つの異なる方法を提供します。 S3、   、および  。このチュートリアルでは、Medusa にアップロードされた画像とファイルを保存するための S3 ファイル ストレージのみに焦点を当てています。 MinIo Spaces  S3またはSimple Storage Serviceは、とにかくいつでも任意の量のデータを保存および取得するために使用されるオブジェクトストレージです。このデモンストレーションには Amazon S3 を使用します。   Medusa ストアにファイルをアップロードする方法 Amazon はデータをバケット内のオブジェクトとして保持します。オブジェクトは、ファイルとそれを説明するオプションのデータで構成されます。ファイルを保存するには、バケットにアップロードする必要があります (バケットはオブジェクトのコンテナーです)。アップロードすると、 できます。 オブジェクトにアクセス許可を設定 それでは、Medusa プロジェクトでファイルをすばやくアップロードできるようにしましょう。 前提条件 。 Medusa プロジェクトは、基本的に 3 つのコンポーネントに分かれています。店頭、管理ダッシュボード、  メデューサの店 Medusa バックエンド AWS アカウント すべての設定が完了したら、以下の手順に従ってファイル サービス プラグインを Medusa ストアに追加します。 ステップ 1: S3 バケットを作成する AWS アカウントにログインし、  S3 を検索して選択します 次のページで、  をクリックします。 [バケットの作成] 開いたウィンドウで、バケットの作成に必要な情報を提供します。 一般的な構成 バケットに名前を付けて、デフォルトのリージョンのままにするか、要件に応じて別のリージョンを選択します。 オブジェクトの所有権 所有権については、バケット内のオブジェクトを自分のアカウントが所有できるようにします。  [パブリック アクセスをブロックする] 設定で、[すべてのパブリック アクセス オフにします。これを行うと、警告メッセージが表示され、画像のようにメッセージ内のボックスにチェックを入れます。 をブロックする] を バケットのバージョン管理、タグ、デフォルトの暗号化、詳細設定については、デフォルト設定のままにするか、プロジェクトの要件に従って変更し、  をクリックします。 [バケットの作成]   ステップ 2: ポリシーを管理する 次のステップでは、作成したバケット ポリシーを管理します。バケットのページに移動し、 次に、バケット ポリシー セクションまで下にスクロールし、[編集] をクリックして、以下のコードを追加し、 権限タブを開きます。 保存します。   { "Version": "2012-10-17", "Id": "Policy1397632521960", "Statement": [ { "Sid": "Stmt1397633323327", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*" } ] }   をバケットの名前に置き換えます。こちらが <YOUR_BUCKET_NAME> medusastorebucket ステップ 3: ポリシーをアタッチする アカウントで に移動し IAM 、左側のメニューで [アクセス管理] -> [ポリシー] を選択します。 初めてポリシーを選択する場合は、[ポリシーの管理へようこそ] ページが表示され、[開始] を選択するか、  [ポリシーの作成] を選択します。 次に、JSON タブを選択し、次のコードを追加します。   { "Version": "2012-10-17", "Statement" : [ { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] }, { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] } ] } 要件に応じて と 置き換え、  をクリックします。 action-statement resource-statement Next:tag の詳細 ポリシーと権限 タグはオプションであるため、この手順をスキップして、[レビュー] ボタンをクリックしてポリシーを確認できます。  次に、ポリシーの名前と説明を入力し、  をクリックします。 [ポリシーの作成] ポリシーを作成したら、それをユーザー グループにアタッチし、  に移動して を選択する必要があります。グループの名前を選択し、  を開きます Amazon コンソール [ユーザー グループ] [アクセス許可] タブ を選択し、 [アクセス許可の追加] ポリシーをアタッチします 開いたウィンドウで、アタッチするポリシーを選択し、ページの下部にある [権限の追加] をクリックします。 ステップ 4: アクセス キーを取得する S3 プラグインをプロジェクトに統合するには、アクセス キーを取得する必要があります。 2 つの要素が必要です。  と  。 Access Key ID Secret Access Key  AWS アクセス キー ID とシークレット アクセス キーを取得するには、左側のナビゲーションで に移動し、  Amazon コンソール [ユーザー] を選択します。   選択し、  を開きます IAM ユーザー名を [セキュリティ認証情報] タブ [アクセス キー] まで下にスクロールし、  をクリックします。 [アクセス キーの作成] 次のウィンドウで、アクセス キーを使用する場所を選択するよう求められます。ローカル開発環境で作業している場合は、 確認してください。  ローカル コードを ローカルを選択すると、推奨事項を理解しているかどうかを尋ねる警告メッセージが表示されます。チェックボックスにチェックを入れて、次へボタンをクリックしてください。 最後に、必要に応じてタグの説明を追加し、  をクリックします。 [アクセス キーの作成] 次のウィンドウに、アクセス キーとシークレット アクセス キーが表示されます。次のステップで使用するか、CSV ファイルをダウンロードするため、コピーして PC の任意の場所に貼り付けてください。  ステップ 5: S3 プラグインをインストールする バケットをセットアップしてアクセス キーを作成したので、S3 プラグインをインストールします。これを行うには、Medusa バックエンド フォルダーに移動し、次のコマンドでインストールします。   yarn add medusa-file-s3 また npm install medusa-file-s3 次に、  ファイルを開き、次を追加します。 .env   S3_URL=<YOUR_BUCKET_URL> S3_BUCKET=<YOUR_BUCKET_NAME> S3_REGION=<YOUR_BUCKET_REGION> S3_ACCESS_KEY_ID=<YOUR_ACCESS_KEY_ID> S3_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY> どこ はバケットの URL です。  の形式です。  はバケットの名前、  リージョンです。 <YOUR_BUCKET_URL> https://<BUCKET_NAME>.s3.<REGION>.amazonaws.com <BUCKET_NAME> <REGION>   は、作成されたバケットの名前です <YOUR_BUCKET_NAME> バケットのリージョン <YOUR_BUCKET_REGION> <YOUR_ACCESS_KEY_ID> はアクセス キーです は秘密鍵です <YOUR_SECRET_ACCESS_KEY> 最後に、  に次のコードを追加します。 medusa-config.js   const plugins = [ // ... { resolve: `medusa-file-s3`, options: { s3_url: process.env.S3_URL, bucket: process.env.S3_BUCKET, region: process.env.S3_REGION, access_key_id: process.env.S3_ACCESS_KEY_ID, secret_access_key: process.env.S3_SECRET_ACCESS_KEY, }, }, ] 多くのストレージ プラグインが構成されている場合は、最後に宣言されたプラグインが使用されることに注意してください。したがって、S3 を使用する場合は、それが最後に追加されたストレージ プラグインであることを確認してください。 ステップ 6: プラグインのテスト これで、プラグインが正常に追加されました。すべてが正しい場所にあることを確認するためにテストする時が来ました。  または Medusa Admin を使用してテストできます。 REST API  admin フォルダーと backend フォルダーにそれぞれ移動し、次のコマンドを実行します。   // admin yarn run start   // backend yarn run start デフォルトの管理者の電子メールとパスワードは、それぞれ と です。  で管理パネルを開きます admin@medusa-test.com supersecret http://localhost:7000/ メニューで をクリックし、次に クリックします。製品の詳細を提供し、公開します。 Products Add Product を 最後に、  を使用している場合は、S3 バケット ドメイン名を構成済みイメージのドメイン名に追加する構成をストアフロントに追加する必要があります。そうしないと、次のエラー が表示されます。 NextJS storefront next/image Un-configured Host したがって、  に以下を追加します。 next.config.js   const { withStoreConfig } = require("./store-config")   // ...module.exports = withStoreConfig({ // ... images: { domains: [ // ... "<BUCKET_NAME>.s3.amazonaws.com", ], }, })   バケットの名前を表します。 <BUCKET_NAME>   でストアフロントを実行して、追加した新製品がそこにあるかどうかを確認し、プロジェクトの次のフェーズに進みます。 yarn run dev 結論 これでこのチュートリアルは終わりです。Medusa ストアにファイル サービス プラグインを追加できたことを願っています。ツールを最大限に活用するには、支払いサービス、検索、通知サービスを追加することを検討してください。

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get more from the website

Read My Stories

Newsletter

Buy Me a Coffee

Support Me On Patreon

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

ファイルサービスプラグインを Medusa ストアに追加する: 基本ガイド

About Author

コメント

ラベル

この記事は

Related Stories

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

ワークフローを10倍に向上させる方法: 必須アプリ17選

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

海を航海する: データレイクを使用した本番環境レベルの RAG アプリケーションの開発

ワークフローを10倍に向上させる方法: 必須アプリ17選

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

ファイル サービス プラグインを Medusa ストアに追加する: 基本ガイド