在建立在线商店时，找到合适的托管提供商至关重要。可靠的主机可以确保您的网站启动和运行，即使在流量较高的时候也是如此。 Vercel是针对性能和可伸缩性优化的托管提供商。这是电子商务店面的绝佳选择。

拥有一个好主人只是战斗的一半。您还需要一个灵活的电子商务引擎，可以定制以适应您的需求，这就是您需要美杜莎的所在地。美杜莎（Medusa）是一款可组合的电子商务引擎，可提供许多开箱即用的功能。它允许开发人员选择任何前端堆栈并按照他们的意愿量身定制店面。

在本教程中，您将学习如何使用Next.js，Medusa和Stripe构建完整的商业网站，并使用Vercel部署网站。

什么是Vercel？

Vercel是一个云平台，使开发人员能够轻松地构建和部署使用Next.js，Svelte，svelte，react.js，nuxt.js等框架构建的现代Web项目。使用Vercel，您可以托管静态站点和无服务器功能。您可以利用令人兴奋的功能，例如自动HTTP，全局CDN，Vercel CLI和Atomic部署。

vercel与git集成，即它可以连接到您的git存储库，并在更改它时自动部署代码。这被称为“连续集成和部署”（CI/CD）。

因此，您可以轻松地部署项目，而不必担心管理基础架构。无论您是初学者还是经验丰富的开发人员，Vercel都会提供无缝的开发人员体验，使您可以专注于构建出色的产品。

为什么要使用Vercel？

• 简单的部署和托管：Vercel使使用直观界面和一键设置的部署和托管Web项目变得简单。
• 与流行的框架和工具集成：Vercel支持许多流行的框架和工具，包括React，Angular，Vue，Next.js等，使其成为各种Web项目的通用选项。
• 自动HTTPS和全局CDN：Vercel自动为您的域提供并续订SSL证书，并将项目文件分配给全局CDN，这有助于提高网站的性能和安全性。

什么是什么。

Next.js是一个流行的开源JavaScript框架，用于构建服务器渲染和静态生成的Web应用程序。它基于React，一个用于构建用户界面的JavaScript库。它旨在使开发人员易于创建用于性能的快速，可扩展的Web应用程序。

next.js提供了用于构建和部署Web应用程序的功能和工具，包括服务器端渲染，自动代码拆分，增量静态再生，数据获取以及对静态和动态路由的支持。

它是SEO友好型的，开发人员广泛使用了现代Web应用程序。它以简单性和易用性而闻名。

为什么使用next.js？

• 服务器渲染：Next.js是构建服务器渲染的React应用程序的框架。这意味着在服务器上完成了next.js应用程序的初始渲染，这可以改善网站的性能和SEO。
• 自动代码拆分：next.js会自动将代码分成小块，这有助于减少网站的初始加载时间并改善用户体验。
• 热代码重新加载：next.js支持热代码重新加载，它使您可以在不必手动刷新页面的情况下查看代码的更改。

什么是美杜莎？

Medusa是一个开源的Node.js-based，可综合商务引擎。它为希望扩展的电子商务企业提供了惊人的开发人员体验和无尽的自定义选择。

美杜莎有三个组件：美杜莎服务器，美杜莎管理员和美杜莎店面。 Medusa服务器可以与您选择的任何frontend技术集成在一起，从而使开发人员在构建其在线商店时易于使用不同的前端技术。

美杜莎具有重要的电子商务功能，例如管理仪表板，多付款选项，手动订单，multi-currency support，购物车，产品和图像优化，SEO友好型界面等等。

为什么要使用美杜莎？

• 可访问的代码库：作为开源商务引擎，美杜莎（Medusa）在其官方GitHub存储库中提供了所有代码库，使开发人员更容易访问。
• 无头体系结构：Medusa基于Node.js，并将前端与后端分开。它还将管理面板与后端分开。改变后端，管理员或店面的一部分不会影响另一部分。这将帮助开发人员知道修复错误时要关注哪里。
• 强大的社区支持：美杜莎通过其Discord渠道提供24/7的社区支持。

