一个将HTML5网页一键打包为Android APK和iOS IPA应用的在线平台

环境要求

组件	版本要求
操作系统	CentOS 7+ / Ubuntu 18+
Node.js	16.x
Nginx	宝塔自带即可
Java	JDK 8（用于 apktool）
内存	1GB+

一、安装基础环境

1.1 安装 Node.js

宝塔面板 → 软件商店 → 搜索 Node.js → 安装 16.20.2

1.2 安装 Java 8

# CentOS
yum install -y java-1.8.0-openjdk

# Ubuntu
apt install -y openjdk-8-jdk

# 验证
java -version

1.3 安装 PM2

npm install -g pm2

二、上传项目文件

2.1 创建目录

mkdir -p /www/wwwroot/h5-to-app

2.2 上传并解压

将 h5-to-app-v1.0.zip 上传到 /www/wwwroot/h5-to-app/，然后解压：

cd /www/wwwroot/h5-to-app
unzip h5-to-app-v1.0.zip

解压后的目录结构：

/www/wwwroot/h5-to-app/
├── server/                 # 后端代码
│   ├── src/
│   │   ├── app.js         # 入口文件
│   │   ├── db/            # 数据库
│   │   ├── middleware/     # 中间件
│   │   ├── routes/        # API 路由
│   │   └── services/      # 核心服务
│   ├── tools/
│   │   └── apktool.jar    # APK 反编译工具
│   ├── package.json
│   └── ecosystem.config.js
├── web/
│   └── dist/              # 前端构建产物
└── package.json

三、安装后端依赖

cd /www/wwwroot/h5-to-app/server
npm install

注意：如果 sharp 安装失败（Node 16 兼容问题），执行：
npm install sharp@0.32.6 --registry https://registry.npmmirror.com/ --unsafe-perm

四、配置环境变量

cd /www/wwwroot/h5-to-app/server
cp .env.example .env

编辑 .env 文件：

vi .env

修改以下内容：

PORT=3000
JWT_SECRET=替换为一个随机字符串（越长越好）
UPLOAD_DIR=./uploads
BUILD_DIR=./builds
DB_PATH=./data/app.json
MAX_FILE_SIZE=10485760

五、创建必要目录

mkdir -p /www/wwwroot/h5-to-app/server/uploads/general
mkdir -p /www/wwwroot/h5-to-app/server/uploads/ssl
mkdir -p /www/wwwroot/h5-to-app/server/builds/android
mkdir -p /www/wwwroot/h5-to-app/server/builds/ios
mkdir -p /www/wwwroot/h5-to-app/server/data
mkdir -p /www/wwwroot/h5-to-app/server/ssl
mkdir -p /www/wwwroot/h5-to-app/server/logs

六、生成签名证书

APK 打包需要签名证书：

cd /www/wwwroot/h5-to-app/server

keytool -genkey -v -keystore nitron-release.keystore \
  -alias nitron \
  -keyalg RSA \
  -keysize 2048 \
  -validity 10000 \
  -storepass 123456 \
  -keypass 123456 \
  -dname "CN=App, OU=Dev, O=Company, L=City, S=State, C=CN"

请将 123456 替换为你自己的密码，并妥善保管。

七、配置 PM2 启动

cd /www/wwwroot/h5-to-app/server
pm2 start ecosystem.config.js
pm2 save
pm2 startup

验证是否启动成功：

pm2 status
curl http://127.0.0.1:3000/api/projects

如果返回 JSON 数据（可能包含错误信息），说明服务已正常运行。

八、配置 Nginx

宝塔面板 → 网站 → 添加站点

域名：填写你的域名（如 h5.example.com）
根目录：/www/wwwroot/h5-to-app/web/dist
PHP版本：选纯静态

添加站点后，点击设置 → 配置文件，替换为以下内容：

