88 lines
3.0 KiB
Markdown
88 lines
3.0 KiB
Markdown
# 前端打包与自动部署发布
|
||
|
||
本文档说明 **admin 后台前端** 的打包、以及如何自动部署发布到远程服务器（含与后端一起一键发布）。
|
||
|
||
---
|
||
|
||
## 一、环境要求
|
||
|
||
- **Node.js**、**npm** 已安装。
|
||
- **Node 17+** 需设置 OpenSSL 兼容（见下方打包命令）。
|
||
- 部署到远程前需完成 **SSH 免密**（见 [backend/DEPLOY.md](../backend/DEPLOY.md)）。
|
||
|
||
---
|
||
|
||
## 二、前端打包
|
||
|
||
**打包前请确认**：`frontend/.env.production` 中 **`VUE_APP_BASE_API`** 为本项目接口地址（例如本项目为 `http://jfadmin.xiashengjun.com`）。使用 backend 的部署脚本（`deploy-admin-miao33.sh` / `deploy-admin-by80.sh`）时，会在打包前自动检查该值与 `deploy.conf` 中当前环境的 `VUE_APP_BASE_API_EXPECTED` 是否一致，不一致将拒绝打包并提示修改。
|
||
|
||
在 **frontend 目录** 下执行：
|
||
|
||
```bash
|
||
cd frontend
|
||
|
||
# Node 17+ 如遇 digital envelope 报错，先执行：
|
||
export NODE_OPTIONS="${NODE_OPTIONS:-} --openssl-legacy-provider"
|
||
|
||
npm run build:prod
|
||
```
|
||
|
||
- **产出目录**：`frontend/dist`
|
||
- **用途**：admin 后台静态资源，将 `dist` 内容部署到站点根目录（如 Nginx 或 CDN）。
|
||
|
||
---
|
||
|
||
## 三、自动部署发布（推荐）
|
||
|
||
前端与后端一起发布时，使用 **backend 的一键部署脚本**，会自动完成：前端打包 → 后端打包 → 远程备份 → 上传 jar 与 `dist` → 重启服务。
|
||
|
||
在项目 **backend 目录** 下执行（按环境二选一）：
|
||
|
||
```bash
|
||
cd backend
|
||
|
||
# miao33 环境（profile=miao33，默认 8.152.170.46 / jfadmin.xiashengjun.com）
|
||
./shell/deploy-admin-miao33.sh
|
||
|
||
# by80 环境（profile=miao80，默认 123.56.214.80 / jfadmin.bosenyuan.com）
|
||
./shell/deploy-admin-by80.sh
|
||
```
|
||
|
||
脚本会：
|
||
|
||
1. 编译后端，生成 `miao-admin-2.2.jar`
|
||
2. **在 frontend 目录执行 `npm run build:prod`**，生成 `dist`
|
||
3. 远程备份原有 jar 与后台静态
|
||
4. 上传 jar 到 `REMOTE_DIR_JAR`，上传 **dist 到 REMOTE_DIR_ADMIN**
|
||
5. 远程重启 admin 服务（对应 Spring Profile）
|
||
|
||
即：**前端无需单独操作，一次执行即可完成前端打包 + 自动部署发布**。
|
||
SSH 配置、deploy.conf、故障排查见：**[backend/DEPLOY.md](../backend/DEPLOY.md)**。
|
||
|
||
---
|
||
|
||
## 四、部署配置（前端相关）
|
||
|
||
配置在 **backend/deploy.conf**，按环境分段（miao33、by80、miao50）：
|
||
|
||
| 配置项 | 说明 | miao33 示例 | by80 示例 |
|
||
|--------|------|-------------|-----------|
|
||
| **REMOTE_DIR_ADMIN** | 前端 dist 发布目录（admin 后台站点根目录） | `/www/wwwroot/jfadmin.xiashengjun.com` | `/www/wwwroot/jfadmin.bosenyuan.com` |
|
||
|
||
脚本通过 **tar 管道** 将 `frontend/dist` 内容上传到该目录，不依赖远程安装 rsync。
|
||
|
||
---
|
||
|
||
## 五、仅打包不发布
|
||
|
||
若只需在本地生成 `dist`、不执行上传与重启：
|
||
|
||
```bash
|
||
cd frontend
|
||
export NODE_OPTIONS="${NODE_OPTIONS:-} --openssl-legacy-provider"
|
||
npm run build:prod
|
||
# 产出：frontend/dist
|
||
```
|
||
|
||
完整自动部署步骤、备份与重启说明见 **[backend/DEPLOY.md](../backend/DEPLOY.md)**。
|