什么是条纹？

Stripe是一个付款处理平台，为企业在线接受付款提供了一种简单，安全的方式。它提供了一系列用于处理交易的工具和服务，包括支持信用卡和借记卡付款以及其他形式的付款，例如Apple Pay和Google Pay。

Stripe提供了一组全面的API和库，使开发人员可以轻松地将其付款处理能力集成到其网站和应用程序中。

为什么使用条纹？

• 安全付款：Stripe采用行业标准的安全措施来确保所有交易均安全且符合法规。
• 可伸缩性：条纹可以处理大量交易，并且可以轻松扩展以满足不断增长的业务的需求。
• 强大的功能集：Stripe提供各种功能，包括订阅，经常性付款和欺诈检测，可以帮助企业简化其付款过程。

先决条件

启动本教程之前，请确保您已经准备好以下内容：

• Node.js（V14或更高版本）
• Stripe帐户（准备好API键）
• Git安装
• Vercel帐户

创建美杜莎项目

Medusa项目由服务器，店面和管理员组成。所有这些将使用单个命令行安装。

在您的终端中，运行以下命令：

npx create-medusa-app

在运行上述命令时，您将要求您输入要安装项目的目录的名称。您可以离开默认值my-medusa-store或输入新名称。

接下来，选择Medusa服务器启动器。 MEDUSA服务器是由启动模板创建的。默认情况下，它是从medusa-starter-default模板创建的。因此，选择medusa-starter-default使您能够跟进此项目。

这样做将在Directory my-medusa-store/backend下安装服务器。它还将在该目录中创建一个带有演示数据的目录中的SQLite数据库。

选择了美杜莎（Medusa）启动器后，下一个提示将要求您选择店面起动器。选择Next.js启动器，这是您将在此项目店面使用的。

成功完成以上完成后，您可以按照下面的代码块进行浏览以围绕商店服务器，管理员和店面导航：

## Medusa API
cd my-medusa-store/backend
medusa develop

## Medusa Store Admin
cd my-medusa-store/admin
npm start

## Medusa Storefront
cd my-medusa-store/storefront
npm run dev

注意：每个文件夹（后端，管理员和店面）都有其自己的git历史记录。

在MEDUSA后端安装和配置Stripe Medusa插件

Stripe Medusa插件将启用Stripe付款以在此项目上工作，并为您的项目创建一个与Stripe API通信的渠道。

启动之前，请使用以下命令导航到backend目录：

cd my-medusa-store/backend

在后端的根部，运行以下命令以安装条纹插件：

npm install medusa-payment-stripe

接下来，您需要在.env文件中添加Stripe API键和Stripe Webhook Secret：

STRIPE_API_KEY=example_API_key_xxxxx
STRIPE_WEBHOOK_SECRET=example_WEBHOOK_key_xxxxx

在上面，用从您的Stripe dashboard获得的钥匙替换example_API_key_xxxxx和example_WEBHOOK_key_xxxxx。

注意：Stripe Webhook Secret不需要添加开发。如果您愿意，可以跳过。

接下来，您需要为条纹插件添加配置。在medusa-config.js中，在plugins数组的末尾添加以下内容：

const plugins = [
  // ...
  {
    resolve: `medusa-payment-stripe`,
    options: {
      api_key: process.env.STRIPE_API_KEY,
      webhook_secret: process.env.STRIPE_WEBHOOK_SECRET,
    },
  },
]

测试Medusa服务器

如果您完成了上述过程，请使用以下命令启动商店服务器：

medusa develop

您可以导航到localhost:9000/store/products/在商店中查看可用产品。

您在上面看到的图像表示包含您的商店产品的示例响应。您应该看到类似的东西。

在一个地区启用条纹付款提供商

美杜莎（Medusa）的区域用于管理您将在其中运营的市场。您可以在一个地区管理和添加多个国家。您还可以管理运输选项和付款提供商。

