# parserver-web-docker

**Repository Path**: zou-xichen-cc/parserver-web-docker

## Basic Information

- **Project Name**: parserver-web-docker
- **Description**: 这是一个基于 Parse 平台的全栈应用，采用容器化部署方案，包含四个核心服务：MongoDB服务、Parse Server 服务、Parse Dashboard 服务、前端项目(vite+Nginx) 
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-10
- **Last Updated**: 2026-04-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Docker, ParseServer, ParseDashboard, vite, vue3

## README


# 🚀 Parse Server 全栈容器化部署方案

## 一、📖 项目简介

本项目提供了一套**生产级**的 Parse Server 全栈应用容器化部署模板。通过 Docker Compose 编排，将前端 Vue3 应用、Parse Server BaaS 服务、MongoDB 数据库及 Parse Dashboard 管理面板统一封装，实现一键部署。

**🛠️ 技术栈与版本**：
- 🎨 **前端框架**：Vue 3 + TypeScript + Vite
- ⚙️ **BaaS 平台**：Parse Server 8.4.0
- 🗄️ **数据库**：MongoDB 7.x
- 🖥️ **管理面板**：Parse Dashboard 5.3.0
- 🌐 **反向代理**：Nginx (Alpine) with HTTPS

**🎯 适用场景**：
- 快速搭建移动应用、Web 应用的后端服务
- 企业内部管理系统、数据收集平台的 BaaS 层

**✨ 核心特性**：
- 🐳 **全容器化**：所有组件均以 Docker 容器运行，环境一致，开箱即用
- 🔒 **HTTPS 安全访问**：Nginx 反向代理提供 SSL 终结，强制加密通信
- 🔐 **网络隔离**：自定义桥接网络，仅暴露必要端口，保障内部服务安全
- 💾 **数据持久化**：MongoDB 数据卷、Parse Server 日志均映射至宿主机
- ☁️ **云函数支持**：内置 Parse Cloud Code 目录，支持自定义业务逻辑
- 📊 **可视化管理**：Parse Dashboard 可直观查看数据表、用户及文件

---

## 二、🏗️ 系统架构

```text
公网用户 (浏览器/客户端)
│
│ 🔒 HTTPS (443)
▼
┌─────────────────────────┐
│ 🌐 Nginx 反向代理 │ 容器: parse-proxy
│ (SSL 终结 + 路由分发) │
└─────────────────────────┘
│
├─ 📁 / → 🎨 前端 Vue3 应用 (vite-project:80)
├─ ⚙️ /parse → 🚀 Parse Server API (parse-server:1337)
└─ 🖥️ /parse-admin → 📊 Parse Dashboard (parse-dashboard:4040)
│
▼
┌─────────────────────────┐
│ 🚀 Parse Server │ 容器: parseServer
│ ( 执行业务逻辑、云函数、数据操作) │
└─────────────────────────┘
▼
┌─────────────────────────┐
│ 🗄️ MongoDB │ 容器: mongoServer
│ 存储应用数据及上传文件 │
└─────────────────────────┘
```

**🌐 网络规划**：
- 所有容器加入自定义桥接网络 `parse-network`
- 子网固定为 `192.168.64.0/20`（可自行修改），避免 IP 分配漂移
- 仅 Nginx 容器的 `80`、`443` 端口映射至宿主机（可自行修改），其余容器端口不对外暴露

---

## 三、📁 目录结构

```text
项目根目录/
├── 🐳 docker-compose.yml # 服务编排主配置
├── 📊 dashboard-config.json # Parse Dashboard 配置（含登录凭证与白名单）
├── ☁️ cloud/
│ └── 📜 main.js # 云函数入口文件
├── 🌐 nginx-proxy/
│ ├── 📋 conf.d/
│ │ └── ⚙️ parse-proxy.conf # Nginx 反向代理规则
│ ├── 🔒 ssl/
│ │ └── 📁 server/
│ │ ├── 🔑 server.crt # SSL 证书（需用户自行准备）
│ │ └── 🔐 server.key # SSL 私钥（需用户自行准备）
│ └── 📝 logs/ # Nginx 日志输出目录
├── 📝 parse-logs/ # Parse Server 日志目录
├── 🎨 vite-project/ # 前端 Vue3 项目
│ ├── ⚙️ .env # 环境变量（Parse 连接配置）
│ ├── 🐳 Dockerfile # 前端镜像多阶段构建文件
│ ├── 📋 nginx.conf # 前端容器内部 Nginx 配置
│ ├── 📂 src/ # 前端源码
│ └── 📦 package.json # 前端依赖清单
└── (其他辅助文件)
```


