开源电商平台 Medusa 的开发环境搭建

Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences.

下文将展示如何在 Debian 11 下搭建 Medusa 的开发环境

环境

• Debian 11
  • Node.js 16 LTS

参考

• medusa - GitHub
• Medusa Documentation

步骤

后端搭建

环境安装

使用 Medusa 需要 Node.js、PostgreSQL 和 Redis，执行

# Node.js 16 LTS
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
apt-get install -y nodejs

# redis postgresql 13
apt install redis postgresql

# yarn
npm install -g yarn

安装 Medusa-cli

npm install -g @medusajs/medusa-cli

新建并启动 Medusa 项目

执行指令新建项目

medusa new [自定义名称] --seed

指令会在指定名称的目录下新建 Medusa-server，添加的 --seed 参数会自动在数据库生成一些用于测试的商品（Medusa 衣服、裤子、杯子等）

运行 Medusa-server

cd [自定义名称]
medusa develop

之后进入浏览器，访问 http://[IP]:9000/store/products 测试是否运行成功

前端（Storefront）搭建

官方推荐使用 Gatsby 或者 Next.js，这里选择 Next.js

新建 Medusa 前端项目

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa [自定义名称]

前端接入后端

进入前端项目的 utils 目录，编辑 client.js 文件

import Medusa from "@medusajs/medusa-js"
const BACKEND_URL = process.env.GATSBY_STORE_URL || "http://localhost:9000" // 如果更改了后端的监听端口，需要修改此处的端口
export const createClient = () => new Medusa({ baseUrl: BACKEND_URL })

如果手动更改了后端的监听端口，需要修改 http://localhost:9000 的端口

如果没有更改端口则跳过此步骤

更新 STORE_CORS 变量

进入后端项目目录，编辑 medusa-config.js 文件

// CORS to avoid issues when consuming Medusa from a client
const STORE_CORS = process.env.STORE_CORS || "http://localhost:3000"; // 更改端口号

将 http://localhost:3000 的端口号更改为前端项目的端口号（前端默认监听 3000 端口）

运行 Next.js 前端

回到前端项目根目录，运行

yarn build
yarn start

之后浏览器访问 IP:[端口] 进入 Medusa 前端

效果