Learning dev tools from beginner to advanced level. Visit learn-dev-tools.blog
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.
无头商务已经存在很长时间了,Medusa 是提供模块化组件的最佳工具之一。 Medusa 的可组合架构允许您使用您选择的任何框架或语言构建商店,从而提供完全的定制能力。 Medusa 同样允许您通过提供一组工具和基本构建块来构建独特的电子商务体验,开发人员可以将它们加起来创建一个强大的电子商务网站。它提供开箱即用的功能,例如客户、产品、运输、税收和区域管理以及 RMA Flow。在今天的教程中,您将学习如何添加文件服务插件,以便能够通过管理仪表板将产品添加到您的 Medusa 商店
Medusa 是一组开源工具,可让您构建出色且可靠的电子商务网站。在 GitHub 上拥有超过 17.8k 颗星和 1.3k 个分支,这个无头商务解决方案附带了一些从基础到高级的商务模块,并且可以免费使用。其精心编写的文档也有助于其成功,因为有关于如何添加模块或插件的分步指南。一些流行的插件包括支付、通知、搜索和文件服务插件。
文件服务插件允许您托管文件,例如美杜莎中使用的图像。如果您没有正确使用或设置 Medusa 商店的文件服务,您可能会遇到问题。 Medusa 提供三种不同的方式来管理文件存储; S3、 MinIo和空间。本教程仅关注 S3 文件存储,以存储在 Medusa 中上传的图像和文件。
S3 或简单存储服务是一种对象存储,用于随时随地存储和检索任意数量的数据。我们将使用 Amazon S3 进行此演示。
Amazon 将数据作为对象保存在存储桶中。一个对象由一个文件和描述它的可选数据组成。文件存储需要上传到桶中(桶是对象的容器),上传后可以对对象设置权限。
现在让我们让您快速上传 Medusa 项目中的文件。
如果您已设置好所有内容,请按照以下步骤将文件服务插件添加到您的 Medusa 商店。
登录到您的 AWS 帐户,搜索并选择 S3
在下一页中,单击创建存储桶
在打开的窗口中,提供创建存储桶所需的信息。
一般配置
为您的存储桶提供一个名称并保留默认区域或根据您的要求选择另一个区域。
对象所有权
对于所有权,允许存储桶中的对象归您的账户所有。
在阻止公共访问设置中,取消选中阻止所有公共访问。这样做将显示一条警告消息,如图所示选中消息中的框。
至于 Bucket 版本控制、标签、默认加密和高级设置,保留默认设置或根据项目要求更改它们,然后单击Create bucket 。
下一步包括管理您创建的存储桶策略。前往您的存储桶页面并打开权限选项卡。然后向下滚动到存储桶策略部分,单击编辑,添加下面的代码并保存。
{ "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
在您的帐户中,导航至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 控制台并选择User Groups 。选择群组名称,然后打开“权限”选项卡
选择添加权限,然后附加策略
在打开的窗口中,选择要附加的策略,然后单击页面底部的添加权限。
您需要获取访问密钥才能将 S3 插件集成到您的项目中。您将需要两个要素; Access Key ID
和Secret Access Key
。
要获取您的 AWS 访问密钥 ID 和秘密访问密钥,请前往左侧导航中的Amazon 控制台,然后选择用户。
选择您的IAM 用户名并打开安全凭证选项卡
向下滚动到访问密钥并单击创建访问密钥
在下一个窗口中,系统会要求您选择要在何处使用访问密钥。如果您在本地开发环境中工作,请检查本地代码。
通过选择本地,将出现一条警告消息,询问您是否理解该建议。选中该框并单击下一步按钮。
最后,如果您想添加标签描述,请添加标签描述,然后单击“创建访问密钥”
在下一个窗口中,您将看到您的访问和秘密访问密钥。请将其复制并粘贴到您 PC 上的某个位置,因为您将在下一步中使用它或下载 CSV 文件。
现在您已经设置了存储桶并创建了访问密钥,是时候安装 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_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,请确保它是最后添加的存储插件。
现在您已经成功添加了您的插件。现在是测试以确保一切都在正确位置的时候了。您可以使用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 店面,您需要在店面中添加一个配置,将 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 商店。要充分利用该工具,请考虑添加支付服务、搜索和通知服务。
将文件服务插件添加到您的 Medusa 商店:基本指南 | HackerNoon