完善架构,修改很多地方
This commit is contained in:
14
front-end/app-product/.dockerignore
Normal file
14
front-end/app-product/.dockerignore
Normal file
@@ -0,0 +1,14 @@
|
||||
node_modules
|
||||
dist
|
||||
.git
|
||||
.DS_Store
|
||||
*.log
|
||||
docker/ # 排除 docker 配置文件夹本身
|
||||
.editorconfig
|
||||
.eslintrc.js
|
||||
.prettierrc
|
||||
|
||||
.vscode
|
||||
.idea
|
||||
*.swp
|
||||
*.swo
|
||||
@@ -1,7 +1,7 @@
|
||||
# 请求协议 http or https(建议线上配置证书后,使用https)
|
||||
VITE_PREFIX=http://
|
||||
|
||||
# Nacos 配置中心 ip:端口 | 域名
|
||||
# 内网 中的 Nacos 配置中心 ip:端口 | 域名
|
||||
#VITE_NACOS_ADDRESS=cluster.nacos.com
|
||||
VITE_NACOS_ADDRESS=192.168.139.84:8848
|
||||
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
# 请求协议 http or https(建议线上配置证书后,使用https)
|
||||
VITE_PREFIX=http://
|
||||
|
||||
# Nacos 配置中心 ip:端口 | 域名
|
||||
# 内网 中的 Nacos 配置中心 ip:端口 | 域名
|
||||
#VITE_NACOS_ADDRESS=cluster.nacos.com
|
||||
VITE_NACOS_ADDRESS=192.168.139.84:8848
|
||||
|
||||
|
||||
# 注册到 Nacos 的服务名称(微前端模块名称
|
||||
VITE_SERVER_NAME=app-product
|
||||
|
||||
# 注册到 Nacos 的端口,也是前端运行的端口
|
||||
VITE_SERVER_PORT=1301
|
||||
|
||||
|
||||
#
|
||||
# 说明:项目要调用哪些 微前端 模块
|
||||
# 格式:VITE_MODEL_XXXX_NAME=微前端模块名称(模块 的 开发者提供)
|
||||
@@ -19,3 +20,4 @@ VITE_SERVER_PORT=1301
|
||||
|
||||
# shared 共享资源模块
|
||||
VITE_MODEL_SHARED_NAME=app-shared
|
||||
|
||||
|
||||
@@ -1,10 +1,63 @@
|
||||
npm install
|
||||
npm run build
|
||||
npm run serve
|
||||
|
||||
## app-product 商品模块(微前端模块)
|
||||
|
||||
从项目中拆分出来,用于演示的微前端模块,主要实现 商品相关功能。本案例演示中提供:
|
||||
|
||||
- 调用 微前端 app-shared 模块
|
||||
- 调接口,获取商品首页的数据和展示
|
||||
- 调接口,点击商品列表进入商品详情页
|
||||
|
||||
|
||||
构建与部署:
|
||||
## 运行
|
||||
|
||||
- 在构建生产环境时,先构建主模块,并将其产出(特别是 remoteEntry.js 和对应的资产文件)部署到服务器,并获取其 URL。
|
||||
- 然后,在子模块的 vite.config.ts 中,将 remotes 的 URL 更新为生产环境主模块 remoteEntry.js 的绝对 URL。
|
||||
- 最后再构建子模块。
|
||||
下面文档分为**开发**和**上线**两部分进行说明!
|
||||
|
||||
### 开发
|
||||
|
||||
```bash
|
||||
# 安装依赖
|
||||
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
|
||||
|
||||
还有很多细节未展开,后面再详细说,大致确认无误后。
|
||||
在前端集群的管理机上进入项目根目录,执行下面命令部署:
|
||||
|
||||
```bash
|
||||
# 运行自动化集群部署脚本
|
||||
./docker/deploy-swarm.sh
|
||||
|
||||
# --- 其他命令 ---
|
||||
|
||||
# 删除之前的部署(可选)
|
||||
docker stack rm app-product
|
||||
|
||||
# 查看 app-product 集群运行情况
|
||||
docker stack ps app-product
|
||||
|
||||
# 持续观察服务副本数是否达到预期
|
||||
watch docker stack services app-product
|
||||
```
|
||||
21
front-end/app-product/docker/Dockerfile
Normal file
21
front-end/app-product/docker/Dockerfile
Normal file
@@ -0,0 +1,21 @@
|
||||
FROM node:24-alpine AS builder
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json ./
|
||||
|
||||
# 直接使用 npm install 并解决依赖问题
|
||||
RUN npm install --no-audit --no-fund --legacy-peer-deps
|
||||
|
||||
# 拷贝源码并构建
|
||||
COPY . .
|
||||
|
||||
# 【前端修改】如果要以子路径 /app-product/ 部署,请用 base 指定前缀,同 .env中VITE_SERVER_NAME
|
||||
RUN npx vite build --base=/app-product/
|
||||
|
||||
FROM nginx:alpine
|
||||
# 构建产物放到 /usr/share/nginx/html/app-product
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html/app-product
|
||||
# 覆盖 Nginx 配置,支持 SPA 子路径
|
||||
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
39
front-end/app-product/docker/app-product.yml
Normal file
39
front-end/app-product/docker/app-product.yml
Normal file
@@ -0,0 +1,39 @@
|
||||
version: "3.8" # Docker Compose 文件版本,3.8 支持 Swarm 模式的所有功能
|
||||
|
||||
services:
|
||||
app-product:
|
||||
image: app-product:latest
|
||||
ports:
|
||||
- target: 80 # 容器内部端口
|
||||
published: 1301 # 宿主机对外暴露端口
|
||||
protocol: tcp # 协议类型
|
||||
mode: ingress # 模式:使用路由网格
|
||||
deploy:
|
||||
replicas: 3 # 副本数量,在集群中运行 3 个容器实例
|
||||
placement:
|
||||
max_replicas_per_node: 1 # 每个 Swarm 节点最多运行 1 个副本,确保高可用性
|
||||
restart_policy:
|
||||
condition: any # 重启条件:任何情况下容器退出都重启
|
||||
delay: 5s # 重启延迟 5 秒
|
||||
max_attempts: 3 # 最大重启尝试次数
|
||||
update_config: # 滚动更新配置
|
||||
parallelism: 1 # 并行更新数量:一次只更新 1 个容器
|
||||
delay: 10s # 更新间隔:每个容器更新后等待 10 秒再更新下一个
|
||||
failure_action: rollback # 更新失败时自动回滚到上一版本
|
||||
order: start-first # 更新顺序:先启动新容器,确认健康后再停止旧容器
|
||||
rollback_config: # 回滚配置
|
||||
parallelism: 1 # 回滚时并行数量
|
||||
delay: 5s # 回滚延迟
|
||||
resources: # 资源限制
|
||||
limits: # 资源上限
|
||||
cpus: "0.50" # 最多使用 0.5 个 CPU 核心
|
||||
memory: "256M" # 最多使用 256MB 内存
|
||||
reservations: # 资源预留
|
||||
cpus: "0.25" # 预留 0.25 个 CPU 核心
|
||||
memory: "128M" # 预留 128MB 内存
|
||||
networks:
|
||||
- frontend # 连接到 frontend 网络
|
||||
|
||||
networks:
|
||||
frontend: # 定义 frontend 网络
|
||||
driver: overlay # 使用 overlay 网络驱动,支持跨主机通信
|
||||
100
front-end/app-product/docker/deploy-swarm.sh
Executable file
100
front-end/app-product/docker/deploy-swarm.sh
Executable file
@@ -0,0 +1,100 @@
|
||||
#!/bin/bash
|
||||
# deploy-swarm.sh
|
||||
|
||||
set -e
|
||||
|
||||
# 仓库用户名
|
||||
USER_NAME="bmy"
|
||||
# 仓库密码
|
||||
USER_PASSWORD="lb714500."
|
||||
# 仓库地址
|
||||
REGISTRY="registry.bmycode.help"
|
||||
# 镜像名称
|
||||
IMAGE_NAME="${REGISTRY}/app-product"
|
||||
# tag 标签
|
||||
TAG="v$(date +%Y%m%d-%H%M%S)"
|
||||
# 完整路径
|
||||
FULL_IMAGE="${IMAGE_NAME}:${TAG}"
|
||||
# 工作服务器列表(多个服务器)
|
||||
WORKER_HOSTS=("192.168.139.120" "192.168.139.242")
|
||||
WORKER_USER="root"
|
||||
WORKER_PASSWORD="lb714500."
|
||||
|
||||
echo "=== 1 登录私有镜像仓库 ==="
|
||||
if ! echo "${USER_PASSWORD}" | docker login ${REGISTRY} -u ${USER_NAME} --password-stdin; then
|
||||
echo "错误: 无法登录到私有仓库 ${REGISTRY}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "=== 2 构建 app-product 镜像 ==="
|
||||
docker build \
|
||||
-f docker/Dockerfile \
|
||||
-t ${FULL_IMAGE} \
|
||||
-t ${IMAGE_NAME}:latest \
|
||||
.
|
||||
|
||||
echo "=== 3 推送镜像到私有仓库 ==="
|
||||
docker push ${FULL_IMAGE}
|
||||
docker push ${IMAGE_NAME}:latest
|
||||
|
||||
echo "=== 4 在工作服务器上拉取最新镜像 ==="
|
||||
for WORKER_HOST in "${WORKER_HOSTS[@]}"; do
|
||||
echo ""
|
||||
echo "正在连接到工作服务器: ${WORKER_HOST}"
|
||||
|
||||
if sshpass -p "${WORKER_PASSWORD}" ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null ${WORKER_USER}@${WORKER_HOST} "
|
||||
echo '在工作服务器 ${WORKER_HOST} 上登录私有仓库...'
|
||||
if echo '${USER_PASSWORD}' | docker login ${REGISTRY} -u ${USER_NAME} --password-stdin; then
|
||||
echo '拉取最新镜像...'
|
||||
docker pull ${FULL_IMAGE}
|
||||
docker pull ${IMAGE_NAME}:latest
|
||||
echo '镜像拉取完成'
|
||||
|
||||
|
||||
echo '清理旧的 app-product 镜像...'
|
||||
# 删除除了本次 FULL_IMAGE 和 latest 之外的所有 app-product 镜像
|
||||
docker images ${IMAGE_NAME} --format 'table {{.Repository}}:{{.Tag}}' | \
|
||||
grep -v '${FULL_IMAGE}' | \
|
||||
grep -v '${IMAGE_NAME}:latest' | \
|
||||
grep '${IMAGE_NAME}' | \
|
||||
xargs -r docker rmi -f || true
|
||||
|
||||
else
|
||||
echo '错误: 无法在工作服务器上登录私有仓库'
|
||||
exit 1
|
||||
fi
|
||||
"; then
|
||||
echo "✓ 服务器 ${WORKER_HOST} 镜像拉取成功"
|
||||
else
|
||||
echo "✗ 服务器 ${WORKER_HOST} 镜像拉取失败"
|
||||
exit 1
|
||||
fi
|
||||
done
|
||||
|
||||
echo "=== 5 更新 docker-compose 文件中的镜像标签 ==="
|
||||
sed "s|image: app-product:latest|image: ${FULL_IMAGE}|g" docker/app-product.yml > docker/app-product-deploy.yml
|
||||
|
||||
echo "=== 6 部署到 Swarm 集群 ==="
|
||||
docker stack deploy -c docker/app-product-deploy.yml app-product
|
||||
|
||||
echo "=== 7 恢复原始配置文件 ==="
|
||||
rm -f docker/app-product-deploy.yml
|
||||
|
||||
echo "=== 8 清理本地多余镜像 ==="
|
||||
# 清理本地:删除除了本次 FULL_IMAGE 和 latest 之外的所有 app-product 镜像
|
||||
echo "清理本地旧的 app-product 镜像..."
|
||||
docker images ${IMAGE_NAME} --format 'table {{.Repository}}:{{.Tag}}' | \
|
||||
grep -v "${FULL_IMAGE}" | \
|
||||
grep -v "${IMAGE_NAME}:latest" | \
|
||||
grep "${IMAGE_NAME}" | \
|
||||
xargs -r docker rmi -f || true
|
||||
|
||||
# 清理悬空镜像
|
||||
docker image prune -f
|
||||
|
||||
|
||||
|
||||
echo "=== 9 验证部署状态 ==="
|
||||
docker stack ps app-product
|
||||
|
||||
echo "=== 部署完成 ==="
|
||||
13
front-end/app-product/docker/docker-compose.yml
Normal file
13
front-end/app-product/docker/docker-compose.yml
Normal file
@@ -0,0 +1,13 @@
|
||||
version: "3.8"
|
||||
|
||||
services:
|
||||
app-product:
|
||||
build:
|
||||
context: ..
|
||||
dockerfile: docker/Dockerfile
|
||||
|
||||
image: app-product:1.0.0
|
||||
container_name: app-product
|
||||
ports:
|
||||
- "1301:80"
|
||||
restart: unless-stopped
|
||||
13
front-end/app-product/docker/nginx.conf
Normal file
13
front-end/app-product/docker/nginx.conf
Normal file
@@ -0,0 +1,13 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name *.ddd.com;
|
||||
|
||||
location /app-product/ {
|
||||
alias /usr/share/nginx/html/app-product/;
|
||||
try_files $uri $uri/ /app-product/index.html;
|
||||
add_header 'Access-Control-Allow-Origin' '*';
|
||||
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
|
||||
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
|
||||
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
|
||||
}
|
||||
}
|
||||
@@ -8,31 +8,32 @@
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dep": "concurrently \"npm run build\" \"npm run preview\"",
|
||||
"dep": "concurrently \"vite build --watch\" \"sleep 5 && npm run preview\"",
|
||||
"preview": "vite preview --port 1301 --strictPort",
|
||||
"build": "vite build --watch",
|
||||
"build": "vite build",
|
||||
"type-check": "vue-tsc --build"
|
||||
},
|
||||
"dependencies": {
|
||||
"less": "^4.4.1",
|
||||
"pinia": "^3.0.3",
|
||||
"vite-plugin-nacos": "link:../vite-plugin-nacos",
|
||||
"vue": "^3.5.21",
|
||||
"vite-plugin-nacos": "^1.1.3",
|
||||
"vue": "^3.5.22",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@originjs/vite-plugin-federation": "^1.4.1",
|
||||
"@tsconfig/node22": "^22.0.2",
|
||||
"@types/node": "^22.18.6",
|
||||
"@types/node": "^24.6.1",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vitejs/plugin-vue-jsx": "^5.1.1",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"element-plus": "^2.11.3",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"element-plus": "^2.11.4",
|
||||
"npm-run-all2": "^8.0.4",
|
||||
"rollup-plugin-visualizer": "^6.0.3",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^7.1.6",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.1.7",
|
||||
"vite-federation": "^3.4.4",
|
||||
"vite-plugin-vue-devtools": "^8.0.2",
|
||||
"vue-tsc": "^3.0.7"
|
||||
"vue-tsc": "^3.1.0"
|
||||
}
|
||||
}
|
||||
@@ -17,7 +17,7 @@ export default defineComponent({
|
||||
<h2>本模块包含的功能:</h2>
|
||||
<ul>
|
||||
<li>1:获取商品首页的数据和展示</li>
|
||||
<li>2:点击视频进入详情页</li>
|
||||
<li>2:点击商品进入详情页</li>
|
||||
</ul>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { defineConfig, loadEnv } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
import federation from '@originjs/vite-plugin-federation';
|
||||
import federation from 'vite-federation';
|
||||
import { fileURLToPath, URL } from "node:url";
|
||||
import { visualizer } from 'rollup-plugin-visualizer';
|
||||
import { reg, init } from 'vite-plugin-nacos';
|
||||
@@ -10,9 +10,13 @@ import { reg, init } from 'vite-plugin-nacos';
|
||||
export default defineConfig(async ({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd());
|
||||
const { VITE_MODEL_SHARED_URL } = await init(env)
|
||||
|
||||
// console.log("VITE_MODEL_SHARED_URL: ", VITE_MODEL_SHARED_URL);
|
||||
|
||||
return {
|
||||
plugins: [
|
||||
reg(),
|
||||
|
||||
federation({
|
||||
name: env.VITE_SERVER_NAME,
|
||||
remotes: {
|
||||
|
||||
1388
front-end/app-shared/package-lock.json
generated
1388
front-end/app-shared/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -7,24 +7,24 @@
|
||||
"license": "ISC",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dep": "concurrently \"npm run build\" \"npm run preview\"",
|
||||
"dep": "concurrently \"vite build --watch\" \"npm run preview\"",
|
||||
"preview": "vite preview --port 1333 --strictPort",
|
||||
"build": "vite build --watch",
|
||||
"build": "vite build",
|
||||
"type-check": "vue-tsc --build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@originjs/vite-plugin-federation": "1.3.8",
|
||||
"axios": "^1.12.2",
|
||||
"element-plus": "^2.11.3",
|
||||
"element-plus": "^2.11.4",
|
||||
"vite-plugin-nacos": "link:../vite-plugin-nacos",
|
||||
"vue": "^3.5.21"
|
||||
"vue": "^3.5.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vitejs/plugin-vue-jsx": "^5.1.1",
|
||||
"rollup-plugin-visualizer": "^6.0.3",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^7.1.6"
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.1.7",
|
||||
"vite-federation": "^3.4.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { defineConfig, loadEnv, UserConfig } from 'vite'
|
||||
import federation from "@originjs/vite-plugin-federation";
|
||||
import federation from "vite-federation";
|
||||
// @ts-ignore
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
|
||||
@@ -17,6 +17,7 @@ export default defineConfig(async ({ mode }): Promise<UserConfig> => {
|
||||
reg(),
|
||||
federation({
|
||||
name: env.VITE_SERVER_NAME,
|
||||
transformFileTypes: ['.css', '.less'],
|
||||
exposes: {
|
||||
"./config": "./src/config/index.ts",
|
||||
"./infra": "./src/infra/index.ts",
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
# 请求协议 http or https(建议线上配置证书后,使用https)
|
||||
VITE_PREFIX=http://
|
||||
|
||||
# Nacos 配置中心 ip:端口 | 域名
|
||||
VITE_NACOS_ADDRESS=cluster.nacos.com
|
||||
#VITE_NACOS_ADDRESS=192.168.139.84:8848
|
||||
#
|
||||
# Nacos 集群的地址
|
||||
# 注意:
|
||||
# 1: 内网微前端模块,直接填内网Nacos IP:端口 就行
|
||||
# 2: main-app位于公网,填 网关的公网地址
|
||||
#
|
||||
|
||||
# 网关地址
|
||||
VITE_NACOS_ADDRESS=nacos.ddd.com:80
|
||||
# VITE_NACOS_ADDRESS=192.168.139.84:8848
|
||||
|
||||
# traefik 网关的地址
|
||||
VITE_TRAEFIK_ADDRESS=192.168.31.101
|
||||
|
||||
# 注册到 Nacos 的服务名称(微前端模块名称)
|
||||
VITE_SERVER_NAME=main-app
|
||||
|
||||
@@ -13,20 +13,20 @@
|
||||
"dependencies": {
|
||||
"pinia": "^3.0.3",
|
||||
"vite-plugin-nacos": "link:../vite-plugin-nacos",
|
||||
"vue": "^3.5.21",
|
||||
"vue": "^3.5.22",
|
||||
"vue-facing-decorator": "^4.0.1",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@originjs/vite-plugin-federation": "^1.4.1",
|
||||
"@types/node": "^24.5.2",
|
||||
"@types/node": "^24.6.1",
|
||||
"@vue3-oop/plugin-vue-jsx": "^1.5.1",
|
||||
"element-plus": "^2.11.3",
|
||||
"element-plus": "^2.11.4",
|
||||
"rollup-plugin-visualizer": "^6.0.3",
|
||||
"tslib": "^2.8.1",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^7.1.6",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.1.7",
|
||||
"vite-federation": "^3.4.4",
|
||||
"vite-plugin-vue-devtools": "^8.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import path from 'path'
|
||||
|
||||
import { defineConfig, loadEnv, ConfigEnv, mergeConfig } from 'vite'
|
||||
import vueJsx from '@vue3-oop/plugin-vue-jsx'
|
||||
import federation from '@originjs/vite-plugin-federation';
|
||||
import federation from 'vite-federation';
|
||||
import { reg, init } from 'vite-plugin-nacos';
|
||||
import { visualizer } from 'rollup-plugin-visualizer';
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vite-plugin-nacos",
|
||||
"version": "1.1.0",
|
||||
"version": "1.1.3",
|
||||
"description": "Vite 插件,实现Nacos服务注册与发现插件,用于模块联邦",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
@@ -8,17 +8,18 @@
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsc -w",
|
||||
"prepublishOnly": "npm run build"
|
||||
"build": "tsc",
|
||||
"prepublishOnly": "npm run build",
|
||||
"push": "npm run build && npm publish"
|
||||
},
|
||||
"dependencies": {
|
||||
"chalk": "^5.6.2",
|
||||
"nacos": "^2.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.5.2",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^7.1.6"
|
||||
"@types/node": "^24.6.1",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.1.7"
|
||||
},
|
||||
"keywords": [
|
||||
"nacos",
|
||||
@@ -27,4 +28,4 @@
|
||||
],
|
||||
"author": "",
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
@@ -1,56 +1,96 @@
|
||||
// 从插件实现文件导入
|
||||
export * from './vite-plugin-nacos';
|
||||
export * from './utils';
|
||||
import { log } from 'console';
|
||||
import { nacosServiceManage } from './nacosServiceManage';
|
||||
import { mergeConfig } from 'vite';
|
||||
|
||||
export const init = async (env: Record<string, string>) => {
|
||||
const nacos = await nacosServiceManage.create({
|
||||
serverList: env.VITE_NACOS_ADDRESS,
|
||||
serviceName: env.VITE_SERVER_NAME,
|
||||
port: Number(env.VITE_SERVER_PORT)
|
||||
});
|
||||
const serverList = env.VITE_NACOS_ADDRESS;
|
||||
const serviceName = env.VITE_SERVER_NAME;
|
||||
const port = Number(env.VITE_SERVER_PORT);
|
||||
|
||||
if (env.VITE_SERVER_NAME === "main-app") {
|
||||
log("不需要服务发现,进行配置发现...")
|
||||
|
||||
const baseUrl = await nacos.getConfig("baseUrl", "DEFAULT_GROUP")
|
||||
const baseUrlConfig = baseUrl ? JSON.parse(baseUrl) : {};
|
||||
baseUrlConfig.httpTimeOut = await nacos.getConfig("httpTimeOut", "DEFAULT_GROUP")
|
||||
|
||||
// 将新配置处理一下,需要 JSON.stringify
|
||||
const customizeEnv: Record<string, Record<string, string>> = { define: {} };
|
||||
Object.keys(baseUrlConfig).forEach(key => {
|
||||
customizeEnv.define[`import.meta.env.VITE_${key.toUpperCase()}`] = JSON.stringify(baseUrlConfig[key]);
|
||||
});
|
||||
|
||||
// 将老配置处理一下,需要 JSON.stringify
|
||||
const existingDefine: Record<string, Record<string, string>> = { define: {} }
|
||||
Object.keys(env).forEach(key => {
|
||||
existingDefine.define[`import.meta.env.${key}`] = JSON.stringify(env[key])
|
||||
})
|
||||
|
||||
return mergeConfig(existingDefine, customizeEnv)
|
||||
|
||||
} else {
|
||||
log("进行服务发现,获取依赖模块的地址...")
|
||||
let modelName = []
|
||||
for (const key in env) {
|
||||
if (key.includes("VITE_MODEL_")) modelName.push(env[key])
|
||||
}
|
||||
|
||||
const modelUrl: Record<string, string> = {}
|
||||
|
||||
if (modelName.length !== 0) {
|
||||
for (const val of modelName) modelUrl[`VITE_MODEL_${val.replace("app-", "").toUpperCase()}_URL`] = await nacos.find(val)
|
||||
}
|
||||
|
||||
log("modelUrl: ", modelUrl)
|
||||
return modelUrl
|
||||
if (!serverList || !serviceName || Number.isNaN(port)) {
|
||||
throw new Error('[vite-plugin-nacos] 缺少必要环境变量:VITE_NACOS_ADDRESS / VITE_SERVER_NAME / VITE_SERVER_PORT');
|
||||
}
|
||||
|
||||
const nacos = await nacosServiceManage.create({
|
||||
serverList,
|
||||
serviceName,
|
||||
port
|
||||
});
|
||||
|
||||
const isMain = serviceName === 'main-app';
|
||||
|
||||
if (isMain) {
|
||||
console.log('[vite-plugin-nacos] 不需要服务发现,进行配置发现...');
|
||||
|
||||
// 并发获取配置并稳健解析
|
||||
const [baseUrlRaw, httpTimeOut] = await Promise.all([
|
||||
nacos.getConfig('baseUrl', 'DEFAULT_GROUP'),
|
||||
nacos.getConfig('httpTimeOut', 'DEFAULT_GROUP')
|
||||
]);
|
||||
|
||||
let baseUrlConfig: Record<string, any> = {};
|
||||
if (baseUrlRaw) {
|
||||
try {
|
||||
baseUrlConfig = JSON.parse(baseUrlRaw);
|
||||
} catch (e) {
|
||||
console.warn('[vite-plugin-nacos] baseUrl 配置不是有效 JSON,忽略解析,使用空对象');
|
||||
baseUrlConfig = {};
|
||||
}
|
||||
}
|
||||
if (typeof httpTimeOut !== 'undefined' && httpTimeOut !== null) {
|
||||
baseUrlConfig.httpTimeOut = httpTimeOut;
|
||||
}
|
||||
|
||||
// 将新配置处理成 define,需要 JSON.stringify
|
||||
const customizeEnv = Object.keys(baseUrlConfig).reduce<Record<string, string>>((acc, key) => {
|
||||
acc[`import.meta.env.VITE_${key.toUpperCase()}`] = JSON.stringify(baseUrlConfig[key]);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// 将现有 env 处理成 define,需要 JSON.stringify
|
||||
const existingDefine = Object.keys(env).reduce<Record<string, string>>((acc, key) => {
|
||||
acc[`import.meta.env.${key}`] = JSON.stringify(env[key]);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// 使用 mergeConfig 合并 define 字段
|
||||
const merged = mergeConfig({ define: existingDefine }, { define: customizeEnv });
|
||||
|
||||
await closeAllNacos(serviceName);
|
||||
return merged;
|
||||
}
|
||||
|
||||
// 非主模块:进行服务发现
|
||||
console.log('[vite-plugin-nacos] 进行 配置发现,获取依赖模块的地址...');
|
||||
const modelNames: string[] = [];
|
||||
for (const key in env) {
|
||||
if (key.includes('VITE_MODEL_') && env[key]) {
|
||||
modelNames.push(env[key]);
|
||||
}
|
||||
}
|
||||
|
||||
// 去重
|
||||
const uniqueModelNames = Array.from(new Set(modelNames));
|
||||
const modelUrl: Record<string, string> = {};
|
||||
|
||||
|
||||
if (uniqueModelNames.length > 0) {
|
||||
const results = await Promise.all(uniqueModelNames.map(async (val) => {
|
||||
const url = await nacos.getConfig(val, 'DEFAULT_GROUP');
|
||||
const envKey = `VITE_MODEL_${val.replace('app-', '').toUpperCase()}_URL`;
|
||||
return [envKey, url] as const;
|
||||
}));
|
||||
for (const [k, v] of results) modelUrl[k] = v;
|
||||
}
|
||||
|
||||
}
|
||||
console.log('[vite-plugin-nacos] modelUrl: ', modelUrl);
|
||||
await closeAllNacos("other-model");
|
||||
return modelUrl;
|
||||
}
|
||||
|
||||
/** 手动关闭所有 Nacos 客户端(提供给外部在需要时调用) */
|
||||
export async function closeAllNacos(serviceName: string) {
|
||||
await nacosServiceManage.destroyAll();
|
||||
}
|
||||
|
||||
@@ -37,12 +37,12 @@ export class nacosServiceManage {
|
||||
const configKey = this.getConfigKey(option);
|
||||
|
||||
if (this.instanceMap.has(configKey)) {
|
||||
logger.log(`[nacos-federation] 已存在 ${ option.serviceName } 的Nacos实例,直接复用`);
|
||||
logger.log(`[nacos-federation] 已存在 ${option.serviceName} 的Nacos实例,直接复用`);
|
||||
return this.instanceMap.get(configKey)!;
|
||||
}
|
||||
|
||||
const instance = new nacosServiceManage(option);
|
||||
await instance.initClient();
|
||||
// await instance.initClient();
|
||||
await instance.initConfig();
|
||||
|
||||
this.instanceMap.set(configKey, instance);
|
||||
@@ -65,7 +65,7 @@ export class nacosServiceManage {
|
||||
*/
|
||||
private static getConfigKey(option: RegisterOptions): string {
|
||||
const namespace = option.namespace || 'public';
|
||||
return `${ option.serverList }-${ namespace }-${ option.serviceName }`;
|
||||
return `${option.serverList}-${namespace}-${option.serviceName}`;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -90,7 +90,7 @@ export class nacosServiceManage {
|
||||
async getConfig(dataId: string, group: string = "DEFAULT_GROUP") {
|
||||
const res = await this.configClient.getConfig(dataId, group)
|
||||
console.log()
|
||||
console.log(`${ chalk.blue('[nacos-cluster-federation] 配置发现:') }\n ${ chalk.green('➜') } ${ chalk.green(dataId) } 的配置为: ${ chalk.green(res) }`)
|
||||
console.log(`${chalk.blue('[nacos-cluster-federation] 配置发现:')}\n ${chalk.green('➜')} ${chalk.green(dataId)} 的配置为: ${chalk.green(res)}`)
|
||||
return res;
|
||||
}
|
||||
|
||||
@@ -103,7 +103,7 @@ export class nacosServiceManage {
|
||||
const instances = await this.nacosClient.getAllInstances(serviceName);
|
||||
// console.log("instances: ", instances);
|
||||
if (instances.length === 0) {
|
||||
throw new Error(`[nacos-federation] 未发现服务 ${ serviceName } 的实例`);
|
||||
throw new Error(`[nacos-federation] 未发现服务 ${serviceName} 的实例`);
|
||||
}
|
||||
return formatServiceUrl(instances[0].ip, instances[0].port);
|
||||
}
|
||||
@@ -128,7 +128,7 @@ export class nacosServiceManage {
|
||||
await this.nacosClient.registerInstance(serviceName, { port, ip })
|
||||
logger.log()
|
||||
logger.log(chalk.blue("[nacos-cluster-federation] 服务注册:"))
|
||||
logger.log(` ${ chalk.green('➜') } ${ chalk.green(serviceName) } (${ formatServiceUrl(ip, port) }) 已注册到配置中心!`);
|
||||
logger.log(` ${chalk.green('➜')} ${chalk.green(serviceName)} (${formatServiceUrl(ip, port)}) 已注册到配置中心!`);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -136,16 +136,44 @@ export class nacosServiceManage {
|
||||
*/
|
||||
public async destroy() {
|
||||
const configKey = nacosServiceManage.getConfigKey(this.initOptions);
|
||||
// 注销Nacos服务实例
|
||||
const { serviceName, port } = this.initOptions;
|
||||
const ip = getLocalIP();
|
||||
// @ts-ignore
|
||||
await this.nacosClient.deregisterInstance(serviceName, { ip, port });
|
||||
logger.log(`[nacos-federation] 服务 ${ serviceName } 已从Nacos注销`);
|
||||
// 注销 Nacos 命名客户端(如已初始化)
|
||||
try {
|
||||
if (this.nacosClient) {
|
||||
const { serviceName, port } = this.initOptions;
|
||||
const ip = getLocalIP();
|
||||
// @ts-ignore
|
||||
await this.nacosClient.deregisterInstance(serviceName, { ip, port });
|
||||
// @ts-ignore
|
||||
if (typeof this.nacosClient.close === 'function') {
|
||||
// @ts-ignore
|
||||
await this.nacosClient.close();
|
||||
}
|
||||
logger.log(`[nacos-federation] 服务 ${serviceName} 已从Nacos注销`);
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn('[nacos-federation] deregister warn:', e);
|
||||
}
|
||||
|
||||
// 关闭配置客户端(如已初始化)
|
||||
try {
|
||||
if (this.configClient && typeof (this.configClient as any).close === 'function') {
|
||||
await (this.configClient as any).close();
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn('[nacos-federation] configClient close warn:', e);
|
||||
}
|
||||
|
||||
// 从缓存中移除实例
|
||||
nacosServiceManage.instanceMap.delete(configKey);
|
||||
}
|
||||
|
||||
|
||||
/** 销毁所有实例:用于构建结束/进程退出时清理 */
|
||||
public static async destroyAll(): Promise<void> {
|
||||
const tasks: Promise<any>[] = [];
|
||||
for (const [, instance] of nacosServiceManage.instanceMap) {
|
||||
tasks.push(instance.destroy().catch(err => logger.warn('[nacos-federation] destroyAll warn:', err)));
|
||||
}
|
||||
await Promise.allSettled(tasks);
|
||||
nacosServiceManage.instanceMap.clear();
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
import { loadEnv, Plugin, UserConfig } from 'vite';
|
||||
import { NacosConfigClient, NacosNamingClient } from 'nacos';
|
||||
import { getLocalIP, dependModel, formatServiceUrl } from './utils';
|
||||
import { getLocalIP } from './utils';
|
||||
import chalk from 'chalk';
|
||||
|
||||
const logger = console;
|
||||
@@ -39,51 +38,12 @@ export function reg(options?: Partial<RegisterOptions>): Plugin {
|
||||
strictPort: true,
|
||||
cors: true
|
||||
},
|
||||
// TODO dist 上线到服务器后,http://192.168.31.101:1301/ 会出问题
|
||||
// http(https)://前端运行的服务器所在ip/前端模块名
|
||||
base: `${env.VITE_PREFIX}${getLocalIP()}:${env.VITE_SERVER_PORT}/${baseUrl}`
|
||||
// base: `${env.VITE_PREFIX}${getLocalIP()}:${env.VITE_SERVER_PORT}/${baseUrl}`
|
||||
base: `/${baseUrl}`
|
||||
};
|
||||
},
|
||||
async configResolved(config) {
|
||||
const env = config.env;
|
||||
|
||||
// const registerOptions: RegisterOptions = {
|
||||
// serverList: env.VITE_NACOS_ADDRESS || options?.serverList!,
|
||||
// serviceName: env.VITE_SERVER_NAME || options?.serviceName!,
|
||||
// port: Number(env.VITE_SERVER_PORT || options?.port),
|
||||
// namespace: options?.namespace || 'public'
|
||||
// };
|
||||
//
|
||||
// // 验证必要配置
|
||||
// if (!registerOptions.serverList) {
|
||||
// throw new Error('[nacos-cluster-federation] 缺少Nacos服务列表配置,请设置VITE_NACOS_ADDRESS环境变量或插件选项');
|
||||
// }
|
||||
//
|
||||
// if (!registerOptions.serviceName) {
|
||||
// throw new Error('[nacos-cluster-federation] 缺少服务名称配置,请设置VITE_SERVER_NAME环境变量或插件选项');
|
||||
// }
|
||||
// if (!registerOptions.port) {
|
||||
// throw new Error('[nacos-cluster-federation] 缺少服务端口配置,请设置VITE_SERVER_PORT环境变量或插件选项');
|
||||
// }
|
||||
|
||||
// // 初始化Nacos实例
|
||||
// nacosInstance = await nacosServiceManage.create(registerOptions);
|
||||
//
|
||||
// const baseUrl = await nacosInstance.getConfig("baseUrl", "DEFAULT_GROUP")
|
||||
// const baseUrlConfig = baseUrl ? JSON.parse(baseUrl) : {};
|
||||
//
|
||||
// baseUrlConfig.httpTimeOut = await nacosInstance.getConfig("httpTimeOut", "DEFAULT_GROUP")
|
||||
//
|
||||
//
|
||||
// const customizeEnv: Record<string, string> = {};
|
||||
// Object.keys(baseUrlConfig).forEach(key => {
|
||||
// const envKey = `import.meta.env.VITE_${ key.toUpperCase() }`;
|
||||
// customizeEnv[envKey] = JSON.stringify(baseUrlConfig[key]);
|
||||
// });
|
||||
//
|
||||
// // @ts-ignore
|
||||
// Object.assign(config.define, customizeEnv);
|
||||
// Logs(env)
|
||||
},
|
||||
async closeBundle() {
|
||||
// // 服务关闭时注销Nacos实例
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import { nacosServiceManage } from "./src";
|
||||
|
||||
const main = async () => {
|
||||
const nacos = new nacosServiceManage.create({})
|
||||
}
|
||||
Reference in New Issue
Block a user