## 四、🔧 需修改的关键配置项

### 1. 🐳 `docker-compose.yml`

**Parse Server 命令行参数**：

| 参数 | 需替换为 |
|------|----------|
| `--appId` | 你的 AppId |
| `--masterKey` | 你的 MasterKey |
| `--databaseURI` | `mongodb://mongo:27017/你的数据库名` |
| `--serverURL` | `https://你的域名/parse` |
| `--allowOrigin` | `https://你的域名,https://www.你的域名` |
| `--masterKeyIps` | `当前容器桥接网络网段,你的公网IP,你的办公IP` |

### 2. 🌐 `nginx-proxy/conf.d/parse-proxy.conf`

| 配置项 | 需替换为 |
|--------|----------|
| `server_name` | `你的域名 www.你的域名;` |
| `add_header Access-Control-Allow-Origin` | `"https://你的域名" always;` |

### 3. 📊 `dashboard-config.json`

| 字段 | 需替换为 |
|------|----------|
| `serverURL` | `"https://你的域名/parse"` |
| `appId` | `"你的AppId"` |
| `masterKey` | `"你的MasterKey"` |
| `user` / `pass` | `"你的Dashboard用户名"` / `"你的Dashboard密码"` |
| `remoteParseDashboardAllowedIPs` | `["允许访问Parse Dashboard 的IP"]` |

### 4. 🎨 `vite-project/.env`

| 变量名 | 填写内容 | 说明 |
|--------|----------|------|
| `VITE_PARSE_APP_ID` | `你的AppId` | 与 Parse Server 的 `appId` 保持一致 |
| `VITE_PARSE_SERVER_URL` | `/parse` | 推荐使用相对路径，SDK 会自动拼接当前域名 |

> **💡 提示**  
> 当前端与 API 共用同一域名时（例如都经过 Nginx 代理），使用 `/parse` 即可，无需修改。  
> 若前后端分离部署在不同域名下，则需填写完整的 URL，如 `https://你的域名/parse`。

---

## 五、✅ 前置环境检查

- 🐳 已安装 Docker 20.10+ 和 Docker Compose 2.0+
- 🌐 域名已解析至服务器 IP
- 🔥 服务器防火墙已开放 80 与 443 端口
- 🔒 SSL 证书文件已准备（若无正式证书，可先用自签名证书测试）

---

## 六、🚀 部署步骤

1. **🔐 放置 SSL 证书**  
   将你的 SSL 证书文件（`server.crt`）和私钥文件（`server.key`）放入 `nginx-proxy/ssl/server/` 目录中。

