64 lines
2.3 KiB
Markdown
64 lines
2.3 KiB
Markdown
# 前端 Docker 部署
|
||
|
||
## 前置条件
|
||
|
||
- 服务器需安装 **Node.js 18+** 和 **pnpm**（macOS 执行 `npm install -g pnpm`）
|
||
- 后端已部署在同一台服务器上
|
||
|
||
## 首次部署
|
||
|
||
```bash
|
||
cd deploy
|
||
cp .env.example .env
|
||
vim .env # 改端口（默认 80 常被占用，建议 3100）
|
||
bash deploy.sh rebuild
|
||
```
|
||
|
||
## 日常操作
|
||
|
||
| 命令 | 作用 | 场景 |
|
||
| ------------------------------- | -------------------------- | ------------------ |
|
||
| `bash deploy.sh start` | 停旧容器 → 启动（不编译） | 改了 nginx 配置 |
|
||
| `bash deploy.sh build [分支]` | 宿主机构建 dist → 编译镜像 | 代码变了，先编译 |
|
||
| `bash deploy.sh rebuild [分支]` | 拉取分支代码 + 编译 + 启动 | 代码变了，一步到位 |
|
||
| `bash deploy.sh stop` | 停止 | - |
|
||
| `bash deploy.sh logs` | 查看日志 | 排查问题 |
|
||
| `bash deploy.sh status` | 容器状态 | - |
|
||
|
||
> 分支参数默认 `master`，指定其他分支：`bash deploy.sh rebuild test`
|
||
|
||
## 构建原理
|
||
|
||
宿主机构建 dist + Docker 打包 Nginx（因 Mac Docker Desktop 内存限制，Docker 内编译会 OOM）：
|
||
|
||
```
|
||
宿主 pnpm build → dist/
|
||
↓
|
||
Docker (nginx:alpine)
|
||
├─ nginx 配置 → /etc/nginx/conf.d/
|
||
└─ dist/ → /usr/share/nginx/html/
|
||
```
|
||
|
||
## Nginx 代理规则
|
||
|
||
| 路径 | 转发目标 | 说明 |
|
||
| ------------- | ------------------------------- | ------------------------- |
|
||
| `/ghb-boot/*` | `http://ghb-backend:8081/ghb/*` | API 代理到后端容器 |
|
||
| `/*` | 本地静态文件 | 前端路由回退到 index.html |
|
||
|
||
前后端通过 `public-services_default` 外部网络互通，无需额外配置。
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
deploy/
|
||
├── deploy.sh # 部署脚本（与后端命令一致）
|
||
├── .env.example # 配置模板
|
||
├── .env # 实际配置（不入 git）
|
||
├── Dockerfile # 精简镜像（nginx + dist）
|
||
├── docker-compose.yml # Docker 编排
|
||
├── nginx/
|
||
│ └── default.conf # Nginx 配置（含 API 代理）
|
||
└── README.md
|
||
```
|