server {
    listen 80;
    listen 443 ssl;
    server_name h5.example.com;  # 替换为你的域名

    ssl_certificate    /www/server/panel/vhost/cert/h5.example.com/fullchain.pem;
    ssl_certificate_key /www/server/panel/vhost/cert/h5.example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    if ($scheme = http) {
        return 301 https://$host$request_uri;
    }

    root /www/wwwroot/h5-to-app/web/dist;
    index index.html;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
    gzip_min_length 1000;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 300s;
    }

    location ^~ /uploads/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
    }

    location ^~ /builds/ {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
    }

    location ~* \.(js|css|ico|svg|woff|woff2|ttf|eot)$ {
        expires 7d;
        add_header Cache-Control "public, immutable";
    }

    client_max_body_size 100M;
}

重要：/uploads/ 和 /builds/ 必须用 ^~ 前缀，否则会被静态文件规则拦截。

保存后重启 Nginx：

nginx -s reload

或在宝塔面板 → 软件商店 → Nginx → 重启。

九、配置 SSL 证书（可选）

宝塔面板 → 网站 → 对应站点 → 设置 → SSL

选择 Let's Encrypt 免费申请，或上传你自己的证书。

十、访问后台

浏览器打开 https://h5.example.com
点击登录按钮
首次使用需要注册账号

默认第一个注册的用户为管理员。

十一、系统配置

登录后进入系统信息页面，可以配置：

配置项	说明
网站域名	填写你的域名（如 `h5.example.com`），用于生成下载链接
支付配置	配置支付接口（可选）
SSL证书	上传 iOS 描述文件签名证书（可选）

常见问题

Q: 打包后 APK 图标不显示？

确保 sharp 正确安装：

cd /www/wwwroot/h5-to-app/server
node -e "const sharp = require('sharp'); console.log('sharp OK')"

Q: iOS 描述文件显示未签名？

需要在系统设置中上传 SSL 证书（.pem + .key 文件）。

Q: 上传文件后图片不显示？

检查 Nginx 配置中 /uploads/ 是否使用了 ^~ 前缀：

nginx -T | grep "uploads"

Q: 构建失败，日志显示 apktool 错误？

确保 Java 已安装：

java -version
# 应显示 1.8.x

java -jar /www/wwwroot/h5-to-app/server/tools/apktool.jar --version
# 应显示 2.9.3

Q: 支付回调地址是内网 IP？

在系统设置中配置正确的域名，支付回调会自动使用该域名。

目录结构说明

/www/wwwroot/h5-to-app/
├── server/
│   ├── src/
│   │   ├── app.js              # Express 入口
│   │   ├── db/store.js         # JSON 文件数据库
│   │   ├── middleware/auth.js  # JWT 认证中间件
│   │   ├── routes/
│   │   │   ├── auth.js         # 登录注册
│   │   │   ├── projects.js     # 项目管理
│   │   │   ├── builds.js       # 构建触发
│   │   │   ├── payments.js     # 支付处理
│   │   │   ├── uploads.js      # 文件上传
│   │   │   └── settings.js     # 系统设置
│   │   └── services/
│   │       ├── android-builder.js   # Android 打包
│   │       ├── ios-builder.js       # iOS 打包
│   │       ├── icon-injector.js     # 图标注入
│   │       └── mobileconfig-signer.js # iOS 描述文件签名
│   ├── tools/apktool.jar       # APK 反编译工具
│   ├── uploads/                # 用户上传文件
│   ├── builds/                 # 构建产物
│   ├── data/                   # 数据库文件
│   └── ssl/                    # SSL 证书
├── web/
│   └── dist/                   # 前端静态文件
└── .env                        # 环境变量

技术栈

前端：Vue 3 + Element Plus + Vite
后端：Node.js + Express
数据库：JSON 文件存储（无需额外安装数据库）
打包工具：apktool（Android）、自研打包脚本（iOS）
进程管理：PM2
反向代理：Nginx

许可证

MIT License

项目源码

QQ 3063474472