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

ヘッドレス コマースは長い間存在しており、Medusa はモジュラー コンポーネントを提供するための最良のツールの 1 つです。 Medusa の構成可能なアーキテクチャにより、選択した任意のフレームワークまたは言語でストアを構築できるため、完全なカスタマイズ機能が提供されます。 Medusa を使用すると、開発者が強力な e コマース Web サイトを作成するために追加できる一連のツールと必須のビルディング ブロックを提供することで、独自の e コマース エクスペリエンスを構築することもできます。顧客、製品、配送、税金と地域の管理、RMA フローなどのすぐに使える機能を提供します。今日のチュートリアルでは、ファイル サービス プラグインを追加して、管理ダッシュボードを介して Medusa ストアに製品を追加できるようにする方法を学びます。

メデューサとは

Medusa は、驚くほど信頼性の高い e コマース Web サイトを構築できるオープンソースのツール セットです。 GitHub で 17.8k を超えるスターと 1.3k のフォークを備えたこのヘッドレス コマース ソリューションには、基本的なものから高度なものまで、いくつかのコマース モジュールが付属しており、無料で利用できます。モジュールまたはプラグインを追加する方法に関する段階的なガイドラインがあるため、よく書かれたドキュメントも成功に貢献しています.とりわけ人気のあるプラグインには、支払い、通知、検索、およびファイル サービスのプラグインがあります。

ファイル サービス プラグインとは

ファイル サービス プラグインを使用すると、Medusa で使用される画像などのファイルをホストできます。 Medusa ストアのファイル サービスを適切に使用または設定しないと、問題が発生する可能性があります。 Medusa は、ファイル ストレージを管理する 3 つの異なる方法を提供します。 S3、 MinIo 、およびSpaces 。このチュートリアルでは、Medusa にアップロードされた画像とファイルを保存するための S3 ファイル ストレージのみに焦点を当てています。

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>

どこ

• <YOUR_BUCKET_URL>はバケットの 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: プラグインのテスト

これで、プラグインが正常に追加されました。すべてが正しい場所にあることを確認するためにテストする時が来ました。 REST APIまたは Medusa Admin を使用してテストできます。

admin フォルダーと backend フォルダーにそれぞれ移動し、次のコマンドを実行します。

 // admin yarn run start

 // backend yarn run start

デフォルトの管理者の電子メールとパスワードは、それぞれadmin@medusa-test.comとsupersecretです。 http://localhost:7000/で管理パネルを開きます

メニューでProductsをクリックし、次にAdd Product をクリックします。製品の詳細を提供し、公開します。

最後に、 NextJS storefrontを使用している場合は、S3 バケット ドメイン名を構成済みイメージのドメイン名に追加する構成をストアフロントに追加する必要があります。そうしないと、次のエラー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 ストアにファイル サービス プラグインを追加できたことを願っています。ツールを最大限に活用するには、支払いサービス、検索、通知サービスを追加することを検討してください。