将企业官网和微信小程序部署在同一台服务器上是完全可行的,这样做可以节省成本、便于统一管理。以下是详细的实现步骤和技术方案:
🧩 一、前提条件
- 拥有服务器:如阿里云、腾讯云、华为云等云服务器(ECS),或自建服务器。
- 域名备案(国内):如果服务器在我国大陆,需要完成网站域名的ICP备案。
- 微信小程序配置域名白名单:你的服务器域名必须添加到微信小程序后台的请求合法域名列表中。
📦 二、技术架构建议
方案一:使用 Nginx 做反向X_X(推荐)
你可以把官网(例如用 Vue/React 构建的静态页面)和后端 API 部署在同一个服务器上,并通过 Nginx 来区分访问路径或子路径。
示例结构:
| 路径 | 内容 |
|---|---|
https://yourdomain.com/ |
企业官网 |
https://yourdomain.com/api/ |
后端接口(供小程序调用) |
https://yourdomain.com/mp/ |
微信小程序前端资源(可选) |
微信小程序本身是运行在微信客户端内的,其前端代码由微信编译打包上传至微信平台。你只需将小程序使用的后端接口部署在服务器上即可,不需要把小程序前端代码也放在该服务器。
🛠️ 三、具体部署步骤
1. 部署企业官网
- 如果是静态网站(HTML+CSS+JS):
- 放入 Nginx 的
html目录下 - 或者配置虚拟主机指向某个目录
- 放入 Nginx 的
server {
listen 80;
server_name yourdomain.com;
location / {
root /var/www/html; # 企业官网根目录
index index.html;
try_files $uri $uri/ =404;
}
}
2. 部署后端服务(供小程序调用)
- 比如 Node.js、Java、PHP、Python 等服务监听在
localhost:3000 - 使用 Nginx 反向X_X
/api到后端服务
location /api/ {
proxy_pass http://localhost:3000/;
proxy_set_header Host $host;
}
3. 小程序请求配置
在微信开发者工具中配置请求域名:
wx.request({
url: 'https://yourdomain.com/api/login',
success(res) {
console.log(res.data);
}
});
确保 https://yourdomain.com 已添加到微信小程序后台的:
- 请求合法域名(request合法域名)
- WebSocket合法域名(如有使用)
- 下载合法域名(如有图片、文件下载)
- 上传合法域名(如有文件上传)
🔐 四、安全与 HTTPS
- 推荐为域名申请 SSL 证书(可使用 Let’s Encrypt 免费证书)
- 配置 HTTPS 访问,提高安全性
- 微信小程序强制要求使用 HTTPS 请求
示例 HTTPS 配置:
server {
listen 443 ssl;
server_name yourdomain.com;
ssl_certificate /etc/nginx/ssl/yourdomain.crt;
ssl_certificate_key /etc/nginx/ssl/yourdomain.key;
location / {
root /var/www/html;
index index.html;
try_files $uri $uri/ =404;
}
location /api/ {
proxy_pass http://localhost:3000/;
}
}
✅ 五、总结
| 项目 | 是否支持 |
|---|---|
| 官网 + 小程序后端部署在同一服务器 | ✅ 支持 |
| 使用 Nginx 区分访问路径 | ✅ 推荐做法 |
| 微信小程序前端是否要放服务器 | ❌ 不需要,上传到微信平台即可 |
| 必须 HTTPS | ✅ 是 |
| 域名需备案(国内) | ✅ 是 |
🧪 六、扩展建议
- 使用 Docker 部署多个服务隔离环境
- 使用 PM2 管理 Node.js 应用
- 使用 CI/CD 自动化部署流程(如 Jenkins、GitHub Actions)
如果你能提供具体的技术栈(比如官网是 Vue 还是 PHP,后端是 Node.js 还是 Java),我可以给你更具体的配置样例。欢迎继续提问!
秒懂云