Java源码H5+APP+小程序
部署文档一、系统概述本系统是一个完整的短剧APP解决方案，包含后端服务、H5前端、微信小程序和后台管理系统。
技术栈二、环境要求2.1 服务器要求
三、数据库配置3.1 数据库账号# 默认数据库配置database: host: localhost port: 27017 database: drama_app username: admin password: Drama@2026!3.2 数据库初始化# 登录MongoDBmongo# 创建数据库和用户use drama_appdb.createUser({ user: "admin", pwd: "Drama@2026!", roles: [ { role: "readWrite", db: "drama_app" }, { role: "dbAdmin", db: "drama_app" } ]})3.3 数据库连接字符串mongodb://admin:Drama@2026!@localhost:27017/drama_app
四、后端服务部署4.1 目录结构backend/├── config/ # 配置文件├── controllers/ # 控制器├── middleware/ # 中间件├── models/ # 数据模型├── routes/ # 路由├── services/ # 服务层├── app.js # 入口文件├── package.json # 依赖配置└── .env # 环境变量4.2 环境变量配置 (.env)# 服务器配置PORT=3000HOST=0.0.0.0# 数据库配置DB_HOST=localhostDB_PORT=27017DB_NAME=drama_appDB_USER=adminDB_PASSWORD=Drama@2026!# JWT配置JWT_SECRET=DramaAppJWTSecretKey2026!JWT_EXPIRES_IN=7d# 微信配置WECHAT_MINI_APPID=your_mini_appidWECHAT_MINI_SECRET=your_mini_secretWECHAT_MP_APPID=your_mp_appidWECHAT_MP_SECRET=your_mp_secretWECHAT_MCH_ID=your_mch_idWECHAT_PAY_KEY=your_pay_key# 短信配置SMS_PROVIDER=aliyunSMS_API_KEY=your_sms_keySMS_API_SECRET=your_sms_secretSMS_SIGN_NAME=your_sign_name# 支付配置ALIPAY_APPID=your_alipay_appidALIPAY_PRIVATE_KEY=your_alipay_private_keyALIPAY_PUBLIC_KEY=your_alipay_public_key# 其他配置NODE_ENV=productionLOG_LEVEL=info4.3 部署步骤# 1. 进入后端目录cd backend# 2. 安装依赖npm install# 3. 启动服务（开发模式）npm run dev# 4. 生产环境启动（使用PM2）pm2 start app.js --name drama-backend# 5. 查看日志pm2 logs drama-backend4.4 PM2配置文件 (ecosystem.config.js)module.exports = { apps: [{ name: 'drama-backend', script: 'app.js', instances: 1, exec_mode: 'cluster', env: { NODE_ENV: 'production', PORT: 3000 }, log_date_format: 'YYYY-MM-DD HH😊ss', error_file: './logs/error.log', out_file: './logs/output.log', pid_file: './logs/app.pid' }]}
五、H5前端部署5.1 目录结构h5/├── src/│ ├── api/ # API接口│ ├── components/ # 组件│ ├── views/ # 页面│ ├── router/ # 路由│ ├── store/ # 状态管理│ └── App.vue # 根组件├── index.html # HTML入口├── package.json # 依赖配置├── vite.config.js # Vite配置└── .env # 环境变量5.2 环境变量配置VITE_API_BASE_URL=http://your-server-ip:3000/apiVITE_APP_NAME=短剧APP5.3 部署步骤# 1. 进入H5目录cd h5# 2. 安装依赖npm install# 3. 构建生产版本npm run build# 4. 部署到Nginx# 将dist目录内容复制到Nginx静态目录cp -r dist/* /usr/share/nginx/html/
六、微信小程序部署6.1 目录结构miniprogram/├── pages/ # 页面├── components/ # 组件├── utils/ # 工具函数├── app.js # 入口文件├── app.json # 配置文件├── app.wxss # 全局样式└── project.config.json # 项目配置6.2 配置说明app.json 中配置后端接口地址： { "pages": [ "pages/home/index", "pages/category/index", "pages/profile/index" ], "request": { "baseUrl": "https://api.your-domain.com" }}6.3 部署方式
- 使用微信开发者工具打开项目
- 配置小程序AppID
- 点击"上传"按钮上传代码
- 在微信公众平台提交审核
七、后台管理系统部署7.1 目录结构admin/├── src/│ ├── views/ # 页面│ ├── components/ # 组件│ ├── router/ # 路由│ └── App.vue # 根组件├── index.html # HTML入口├── package.json # 依赖配置└── vite.config.js # Vite配置7.2 部署步骤# 1. 进入后台目录cd admin# 2. 安装依赖npm install# 3. 构建生产版本npm run build# 4. 部署到Nginx（建议使用子域名）# 将dist目录内容复制到Nginx admin目录cp -r dist/* /usr/share/nginx/html/admin/
八、Nginx配置8.1 反向代理配置server { listen 80; server_name api.your-domain.com; location /api/ { proxy_pass http://localhost:3000/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }}server { listen 80; server_name https://www.your-domain.com; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; }}server { listen 80; server_name admin.your-domain.com; root /usr/share/nginx/html/admin; index index.html; location / { try_files $uri $uri/ /index.html; }}8.2 HTTPS配置server { listen 443 ssl; server_name api.your-domain.com; ssl_certificate /etc/nginx/cert/fullchain.pem; ssl_certificate_key /etc/nginx/cert/privkey.pem; location /api/ { proxy_pass http://localhost:3000/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }}
九、系统功能清单9.1 后端功能模块
十、管理员账号10.1 默认管理员# 默认管理员账号username: adminpassword: admin123# 登录地址后台地址: http://admin.your-domain.com登录路径: /login10.2 修改密码登录后台后，可在个人设置中修改密码。
十一、安全建议11.1 基本安全
- 修改默认密码
十二、故障排查12.1 常见问题
十三、更新日志
附录：配置项说明A.1 环境变量说明
📎 附件下载
暂无权限下载
