1.7 KiB
1.7 KiB
app-product 商品模块（微前端模块）
从项目中拆分出来，用于演示的微前端模块，主要实现 商品相关功能。本案例演示中提供：
- 调用 微前端 app-shared 模块
- 调接口，获取商品首页的数据和展示
- 调接口，点击商品列表进入商品详情页
运行
下面文档分为开发和上线两部分进行说明！
开发
# 安装依赖
npm install
# 开发阶段 运行 项目
# PS：注意此命令运行的项目，【无法】被其他 微前端模块 使用，仅用于本地独立开发，独立测试
npm run dev
# 启动 实时打包 & 实时预览
# PS：注意此命令运行的项目，【可以】被其他 微前端模块 调用，可用于本地开发和微前端联合开发
npm run dep
上线
docker/ 文件夹说明
app-product.yml- Dcoker Swarm 集群部署配置deploy-swarm.sh- 自动化部署脚本docker-compose.yml- 开发阶段容器编排Dockerfile- 打包构建前端代码为镜像nginx.conf- 镜像内前端被访问的Nginx配置
前端工作：
- 1: 编辑 前端 .env.development 和 .env.production 环境变量（只需修改一次）
- 2: 确认或编辑 docker/Dockerfile，docker/nginx.conf
- 3: 编辑 docker/deploy-swarm.sh
还有很多细节未展开，后面再详细说，大致确认无误后。 在前端集群的管理机上进入项目根目录，执行下面命令部署：
# 运行自动化集群部署脚本
./docker/deploy-swarm.sh
# --- 其他命令 ---
# 删除之前的部署（可选）
docker stack rm app-product
# 查看 app-product 集群运行情况
docker stack ps app-product
# 持续观察服务副本数是否达到预期
watch docker stack services app-product