DEPLOY GUIDE

宝塔面板部署教程(dist 运行目录)

从本地打包到宝塔站点上线:运行目录、伪静态、HTTPS 与安全头配置,一次讲清,照做即可上线。

REQUIREMENTS

环境要求清单

项目要求级别
Web 服务Nginx 1.18+(宝塔面板默认)◈ 必须
运行目录站点运行目录设置为 dist◈ 必须
Node.jsv18+(仅本地或 CI 打包时需要)◈ 构建期
SSL 证书Let’s Encrypt 或商业证书,启用 HTTPS◈ 建议
PHP / MySQL本前端为纯静态产物,无需 PHP;接口端按服务端要求部署◈ 按需
小储云商城系统服务器机房霓虹部署示意图
FIG.01 — SERVER ROOM

STEP 01–02

本地打包与宝塔站点创建

前端项目在本地或 CI 中完成打包,产物 dist 目录即宝塔运行目录 —— 无需在服务器安装 Node 环境。

TERMINAL // BUILD
# 1. 安装依赖(本地电脑或 CI 环境执行)
npm install

# 2. 打包生成 dist 运行目录
npm run build

# 3. 产物结构
# dist/
# ├── index.html               首页
# ├── xiaochuyun-gongneng.html 产品功能
# ├── xiaochuyun-shouquan.html 授权激活
# ├── xiaochuyun-daili.html    代理开通
# ├── xiaochuyun-bushu.html    源码部署
# ├── xiaochuyun-jiaocheng.html 帮助答疑
# ├── xiaochuyun-about.html    关于我们
# ├── assets/                  JS / CSS 产物(带 hash)
# ├── images/                  本地化 WebP 图片
# ├── robots.txt
# └── sitemap.xml
BAOTA PANEL // STEPS
宝塔面板操作步骤:
1. 【网站】→【添加站点】,填写域名,根目录可先任意;
2. 站点设置 →【网站目录】→ 运行目录选择 /dist,保存;
3. 上传 dist 目录内全部文件到该目录;
4. 站点设置 →【伪静态】→ 粘贴下方伪静态规则 → 保存;
5. 站点设置 →【SSL】→ 申请证书并开启【强制 HTTPS】。
小储云商城系统代码终端霓虹示意图
FIG.02 — REWRITE RULES

STEP 03

伪静态规则配置

全部页面均为真实 .html 文件,伪静态仅需一条兜底规则;将以下内容粘贴到宝塔【伪静态】输入框保存即可。

NGINX // REWRITE
# 宝塔伪静态规则:全部页面均为真实 .html 文件
location / {
    try_files $uri $uri/ /index.html;
}

# 可选:把 /index.html 301 到根路径,避免首页重复收录
if ($request_uri = /index.html) {
    return 301 /;
}
小储云商城系统安全控制面板霓虹示意图
FIG.03 — SECURITY HEADERS

STEP 04

HTTPS 与安全头设置

在站点配置中追加安全响应头,防御点击劫持、MIME 嗅探与外域脚本注入,同时开启静态资源缓存提升加载速度。

NGINX // SECURITY HEADERS
# 安全头设置(放在 站点设置 → 配置文件 的 server{} 内)
add_header X-Content-Type-Options nosniff always;
add_header X-Frame-Options SAMEORIGIN always;
add_header Referrer-Policy strict-origin-when-cross-origin always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://doluodalu.com; font-src 'self'; connect-src 'self'; frame-ancestors 'self'; base-uri 'self'" always;
NGINX // CACHE & GZIP
# 静态资源缓存与压缩(放在 server{} 内)
gzip on;
gzip_min_length 1k;
gzip_types text/css application/javascript application/json image/svg+xml;

location ~* \.(webp|png|jpg|ico|svg|woff2)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

location ~* \.(css|js)$ {
    expires 7d;
    add_header Cache-Control "public";
}

TROUBLESHOOTING

部署常见报错处理

READY TO START

部署遇到问题?技术支持在线协助

点击授权联系获取远程指导,或加入企鹅群与其他站长交流部署经验。