文章目录
显示
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 需要 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 前端
效果