2. **📝 修改配置文件**  
   根据 [🔧 需修改的关键配置项](#四需修改的关键配置项) 中的清单，将所有占位符替换为你的实际信息。

3. **📁 创建日志目录并授权**  
   Parse Server 容器以 `node` 用户（UID 1000）运行，需要提前创建日志目录并赋予写入权限：
   ```bash
   mkdir -p parse-logs nginx-proxy/logs
   chown -R 1000:1000 parse-logs

## 七、✔️验证部署

| 服务 | 验证方法 |
|------|----------|
| 🎨前端页面 | 浏览器访问 `https://你的域名`，应显示云函数返回的测试信息 |
| 📊Parse Dashboard | 访问 `https://你的域名/parse-admin`，用设置的账号密码登录 |
| ⚙️Parse API 健康检查 | 执行 `curl https://你的域名/parse/health`，应返回 `{"status":"ok"}` |

## 八、⚠️安全提醒（重要）

- 🔑 配置文件中使用的示例密码（如 `123456`）**仅用于测试**，生产环境务必更换为强随机密钥（可使用 `openssl rand -hex 16` 生成）。
- 🗄️MongoDB 默认无认证，建议为 root 用户设置密码并更新数据库连接串。
- 💾定期备份 `mongo-data` 卷和 `parse-logs` 目录。

## 九、🆘常见问题速查

| 现象 | 可能原因 | 解决方法 |
|------|----------|----------|
| 🚫Dashboard 页面 403 | 当前 IP 不在 Dashboard 白名单 | 将公网 IP 加入 `dashboard-config.json` 的 `remoteParseDashboardAllowedIPs` |
| 🔒Dashboard 内 `/serverInfo` 403 | 当前 IP 不在 Parse Server 白名单 | 将公网 IP 加入 `docker-compose.yml` 中的 `--masterKeyIps` 并重启 parse-server |
| ❌容器启动后立即退出 | 端口冲突或目录权限不足 | 检查 80/443 端口占用，确保 `parse-logs` 目录属主为 1000 |


## 附：📡 获取容器网段

在配置 `docker-compose.yml` 中的 `--masterKeyIps` 参数时，需要填入正确的容器桥接网络网段。可通过以下方式获取：

### 方法一：查看指定网络网段（推荐）

适用于知道网络名称（如 `parse-network`）的情况。

**🔧 命令**：

````bash
docker network inspect $(docker network ls -q -f name=parse-network) | grep -o '"Subnet": "[^"]*"'
````

📋 输出示例：

````text
"Subnet": "192.168.64.0/20"
````

### 方法二：查看当前所有桥接网络及其网段

**🔧 命令**：

````bash
docker network ls --filter driver=bridge --format "table {{.Name}}\t{{.Driver}}\t{{.Scope}}"
echo ""
for net in $(docker network ls -q --filter driver=bridge); do
  subnet=$(docker network inspect $net | grep -o '"Subnet": "[^"]*"' | head -1 | cut -d'"' -f4)
  name=$(docker network inspect $net --format '{{.Name}}')
  if [ ! -z "$subnet" ]; then
    echo "$name : $subnet"
  fi
done
````

📋 输出示例：

````text
NAME                    DRIVER    SCOPE
bridge                  bridge    local
program_parse-network   bridge    local

bridge : 172.17.0.0/16
program_parse-network : 192.168.64.0/20
````
💡 提示
找到项目所使用的网络（通常包含 parse-network），将对应的子网（如 192.168.64.0/20）填入 --masterKeyIps 参数中即可。

## 📦 新增前端项目操作指南

当需要在现有架构中新增一个前端项目（例如 `new-project`）时，按以下步骤修改配置文件即可。

### 一、📁 目录结构

假设新增项目名为 `new-project`，放置于项目根目录：

````text
项目根目录/
├── new-project/ # 新增的前端项目(package.json配置与原有前端项目一致)
│ ├── .env
│ ├── Dockerfile
│ ├── nginx.conf
│ ├── src/
│ └── package.json
├── vite-project/ # 原有前端项目（保留）
├── docker-compose.yml
├── nginx-proxy/conf.d/parse-proxy.conf
└── ...
````

### 二、🐳 修改 `docker-compose.yml`

````text
在 `services` 节点下新增服务定义：

services:
  # ... 原有服务（mongo, parse-server, parse-dashboard, vite-project, parse-proxy）

  new-project:
    container_name: new-project
    build:
      context: ./new-project
      dockerfile: Dockerfile
    restart: on-failure:3
    depends_on:
      - parse-server       # 若无需 Parse 服务可删除此行
    networks:
      - parse-network

````

### 三、🌐 修改 Nginx 配置 nginx-proxy/conf.d/parse-proxy.conf

#### 同一域名下通过路径区分

在 server 块中新增 location：

````
# 新增前端项目路由
location /new {
    proxy_pass http://new-project:80/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
````
🔗 访问地址：https://你的域名/new


### 四、⚙️ 新前端项目自身配置

1. env（如需连接 Parse Server）：
````
VITE_PARSE_APP_ID=你的AppId
VITE_PARSE_SERVER_URL=/parse
````
2. Dockerfile 与 nginx.conf 可直接复制原有前端项目中的同名文件。

### 五、⚙️ Vite 构建配置

```` 
在 vite.config.ts 中设置 路径
 base:'/new/',
````

### 六、🚀 部署生效

````
# 重新构建并启动所有服务（新增服务会自动构建）
docker-compose up -d --build

# 若仅更新新项目
docker-compose up -d --build new-project
````

### 七、✔️ 验证

- 访问 https://你的域名/new