启动之前，请导航到admin目录，然后使用以下命令启动管理员：

cd my-medusa-store/admin
npm start

确保您的后端服务器仍在运行，然后在浏览器上localhost:7000访问管理页面。

如果您成功地完成了上述步骤，则应与上图相似的页面。

美杜莎（Medusa）用可以登录的演示管理员将数据库播种。该电子邮件为admin@medusa-test.com，密码为supersecret。

如果您使用演示管理登录详细信息登录，则可以访问管理仪表板。

下一步是向您的区域添加条纹付款，只需按照以下步骤操作：

转到设置区域。

单击要从区域进行编辑的区域部分。

单击所选区域右上方的三点图标，然后单击编辑区域详细信息。

选择条纹作为付款提供商。

完成步骤4后，您可以单击保存并关闭按钮以保存。

重复以下步骤以将条纹付款添加到其他区域。

测试Next.js店面

在测试之前，请切换到 storefront 目录，然后重命名模板环境变量文件以使用开发中的环境变量：

cd my-medusa-store/storefront
mv .env.template .env.local

然后，将Stripe公钥添加到您的下一个店面。

在您的.env.local文件（或您用于环境变量的文件）中，添加以下变量：

NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>

确保用Stripe Publishable Key替换<YOUR_PUBLISHABLE_KEY>。

最后，确保您的Medusa服务器运行，然后运行以下命令：

npm run dev

运行上述命令几秒钟后，在浏览器上导航到localhost:8000以查看您的next.js电子商务店面主页。

向下滚动以从主页上的特色产品中选择产品。

单击产品以查看单个产品**页面，您可以在其中添加物品。

如果您在商店右上方单击我的书包，您将查看商店的“购物车评论”页面。

单击转到Checkout 查看您的结帐页面，您将被要求输入您的送货信息。

成功付款后，您将查看订单收据页。

部署到Vercel

测试您的商店后，接下来的事情是使用Vercel部署商店后端，管理员和店面。

部署美杜莎后端

美杜莎（Medusa）已经提供了有关如何在不同托管服务器中托管Medusa服务器的不同清晰文档。

您检查Medusa Server Deployment Guide以将后端部署到您选择的任何服务器。

部署美杜莎管理员面板

您可以轻松地在Netlify上部署Medusa Admin，然后以下Medusa Admin Deployment Guide。

部署Next.js店面

在部署您的下一个店面时，您将使用Vercel处理此操作。

可以使用Vercel CLI或Vercel for Git在Vercel中部署Next.js店面。对于本教程，您可以使用以下步骤作为指南来使用vercel进行git。

注意：您应该准备好后端URL，因为需要它。

将您的店面项目推到GitHub存储库。

在您的Vercel仪表板上，单击 import 按钮以导入新项目。

在项目名称字段中输入项目名称。

添加环境变量：NEXT_PUBLIC_MEDUSA_BACKEND_URL和NEXT_PUBLIC_STRIPE_KEY。

配置环境变量时，请确保您使用生产服务器（例如：https://my-medusa-server.com）和Live Stripe公钥设置后端URL。

单击部署开始部署过程。

部署过程完成后，您的店面就准备就绪。您可以访问域链接以查看您的店面。

注意：在测试之前，请确保使用新的Vercel URL更新服务器的STORE_CORS环境变量，以避免CORS问题。您可以在Medusa文档上检查CORS configurations。

结论

在本教程中，您了解了如何使用Next.js，Medusa和Stripe构建Vercel电子商务网站。您正在浏览设置Medusa服务器，Medusa Admin和Medusa Next.js Storefront的步骤。

您还可以为您的商店添加各种功能，例如Algolia搜索引擎服务，Mailchimp新闻通讯的电子邮件营销服务，Segment用于收集分析的数据平台等等。

您可以从Medusa’s Documentation了解有关美杜莎商业引擎的更多信息。

如果您有任何与美杜莎有关的问题或问题，然后随时通过Discord与Medusa团队联系。