提交代码
This commit is contained in:
zlwu committed
1 parent
30042caabb
commit
600f0c621c
108 files changed
+20109
-1605
No files matched your search
@@ -0,0 +1,236 @@
|
||||
# 移动端打包部署指导文档
|
||||
|
||||
## 📋 项目概述
|
||||
|
||||
**项目**: 校园管理系统移动端 (mobile/)
|
||||
**技术栈**: Vue 2.6.14 + uni-app 2.x + uview-ui 2.0.38
|
||||
**打包方式**: Vue CLI 命令行打包（无需HBuilderX）
|
||||
|
||||
---
|
||||
|
||||
## 🚀 打包命令详解
|
||||
|
||||
### 1. H5网页版打包
|
||||
```bash
|
||||
cd mobile/
|
||||
npm run build:h5
|
||||
```
|
||||
**输出目录**: `mobile/dist/build/h5/`
|
||||
**部署方式**: 直接部署到Web服务器（如Nginx）
|
||||
|
||||
### 2. 微信小程序打包
|
||||
```bash
|
||||
cd mobile/
|
||||
npm run build:mp-weixin
|
||||
```
|
||||
**输出目录**: `mobile/dist/build/mp-weixin/`
|
||||
**后续操作**: 用微信开发者工具导入该目录
|
||||
|
||||
### 3. App打包
|
||||
```bash
|
||||
cd mobile/
|
||||
npm run build:app-plus
|
||||
```
|
||||
**输出目录**: `mobile/dist/build/app-plus/`
|
||||
**后续操作**:
|
||||
- 使用HBuilderX云打包服务
|
||||
- 或配置本地Android/iOS打包环境
|
||||
|
||||
### 4. 其他小程序平台
|
||||
```bash
|
||||
# 支付宝小程序
|
||||
npm run build:mp-alipay
|
||||
|
||||
# 百度小程序
|
||||
npm run build:mp-baidu
|
||||
|
||||
# 字节跳动小程序
|
||||
npm run build:mp-toutiao
|
||||
|
||||
# QQ小程序
|
||||
npm run build:mp-qq
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 生产环境配置调整
|
||||
|
||||
### ⚠️ 必须修改的配置项
|
||||
|
||||
**文件**: `mobile/src/common/config.js`
|
||||
|
||||
#### 1. 服务器地址配置
|
||||
```javascript
|
||||
// 后端API服务器地址
|
||||
serverUrl: 'https://hzdyjsapi.camasort.com'
|
||||
|
||||
// API基础路径
|
||||
baseURL: 'https://hzdyjsapi.camasort.com'
|
||||
|
||||
// 前端域名（用于referer）
|
||||
referer: 'https://hzdyjs.camasort.com/login?redirect=/index'
|
||||
```
|
||||
|
||||
#### 2. 环境判断逻辑
|
||||
- **开发环境**: 使用`/api`代理转发到`http://localhost:8080`
|
||||
- **生产环境**: 直接访问`https://hzdyjsapi.camasort.com`
|
||||
|
||||
### 🔐 加密配置
|
||||
- RSA密钥对已配置，与后端保持一致
|
||||
- 客户端ID: `e5cd7e4891bf95d1d19206ce24a7b32e`
|
||||
- 租户ID: `000000`
|
||||
|
||||
---
|
||||
|
||||
## 📦 不同平台部署方案
|
||||
|
||||
### 1. H5网页版部署
|
||||
```bash
|
||||
# 1. 打包
|
||||
npm run build:h5
|
||||
|
||||
# 2. 部署到服务器
|
||||
scp -r dist/build/h5/* user@server:/var/www/mobile/
|
||||
|
||||
# 3. Nginx配置示例
|
||||
location /mobile {
|
||||
alias /var/www/mobile;
|
||||
index index.html;
|
||||
try_files $uri $uri/ /mobile/index.html;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 微信小程序发布
|
||||
```bash
|
||||
# 1. 打包
|
||||
npm run build:mp-weixin
|
||||
|
||||
# 2. 用微信开发者工具打开
|
||||
# 目录: mobile/dist/build/mp-weixin/
|
||||
|
||||
# 3. 在微信开发者工具中：
|
||||
# - 预览测试
|
||||
# - 上传代码
|
||||
# - 提交审核
|
||||
# - 发布上线
|
||||
```
|
||||
|
||||
### 3. App发布流程
|
||||
```bash
|
||||
# 1. 打包
|
||||
npm run build:app-plus
|
||||
|
||||
# 2. 使用HBuilderX云打包：
|
||||
# - 打开HBuilderX
|
||||
# - 导入项目: mobile/dist/build/app-plus/
|
||||
# - 选择发行 -> 原生App-云打包
|
||||
# - 配置证书和签名
|
||||
# - 提交打包
|
||||
|
||||
# 3. 发布到应用商店：
|
||||
# - Android: 上传到各大应用市场
|
||||
# - iOS: 上传到App Store Connect
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 CI/CD自动化部署
|
||||
|
||||
### GitHub Actions示例
|
||||
```yaml
|
||||
name: Mobile Deploy
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
paths: ['mobile/**']
|
||||
|
||||
jobs:
|
||||
build-h5:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '18'
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
cd mobile
|
||||
npm ci
|
||||
|
||||
- name: Build H5
|
||||
run: |
|
||||
cd mobile
|
||||
npm run build:h5
|
||||
|
||||
- name: Deploy to server
|
||||
run: |
|
||||
# 部署到服务器的脚本
|
||||
scp -r mobile/dist/build/h5/* ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }}:/var/www/mobile/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 多端测试验证
|
||||
|
||||
### 开发环境测试
|
||||
```bash
|
||||
# H5开发服务器
|
||||
npm run dev:h5
|
||||
# 访问: http://localhost:8081
|
||||
|
||||
# 微信小程序开发
|
||||
npm run dev:mp-weixin
|
||||
# 用微信开发者工具打开: mobile/dist/dev/mp-weixin/
|
||||
```
|
||||
|
||||
### 生产环境验证
|
||||
- **H5版本**: 在浏览器中访问部署地址
|
||||
- **小程序**: 通过微信扫码体验版二维码
|
||||
- **App**: 通过TestFlight(iOS)或内测分发(Android)
|
||||
|
||||
---
|
||||
|
||||
## 🚨 注意事项
|
||||
|
||||
### 1. 域名配置
|
||||
- **后端API**: `https://hzdyjsapi.camasort.com`
|
||||
- **前端域名**: `https://hzdyjs.camasort.com`
|
||||
- **确保HTTPS证书有效**
|
||||
|
||||
### 2. 跨域处理
|
||||
- 生产环境后端需要配置CORS允许前端域名
|
||||
- 或者使用Nginx反向代理统一域名
|
||||
|
||||
### 3. 小程序特殊要求
|
||||
- 微信小程序需要在管理后台配置服务器域名
|
||||
- 确保API域名在小程序的request合法域名中
|
||||
|
||||
### 4. App打包要求
|
||||
- Android需要签名证书
|
||||
- iOS需要开发者证书和Provisioning Profile
|
||||
- 确保manifest.json中的appid已配置
|
||||
|
||||
---
|
||||
|
||||
## 📞 问题排查
|
||||
|
||||
### 常见问题
|
||||
1. **API请求失败**: 检查生产环境域名配置
|
||||
2. **加密登录失败**: 验证RSA密钥对是否正确
|
||||
3. **小程序白屏**: 检查域名是否已添加到合法域名列表
|
||||
4. **App打包失败**: 检查证书配置和权限设置
|
||||
|
||||
### 调试方法
|
||||
```javascript
|
||||
// 在config.js中添加调试日志
|
||||
console.log('当前环境:', process.env.NODE_ENV);
|
||||
console.log('API地址:', REQUEST_CONFIG.baseURL);
|
||||
console.log('服务器地址:', REQUEST_CONFIG.serverUrl);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**📝 文档维护**: 2025-01-03 创建
|
||||
**🔄 更新周期**: 每次部署流程变更时更新
|
||||
**👥 适用人员**: 开发人员、运维人员
|
||||
@@ -0,0 +1,115 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name hzdyjsweb.camasort.com;
|
||||
|
||||
# 网站根目录
|
||||
root /root/hzdyjsweb9091/dist;
|
||||
index index.html index.htm;
|
||||
|
||||
# 访问日志和错误日志
|
||||
access_log /var/log/nginx/hzdyjsweb.camasort.com.access.log;
|
||||
error_log /var/log/nginx/hzdyjsweb.camasort.com.error.log;
|
||||
|
||||
# 客户端最大上传文件大小
|
||||
client_max_body_size 50M;
|
||||
|
||||
# Vue Router History模式支持 - 所有路由都指向index.html
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
|
||||
# 添加安全头
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
}
|
||||
|
||||
# 静态资源缓存配置
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
add_header Vary "Accept-Encoding";
|
||||
|
||||
# 如果文件不存在，返回404而不是跳转到index.html
|
||||
try_files $uri =404;
|
||||
}
|
||||
|
||||
# HTML文件缓存配置
|
||||
location ~* \.(html|htm)$ {
|
||||
expires 0;
|
||||
add_header Cache-Control "no-cache, no-store, must-revalidate";
|
||||
add_header Pragma "no-cache";
|
||||
}
|
||||
|
||||
# API代理配置（如果需要避免CORS问题）
|
||||
# location /api/ {
|
||||
# proxy_pass http://47.121.125.41:8080/;
|
||||
# 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_connect_timeout 60s;
|
||||
# proxy_send_timeout 60s;
|
||||
# proxy_read_timeout 60s;
|
||||
# }
|
||||
|
||||
# Gzip压缩配置
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_min_length 1024;
|
||||
gzip_comp_level 6;
|
||||
gzip_types
|
||||
text/plain
|
||||
text/css
|
||||
text/xml
|
||||
text/javascript
|
||||
application/json
|
||||
application/javascript
|
||||
application/xml+rss
|
||||
application/atom+xml
|
||||
image/svg+xml;
|
||||
|
||||
# 禁止访问敏感文件
|
||||
location ~ /\. {
|
||||
deny all;
|
||||
access_log off;
|
||||
log_not_found off;
|
||||
}
|
||||
|
||||
# 禁止访问备份文件
|
||||
location ~ ~$ {
|
||||
deny all;
|
||||
access_log off;
|
||||
log_not_found off;
|
||||
}
|
||||
}
|
||||
|
||||
# HTTPS配置（可选，推荐生产环境使用）
|
||||
# server {
|
||||
# listen 443 ssl http2;
|
||||
# server_name hzdyjsweb.camasort.com;
|
||||
#
|
||||
# # SSL证书配置
|
||||
# ssl_certificate /path/to/your/certificate.crt;
|
||||
# ssl_certificate_key /path/to/your/private.key;
|
||||
#
|
||||
# # SSL配置
|
||||
# ssl_protocols TLSv1.2 TLSv1.3;
|
||||
# ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA384;
|
||||
# ssl_prefer_server_ciphers off;
|
||||
# ssl_session_cache shared:SSL:10m;
|
||||
# ssl_session_timeout 10m;
|
||||
#
|
||||
# # 其他配置与HTTP相同
|
||||
# root /root/hzdyjsweb9091/dist;
|
||||
# index index.html index.htm;
|
||||
#
|
||||
# # ... 复制上面的location配置 ...
|
||||
# }
|
||||
#
|
||||
# # HTTP重定向到HTTPS（如果启用HTTPS）
|
||||
# server {
|
||||
# listen 80;
|
||||
# server_name hzdyjsweb.camasort.com;
|
||||
# return 301 https://$server_name$request_uri;
|
||||
# }
|
||||
Executable
+340
@@ -0,0 +1,340 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Nginx配置自动安装脚本
|
||||
# 支持自动检测系统类型并选择合适的配置方法
|
||||
|
||||
CONFIG_FILE="hzdyjsweb.camasort.com.conf"
|
||||
SITE_NAME="hzdyjsweb.camasort.com"
|
||||
|
||||
# 颜色定义
|
||||
RED='\033[0;31m'
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
BLUE='\033[0;34m'
|
||||
NC='\033[0m' # No Color
|
||||
|
||||
# 日志函数
|
||||
log_info() {
|
||||
echo -e "${BLUE}[INFO]${NC} $1"
|
||||
}
|
||||
|
||||
log_success() {
|
||||
echo -e "${GREEN}[SUCCESS]${NC} $1"
|
||||
}
|
||||
|
||||
log_warning() {
|
||||
echo -e "${YELLOW}[WARNING]${NC} $1"
|
||||
}
|
||||
|
||||
log_error() {
|
||||
echo -e "${RED}[ERROR]${NC} $1"
|
||||
}
|
||||
|
||||
# 检查是否为root用户
|
||||
check_root() {
|
||||
if [[ $EUID -eq 0 ]]; then
|
||||
log_warning "检测到root用户，直接执行操作"
|
||||
SUDO=""
|
||||
else
|
||||
log_info "检测到普通用户，将使用sudo执行操作"
|
||||
SUDO="sudo"
|
||||
fi
|
||||
}
|
||||
|
||||
# 检查nginx是否已安装
|
||||
check_nginx() {
|
||||
if ! command -v nginx &> /dev/null; then
|
||||
log_error "nginx未安装，请先安装nginx"
|
||||
echo "Ubuntu/Debian: sudo apt update && sudo apt install nginx"
|
||||
echo "CentOS/RHEL: sudo yum install nginx 或 sudo dnf install nginx"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
log_success "nginx已安装"
|
||||
nginx -v
|
||||
}
|
||||
|
||||
# 检查配置文件是否存在
|
||||
check_config_file() {
|
||||
if [ ! -f "$CONFIG_FILE" ]; then
|
||||
log_error "配置文件 $CONFIG_FILE 不存在"
|
||||
log_info "请确保配置文件在当前目录中"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
log_success "找到配置文件: $CONFIG_FILE"
|
||||
}
|
||||
|
||||
# 检测nginx配置目录结构
|
||||
detect_nginx_structure() {
|
||||
log_info "检测nginx配置目录结构..."
|
||||
|
||||
# 获取nginx配置目录
|
||||
NGINX_CONF_DIR=$(nginx -t 2>&1 | grep "nginx.conf" | head -1 | sed 's/.*test is successful//' | sed 's/nginx: configuration file //' | sed 's/ test is successful//' | xargs dirname)
|
||||
|
||||
if [ -z "$NGINX_CONF_DIR" ]; then
|
||||
NGINX_CONF_DIR="/etc/nginx"
|
||||
fi
|
||||
|
||||
log_info "nginx配置目录: $NGINX_CONF_DIR"
|
||||
|
||||
# 检查目录结构
|
||||
if [ -d "$NGINX_CONF_DIR/sites-available" ] && [ -d "$NGINX_CONF_DIR/sites-enabled" ]; then
|
||||
CONFIG_METHOD="sites"
|
||||
log_info "检测到 sites-available/sites-enabled 结构（Ubuntu/Debian风格）"
|
||||
elif [ -d "$NGINX_CONF_DIR/conf.d" ]; then
|
||||
CONFIG_METHOD="conf.d"
|
||||
log_info "检测到 conf.d 结构（CentOS/RHEL风格）"
|
||||
else
|
||||
CONFIG_METHOD="vhosts"
|
||||
log_warning "未检测到标准目录结构，将创建vhosts目录"
|
||||
fi
|
||||
}
|
||||
|
||||
# 备份现有配置
|
||||
backup_existing_config() {
|
||||
local target_file=""
|
||||
|
||||
case $CONFIG_METHOD in
|
||||
"sites")
|
||||
target_file="$NGINX_CONF_DIR/sites-available/$CONFIG_FILE"
|
||||
;;
|
||||
"conf.d")
|
||||
target_file="$NGINX_CONF_DIR/conf.d/$CONFIG_FILE"
|
||||
;;
|
||||
"vhosts")
|
||||
target_file="$NGINX_CONF_DIR/vhosts/$CONFIG_FILE"
|
||||
;;
|
||||
esac
|
||||
|
||||
if [ -f "$target_file" ]; then
|
||||
log_warning "发现现有配置文件，创建备份"
|
||||
$SUDO cp "$target_file" "$target_file.backup.$(date +%Y%m%d_%H%M%S)"
|
||||
log_success "备份完成: $target_file.backup.$(date +%Y%m%d_%H%M%S)"
|
||||
fi
|
||||
}
|
||||
|
||||
# 安装配置文件
|
||||
install_config() {
|
||||
log_info "开始安装nginx配置..."
|
||||
|
||||
case $CONFIG_METHOD in
|
||||
"sites")
|
||||
install_sites_method
|
||||
;;
|
||||
"conf.d")
|
||||
install_conf_d_method
|
||||
;;
|
||||
"vhosts")
|
||||
install_vhosts_method
|
||||
;;
|
||||
esac
|
||||
}
|
||||
|
||||
# sites-available/sites-enabled 方法
|
||||
install_sites_method() {
|
||||
log_info "使用 sites-available/sites-enabled 方法安装配置"
|
||||
|
||||
# 复制配置文件到sites-available
|
||||
$SUDO cp "$CONFIG_FILE" "$NGINX_CONF_DIR/sites-available/"
|
||||
log_success "配置文件已复制到 $NGINX_CONF_DIR/sites-available/"
|
||||
|
||||
# 创建软链接到sites-enabled
|
||||
$SUDO ln -sf "$NGINX_CONF_DIR/sites-available/$CONFIG_FILE" "$NGINX_CONF_DIR/sites-enabled/"
|
||||
log_success "已创建软链接到 $NGINX_CONF_DIR/sites-enabled/"
|
||||
|
||||
# 检查主配置文件是否包含sites-enabled
|
||||
if ! grep -q "sites-enabled" "$NGINX_CONF_DIR/nginx.conf"; then
|
||||
log_warning "主配置文件可能未包含sites-enabled目录"
|
||||
log_info "请确保 $NGINX_CONF_DIR/nginx.conf 中包含："
|
||||
echo " include $NGINX_CONF_DIR/sites-enabled/*;"
|
||||
fi
|
||||
}
|
||||
|
||||
# conf.d 方法
|
||||
install_conf_d_method() {
|
||||
log_info "使用 conf.d 方法安装配置"
|
||||
|
||||
# 复制配置文件到conf.d
|
||||
$SUDO cp "$CONFIG_FILE" "$NGINX_CONF_DIR/conf.d/"
|
||||
log_success "配置文件已复制到 $NGINX_CONF_DIR/conf.d/"
|
||||
|
||||
# 检查主配置文件是否包含conf.d
|
||||
if ! grep -q "conf.d" "$NGINX_CONF_DIR/nginx.conf"; then
|
||||
log_warning "主配置文件可能未包含conf.d目录"
|
||||
log_info "请确保 $NGINX_CONF_DIR/nginx.conf 中包含："
|
||||
echo " include $NGINX_CONF_DIR/conf.d/*.conf;"
|
||||
fi
|
||||
}
|
||||
|
||||
# vhosts 方法
|
||||
install_vhosts_method() {
|
||||
log_info "使用 vhosts 方法安装配置"
|
||||
|
||||
# 创建vhosts目录
|
||||
$SUDO mkdir -p "$NGINX_CONF_DIR/vhosts"
|
||||
|
||||
# 复制配置文件到vhosts
|
||||
$SUDO cp "$CONFIG_FILE" "$NGINX_CONF_DIR/vhosts/"
|
||||
log_success "配置文件已复制到 $NGINX_CONF_DIR/vhosts/"
|
||||
|
||||
# 检查主配置文件是否包含vhosts
|
||||
if ! grep -q "vhosts/$CONFIG_FILE" "$NGINX_CONF_DIR/nginx.conf"; then
|
||||
log_warning "需要手动在主配置文件中添加include指令"
|
||||
log_info "请在 $NGINX_CONF_DIR/nginx.conf 的http块中添加："
|
||||
echo " include $NGINX_CONF_DIR/vhosts/$CONFIG_FILE;"
|
||||
|
||||
# 提供自动添加选项
|
||||
read -p "是否自动添加到nginx.conf中？(y/n): " -n 1 -r
|
||||
echo
|
||||
if [[ $REPLY =~ ^[Yy]$ ]]; then
|
||||
add_include_to_main_config
|
||||
fi
|
||||
fi
|
||||
}
|
||||
|
||||
# 自动添加include到主配置文件
|
||||
add_include_to_main_config() {
|
||||
log_info "自动添加include指令到主配置文件"
|
||||
|
||||
# 创建备份
|
||||
$SUDO cp "$NGINX_CONF_DIR/nginx.conf" "$NGINX_CONF_DIR/nginx.conf.backup.$(date +%Y%m%d_%H%M%S)"
|
||||
|
||||
# 在http块的最后添加include
|
||||
$SUDO sed -i '/http {/,/}/ { /}/i\ # Include vhost configurations\n include /etc/nginx/vhosts/*.conf;
|
||||
}' "$NGINX_CONF_DIR/nginx.conf"
|
||||
|
||||
log_success "include指令已添加到主配置文件"
|
||||
}
|
||||
|
||||
# 创建网站目录
|
||||
create_web_directory() {
|
||||
log_info "创建网站目录..."
|
||||
|
||||
WEB_ROOT="/root/hzdyjsweb9091/dist"
|
||||
|
||||
if [ ! -d "$WEB_ROOT" ]; then
|
||||
$SUDO mkdir -p "$WEB_ROOT"
|
||||
log_success "已创建网站目录: $WEB_ROOT"
|
||||
else
|
||||
log_info "网站目录已存在: $WEB_ROOT"
|
||||
fi
|
||||
|
||||
# 设置适当的权限
|
||||
$SUDO chown -R www-data:www-data "$WEB_ROOT" 2>/dev/null || $SUDO chown -R nginx:nginx "$WEB_ROOT" 2>/dev/null || true
|
||||
$SUDO chmod -R 755 "$WEB_ROOT"
|
||||
log_success "已设置目录权限"
|
||||
}
|
||||
|
||||
# 测试nginx配置
|
||||
test_nginx_config() {
|
||||
log_info "测试nginx配置..."
|
||||
|
||||
if $SUDO nginx -t; then
|
||||
log_success "nginx配置测试通过"
|
||||
return 0
|
||||
else
|
||||
log_error "nginx配置测试失败"
|
||||
return 1
|
||||
fi
|
||||
}
|
||||
|
||||
# 重载nginx
|
||||
reload_nginx() {
|
||||
log_info "重载nginx配置..."
|
||||
|
||||
if $SUDO nginx -s reload; then
|
||||
log_success "nginx配置重载成功"
|
||||
return 0
|
||||
else
|
||||
log_error "nginx配置重载失败"
|
||||
return 1
|
||||
fi
|
||||
}
|
||||
|
||||
# 验证安装
|
||||
verify_installation() {
|
||||
log_info "验证安装..."
|
||||
|
||||
# 检查端口监听
|
||||
if netstat -tlnp 2>/dev/null | grep -q ":80 "; then
|
||||
log_success "nginx正在监听80端口"
|
||||
else
|
||||
log_warning "nginx可能未监听80端口"
|
||||
fi
|
||||
|
||||
# 检查配置是否被加载
|
||||
if $SUDO nginx -T 2>/dev/null | grep -q "server_name $SITE_NAME"; then
|
||||
log_success "站点配置已加载"
|
||||
else
|
||||
log_warning "站点配置可能未被加载"
|
||||
fi
|
||||
|
||||
log_info "请配置DNS解析或hosts文件指向您的服务器IP"
|
||||
log_info "然后访问: http://$SITE_NAME"
|
||||
}
|
||||
|
||||
# 显示管理命令
|
||||
show_management_commands() {
|
||||
echo
|
||||
log_info "管理命令:"
|
||||
|
||||
case $CONFIG_METHOD in
|
||||
"sites")
|
||||
echo "启用站点: sudo ln -s $NGINX_CONF_DIR/sites-available/$CONFIG_FILE $NGINX_CONF_DIR/sites-enabled/"
|
||||
echo "禁用站点: sudo rm $NGINX_CONF_DIR/sites-enabled/$CONFIG_FILE"
|
||||
echo "列出可用站点: ls $NGINX_CONF_DIR/sites-available/"
|
||||
echo "列出已启用站点: ls $NGINX_CONF_DIR/sites-enabled/"
|
||||
;;
|
||||
"conf.d")
|
||||
echo "禁用站点: sudo mv $NGINX_CONF_DIR/conf.d/$CONFIG_FILE $NGINX_CONF_DIR/conf.d/$CONFIG_FILE.disabled"
|
||||
echo "启用站点: sudo mv $NGINX_CONF_DIR/conf.d/$CONFIG_FILE.disabled $NGINX_CONF_DIR/conf.d/$CONFIG_FILE"
|
||||
;;
|
||||
"vhosts")
|
||||
echo "编辑配置: sudo nano $NGINX_CONF_DIR/vhosts/$CONFIG_FILE"
|
||||
echo "禁用站点: 需要从主配置文件中注释include行"
|
||||
;;
|
||||
esac
|
||||
|
||||
echo
|
||||
echo "通用命令:"
|
||||
echo "测试配置: sudo nginx -t"
|
||||
echo "重载配置: sudo nginx -s reload"
|
||||
echo "查看错误日志: sudo tail -f /var/log/nginx/error.log"
|
||||
echo "查看站点日志: sudo tail -f /var/log/nginx/$SITE_NAME.access.log"
|
||||
}
|
||||
|
||||
# 主函数
|
||||
main() {
|
||||
echo -e "${BLUE}================================${NC}"
|
||||
echo -e "${BLUE} Nginx站点配置自动安装脚本${NC}"
|
||||
echo -e "${BLUE}================================${NC}"
|
||||
echo
|
||||
|
||||
# 执行检查和安装步骤
|
||||
check_root
|
||||
check_nginx
|
||||
check_config_file
|
||||
detect_nginx_structure
|
||||
backup_existing_config
|
||||
install_config
|
||||
create_web_directory
|
||||
|
||||
# 测试和重载
|
||||
if test_nginx_config; then
|
||||
if reload_nginx; then
|
||||
verify_installation
|
||||
show_management_commands
|
||||
log_success "安装完成！"
|
||||
else
|
||||
log_error "nginx重载失败，请检查配置"
|
||||
exit 1
|
||||
fi
|
||||
else
|
||||
log_error "nginx配置测试失败，安装中止"
|
||||
exit 1
|
||||
fi
|
||||
}
|
||||
|
||||
# 运行主函数
|
||||
main "$@"
|
||||
@@ -0,0 +1,220 @@
|
||||
# Nginx快速配置指南
|
||||
|
||||
## 🎯 总览
|
||||
|
||||
本指南提供三种方式将 `hzdyjsweb.camasort.com.conf` 挂载到主nginx配置中：
|
||||
|
||||
1. **🚀 一键安装脚本（推荐）** - 自动检测系统并配置
|
||||
2. **🏗️ 手动配置方法** - 分步骤手动操作
|
||||
3. **📚 详细说明文档** - 完整的技术文档
|
||||
|
||||
---
|
||||
|
||||
## 🚀 方法一：一键安装脚本（推荐）
|
||||
|
||||
### 使用智能安装脚本
|
||||
```bash
|
||||
# 确保文件在同一目录下
|
||||
ls hzdyjsweb.camasort.com.conf nginx-setup.sh
|
||||
|
||||
# 执行自动安装脚本
|
||||
sudo ./nginx-setup.sh
|
||||
```
|
||||
|
||||
### 脚本特性
|
||||
✅ **自动检测系统类型**（Ubuntu/Debian 或 CentOS/RHEL）
|
||||
✅ **智能选择配置方法**（sites-enabled 或 conf.d）
|
||||
✅ **自动备份现有配置**
|
||||
✅ **完整错误检查和回滚**
|
||||
✅ **彩色输出和详细日志**
|
||||
✅ **自动创建网站目录和设置权限**
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ 方法二：手动配置
|
||||
|
||||
根据你的系统类型选择对应方法：
|
||||
|
||||
### Ubuntu/Debian系统（sites-enabled方式）
|
||||
```bash
|
||||
# 1. 复制配置文件
|
||||
sudo cp hzdyjsweb.camasort.com.conf /etc/nginx/sites-available/
|
||||
|
||||
# 2. 创建软链接启用站点
|
||||
sudo ln -s /etc/nginx/sites-available/hzdyjsweb.camasort.com.conf /etc/nginx/sites-enabled/
|
||||
|
||||
# 3. 创建网站目录
|
||||
sudo mkdir -p /root/hzdyjsweb9091/dist
|
||||
sudo chown -R www-data:www-data /root/hzdyjsweb9091/dist
|
||||
sudo chmod -R 755 /root/hzdyjsweb9091/dist
|
||||
|
||||
# 4. 测试并重载
|
||||
sudo nginx -t
|
||||
sudo nginx -s reload
|
||||
```
|
||||
|
||||
### CentOS/RHEL系统（conf.d方式）
|
||||
```bash
|
||||
# 1. 复制配置文件
|
||||
sudo cp hzdyjsweb.camasort.com.conf /etc/nginx/conf.d/
|
||||
|
||||
# 2. 创建网站目录
|
||||
sudo mkdir -p /root/hzdyjsweb9091/dist
|
||||
sudo chown -R nginx:nginx /root/hzdyjsweb9091/dist
|
||||
sudo chmod -R 755 /root/hzdyjsweb9091/dist
|
||||
|
||||
# 3. 测试并重载
|
||||
sudo nginx -t
|
||||
sudo nginx -s reload
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 验证配置
|
||||
|
||||
### 检查配置是否生效
|
||||
```bash
|
||||
# 检查nginx配置
|
||||
sudo nginx -T | grep -A 5 "server_name hzdyjsweb.camasort.com"
|
||||
|
||||
# 检查端口监听
|
||||
sudo netstat -tlnp | grep :80
|
||||
|
||||
# 检查nginx进程
|
||||
sudo systemctl status nginx
|
||||
```
|
||||
|
||||
### 测试访问
|
||||
```bash
|
||||
# 本地测试（需要配置hosts或DNS）
|
||||
curl -I http://hzdyjsweb.camasort.com
|
||||
|
||||
# 或者直接用IP测试
|
||||
curl -I http://your-server-ip -H "Host: hzdyjsweb.camasort.com"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 日常管理命令
|
||||
|
||||
### 站点管理（sites-enabled方式）
|
||||
```bash
|
||||
# 禁用站点
|
||||
sudo rm /etc/nginx/sites-enabled/hzdyjsweb.camasort.com.conf
|
||||
|
||||
# 重新启用站点
|
||||
sudo ln -s /etc/nginx/sites-available/hzdyjsweb.camasort.com.conf /etc/nginx/sites-enabled/
|
||||
|
||||
# 列出所有可用站点
|
||||
ls /etc/nginx/sites-available/
|
||||
|
||||
# 列出所有启用站点
|
||||
ls /etc/nginx/sites-enabled/
|
||||
```
|
||||
|
||||
### 站点管理（conf.d方式）
|
||||
```bash
|
||||
# 禁用站点
|
||||
sudo mv /etc/nginx/conf.d/hzdyjsweb.camasort.com.conf /etc/nginx/conf.d/hzdyjsweb.camasort.com.conf.disabled
|
||||
|
||||
# 重新启用站点
|
||||
sudo mv /etc/nginx/conf.d/hzdyjsweb.camasort.com.conf.disabled /etc/nginx/conf.d/hzdyjsweb.camasort.com.conf
|
||||
```
|
||||
|
||||
### 通用命令
|
||||
```bash
|
||||
# 测试配置
|
||||
sudo nginx -t
|
||||
|
||||
# 重载配置（不中断服务）
|
||||
sudo nginx -s reload
|
||||
|
||||
# 重启nginx
|
||||
sudo systemctl restart nginx
|
||||
|
||||
# 查看错误日志
|
||||
sudo tail -f /var/log/nginx/error.log
|
||||
|
||||
# 查看站点访问日志
|
||||
sudo tail -f /var/log/nginx/hzdyjsweb.camasort.com.access.log
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌐 域名配置
|
||||
|
||||
### DNS解析配置
|
||||
在你的域名服务商控制台添加A记录：
|
||||
```
|
||||
类型: A
|
||||
主机记录: hzdyjsweb.camasort.com
|
||||
记录值: 你的服务器IP地址
|
||||
TTL: 600（或默认值）
|
||||
```
|
||||
|
||||
### 本地测试（hosts文件）
|
||||
如果暂时没有DNS，可以修改本地hosts文件：
|
||||
```bash
|
||||
# Linux/Mac
|
||||
sudo echo "your-server-ip hzdyjsweb.camasort.com" >> /etc/hosts
|
||||
|
||||
# Windows (以管理员身份运行)
|
||||
echo your-server-ip hzdyjsweb.camasort.com >> C:\Windows\System32\drivers\etc\hosts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📁 文件清单
|
||||
|
||||
创建的文件：
|
||||
- `hzdyjsweb.camasort.com.conf` - nginx站点配置文件
|
||||
- `nginx-setup.sh` - 智能安装脚本（可执行）
|
||||
- `nginx配置挂载说明.md` - 详细技术文档
|
||||
- `nginx快速配置指南.md` - 本快速指南
|
||||
|
||||
---
|
||||
|
||||
## 🚨 常见问题
|
||||
|
||||
### 问题1：配置测试失败
|
||||
```bash
|
||||
# 检查配置语法
|
||||
sudo nginx -t
|
||||
|
||||
# 查看详细错误信息
|
||||
sudo nginx -T
|
||||
```
|
||||
|
||||
### 问题2：无法访问站点
|
||||
```bash
|
||||
# 检查端口是否被占用
|
||||
sudo netstat -tlnp | grep :80
|
||||
|
||||
# 检查防火墙设置
|
||||
sudo ufw status # Ubuntu
|
||||
sudo firewall-cmd --list-all # CentOS
|
||||
```
|
||||
|
||||
### 问题3：权限问题
|
||||
```bash
|
||||
# 检查网站目录权限
|
||||
ls -la /root/hzdyjsweb9091/
|
||||
|
||||
# 重新设置权限
|
||||
sudo chown -R www-data:www-data /root/hzdyjsweb9091/dist # Ubuntu
|
||||
sudo chown -R nginx:nginx /root/hzdyjsweb9091/dist # CentOS
|
||||
sudo chmod -R 755 /root/hzdyjsweb9091/dist
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 推荐流程
|
||||
|
||||
1. **使用一键脚本**：`sudo ./nginx-setup.sh`
|
||||
2. **配置DNS解析**：添加A记录指向服务器IP
|
||||
3. **上传网站文件**：将构建产物上传到 `/root/hzdyjsweb9091/dist/`
|
||||
4. **验证访问**：`curl -I http://hzdyjsweb.camasort.com`
|
||||
|
||||
---
|
||||
|
||||
**✅ 配置完成后，你的Vue前端应用就可以通过 `http://hzdyjsweb.camasort.com` 访问了！**
|
||||
@@ -0,0 +1,160 @@
|
||||
# Nginx部署说明 - hzdyjsweb.camasort.com
|
||||
|
||||
## 📋 部署步骤
|
||||
|
||||
### 1. 上传nginx配置文件
|
||||
|
||||
将 `hzdyjsweb.camasort.com.conf` 文件上传到服务器的nginx配置目录：
|
||||
|
||||
```bash
|
||||
# 方法1：放到sites-available目录（推荐）
|
||||
sudo cp hzdyjsweb.camasort.com.conf /etc/nginx/sites-available/
|
||||
|
||||
# 创建软链接到sites-enabled
|
||||
sudo ln -s /etc/nginx/sites-available/hzdyjsweb.camasort.com.conf /etc/nginx/sites-enabled/
|
||||
|
||||
# 方法2：直接放到conf.d目录
|
||||
sudo cp hzdyjsweb.camasort.com.conf /etc/nginx/conf.d/
|
||||
```
|
||||
|
||||
### 2. 创建网站目录
|
||||
|
||||
```bash
|
||||
# 创建目录
|
||||
sudo mkdir -p /root/hzdyjsweb9091/dist
|
||||
|
||||
# 设置目录权限
|
||||
sudo chown -R www-data:www-data /root/hzdyjsweb9091/dist
|
||||
sudo chmod -R 755 /root/hzdyjsweb9091/dist
|
||||
```
|
||||
|
||||
### 3. 上传构建产物
|
||||
|
||||
将前端构建产物（web/dist/目录下的所有文件）上传到 `/root/hzdyjsweb9091/dist/`：
|
||||
|
||||
```bash
|
||||
# 如果使用scp上传
|
||||
scp -r ./web/dist/* root@your-server:/root/hzdyjsweb9091/dist/
|
||||
|
||||
# 或者使用rsync
|
||||
rsync -avz ./web/dist/ root@your-server:/root/hzdyjsweb9091/dist/
|
||||
```
|
||||
|
||||
### 4. 创建日志目录
|
||||
|
||||
```bash
|
||||
# 确保日志目录存在
|
||||
sudo mkdir -p /var/log/nginx
|
||||
sudo touch /var/log/nginx/hzdyjsweb.camasort.com.access.log
|
||||
sudo touch /var/log/nginx/hzdyjsweb.camasort.com.error.log
|
||||
sudo chown www-data:www-data /var/log/nginx/hzdyjsweb.camasort.com.*
|
||||
```
|
||||
|
||||
### 5. 测试nginx配置
|
||||
|
||||
```bash
|
||||
# 测试nginx配置语法
|
||||
sudo nginx -t
|
||||
|
||||
# 如果配置正确，应该看到：
|
||||
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
|
||||
# nginx: configuration file /etc/nginx/nginx.conf test is successful
|
||||
```
|
||||
|
||||
### 6. 重载nginx配置
|
||||
|
||||
```bash
|
||||
# 重载nginx配置（推荐）
|
||||
sudo nginx -s reload
|
||||
|
||||
# 或者重启nginx服务
|
||||
sudo systemctl restart nginx
|
||||
|
||||
# 检查nginx状态
|
||||
sudo systemctl status nginx
|
||||
```
|
||||
|
||||
### 7. 配置域名解析
|
||||
|
||||
在你的域名服务商处，将 `hzdyjsweb.camasort.com` 解析到服务器IP地址：
|
||||
|
||||
```
|
||||
A记录: hzdyjsweb.camasort.com -> 你的服务器IP
|
||||
```
|
||||
|
||||
## 🔧 常用nginx管理命令
|
||||
|
||||
```bash
|
||||
# 检查nginx配置
|
||||
sudo nginx -t
|
||||
|
||||
# 重载配置（不中断服务）
|
||||
sudo nginx -s reload
|
||||
|
||||
# 重启nginx
|
||||
sudo systemctl restart nginx
|
||||
|
||||
# 查看nginx状态
|
||||
sudo systemctl status nginx
|
||||
|
||||
# 查看nginx错误日志
|
||||
sudo tail -f /var/log/nginx/error.log
|
||||
|
||||
# 查看网站访问日志
|
||||
sudo tail -f /var/log/nginx/hzdyjsweb.camasort.com.access.log
|
||||
|
||||
# 查看网站错误日志
|
||||
sudo tail -f /var/log/nginx/hzdyjsweb.camasort.com.error.log
|
||||
```
|
||||
|
||||
## 🚨 故障排除
|
||||
|
||||
### 1. 403 Forbidden错误
|
||||
```bash
|
||||
# 检查文件权限
|
||||
ls -la /root/hzdyjsweb9091/dist/
|
||||
|
||||
# 设置正确权限
|
||||
sudo chown -R www-data:www-data /root/hzdyjsweb9091/dist/
|
||||
sudo chmod -R 755 /root/hzdyjsweb9091/dist/
|
||||
```
|
||||
|
||||
### 2. 502 Bad Gateway错误
|
||||
- 检查nginx配置语法
|
||||
- 确保网站目录存在且有正确权限
|
||||
- 查看nginx错误日志
|
||||
|
||||
### 3. 域名无法访问
|
||||
- 确认域名DNS解析正确
|
||||
- 检查服务器防火墙设置
|
||||
- 确认nginx正在运行
|
||||
|
||||
### 4. 页面刷新404错误
|
||||
- 确认 `try_files $uri $uri/ /index.html;` 配置正确
|
||||
- 检查是否有其他location规则冲突
|
||||
|
||||
## 📝 配置说明
|
||||
|
||||
### 主要功能特性：
|
||||
|
||||
1. **Vue Router支持**: 配置了 `try_files` 支持SPA路由
|
||||
2. **静态资源缓存**: JS/CSS等静态资源缓存1年
|
||||
3. **Gzip压缩**: 启用gzip压缩减少传输大小
|
||||
4. **安全头**: 添加了基本的安全响应头
|
||||
5. **日志记录**: 独立的访问和错误日志
|
||||
6. **文件上传**: 支持最大50M文件上传
|
||||
|
||||
### 可选配置：
|
||||
|
||||
- **API代理**: 如果需要避免CORS问题，可以取消注释API代理配置
|
||||
- **HTTPS**: 已预留HTTPS配置，需要SSL证书时可启用
|
||||
|
||||
## ✅ 验证部署
|
||||
|
||||
部署完成后，访问以下URL验证：
|
||||
|
||||
1. 主页: `http://hzdyjsweb.camasort.com`
|
||||
2. 任意路由: `http://hzdyjsweb.camasort.com/system/user`
|
||||
3. 静态资源: 检查CSS/JS文件是否正常加载
|
||||
|
||||
如果一切正常，你应该能看到完整的前端应用界面！
|
||||
@@ -0,0 +1,250 @@
|
||||
# Nginx配置文件挂载说明
|
||||
|
||||
## 🎯 概述
|
||||
|
||||
本文档说明如何将 `hzdyjsweb.camasort.com.conf` 这个独立的nginx站点配置文件正确挂载到主nginx.conf中。
|
||||
|
||||
## 📋 方法一：使用 sites-available/sites-enabled 结构（推荐）
|
||||
|
||||
### 适用系统
|
||||
- Ubuntu/Debian系统
|
||||
- 已有 `/etc/nginx/sites-available/` 和 `/etc/nginx/sites-enabled/` 目录
|
||||
|
||||
### 操作步骤
|
||||
|
||||
1. **将配置文件放入sites-available目录**
|
||||
```bash
|
||||
sudo cp hzdyjsweb.camasort.com.conf /etc/nginx/sites-available/
|
||||
```
|
||||
|
||||
2. **创建软链接到sites-enabled目录**
|
||||
```bash
|
||||
sudo ln -s /etc/nginx/sites-available/hzdyjsweb.camasort.com.conf /etc/nginx/sites-enabled/
|
||||
```
|
||||
|
||||
3. **验证主nginx.conf包含sites-enabled**
|
||||
```bash
|
||||
# 检查主配置文件是否包含以下行
|
||||
grep "sites-enabled" /etc/nginx/nginx.conf
|
||||
```
|
||||
|
||||
应该包含类似这样的行：
|
||||
```nginx
|
||||
include /etc/nginx/sites-enabled/*;
|
||||
```
|
||||
|
||||
4. **测试配置并重载**
|
||||
```bash
|
||||
sudo nginx -t
|
||||
sudo nginx -s reload
|
||||
```
|
||||
|
||||
### 管理命令
|
||||
```bash
|
||||
# 启用站点
|
||||
sudo ln -s /etc/nginx/sites-available/hzdyjsweb.camasort.com.conf /etc/nginx/sites-enabled/
|
||||
|
||||
# 禁用站点
|
||||
sudo rm /etc/nginx/sites-enabled/hzdyjsweb.camasort.com.conf
|
||||
|
||||
# 列出可用站点
|
||||
ls /etc/nginx/sites-available/
|
||||
|
||||
# 列出已启用站点
|
||||
ls /etc/nginx/sites-enabled/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 方法二：使用 conf.d 目录
|
||||
|
||||
### 适用系统
|
||||
- CentOS/RHEL系统
|
||||
- 已有 `/etc/nginx/conf.d/` 目录
|
||||
|
||||
### 操作步骤
|
||||
|
||||
1. **将配置文件放入conf.d目录**
|
||||
```bash
|
||||
sudo cp hzdyjsweb.camasort.com.conf /etc/nginx/conf.d/
|
||||
```
|
||||
|
||||
2. **验证主nginx.conf包含conf.d**
|
||||
```bash
|
||||
# 检查主配置文件是否包含以下行
|
||||
grep "conf.d" /etc/nginx/nginx.conf
|
||||
```
|
||||
|
||||
应该包含类似这样的行：
|
||||
```nginx
|
||||
include /etc/nginx/conf.d/*.conf;
|
||||
```
|
||||
|
||||
3. **测试配置并重载**
|
||||
```bash
|
||||
sudo nginx -t
|
||||
sudo nginx -s reload
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 方法三：直接在主nginx.conf中包含
|
||||
|
||||
### 操作步骤
|
||||
|
||||
1. **将配置文件放在合适位置**
|
||||
```bash
|
||||
sudo mkdir -p /etc/nginx/vhosts
|
||||
sudo cp hzdyjsweb.camasort.com.conf /etc/nginx/vhosts/
|
||||
```
|
||||
|
||||
2. **编辑主nginx.conf文件**
|
||||
```bash
|
||||
sudo nano /etc/nginx/nginx.conf
|
||||
```
|
||||
|
||||
3. **在http块中添加include指令**
|
||||
```nginx
|
||||
http {
|
||||
# ... 其他配置 ...
|
||||
|
||||
# 包含虚拟主机配置
|
||||
include /etc/nginx/vhosts/hzdyjsweb.camasort.com.conf;
|
||||
|
||||
# ... 其他配置 ...
|
||||
}
|
||||
```
|
||||
|
||||
4. **测试配置并重载**
|
||||
```bash
|
||||
sudo nginx -t
|
||||
sudo nginx -s reload
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 检查当前nginx配置结构
|
||||
|
||||
### 查看主配置文件
|
||||
```bash
|
||||
# 查看nginx主配置文件
|
||||
cat /etc/nginx/nginx.conf | grep -E "(include|sites-|conf\.d)"
|
||||
```
|
||||
|
||||
### 确认nginx版本和安装方式
|
||||
```bash
|
||||
# 查看nginx版本
|
||||
nginx -V
|
||||
|
||||
# 查看nginx配置文件位置
|
||||
nginx -t 2>&1 | head -1
|
||||
|
||||
# 查看已有目录结构
|
||||
ls -la /etc/nginx/
|
||||
```
|
||||
|
||||
### 常见的目录结构
|
||||
|
||||
**Ubuntu/Debian 风格:**
|
||||
```
|
||||
/etc/nginx/
|
||||
├── nginx.conf # 主配置文件
|
||||
├── sites-available/ # 可用站点配置
|
||||
│ └── hzdyjsweb.camasort.com.conf
|
||||
├── sites-enabled/ # 已启用站点配置
|
||||
│ └── hzdyjsweb.camasort.com.conf -> ../sites-available/hzdyjsweb.camasort.com.conf
|
||||
└── conf.d/ # 额外配置目录
|
||||
```
|
||||
|
||||
**CentOS/RHEL 风格:**
|
||||
```
|
||||
/etc/nginx/
|
||||
├── nginx.conf # 主配置文件
|
||||
├── conf.d/ # 站点配置目录
|
||||
│ └── hzdyjsweb.camasort.com.conf
|
||||
└── default.d/ # 默认配置目录
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ 一键配置脚本
|
||||
|
||||
### 自动检测并配置
|
||||
```bash
|
||||
#!/bin/bash
|
||||
|
||||
CONFIG_FILE="hzdyjsweb.camasort.com.conf"
|
||||
|
||||
# 检测nginx配置目录结构
|
||||
if [ -d "/etc/nginx/sites-available" ] && [ -d "/etc/nginx/sites-enabled" ]; then
|
||||
echo "检测到 sites-available/sites-enabled 结构"
|
||||
sudo cp $CONFIG_FILE /etc/nginx/sites-available/
|
||||
sudo ln -sf /etc/nginx/sites-available/$CONFIG_FILE /etc/nginx/sites-enabled/
|
||||
echo "配置已启用（sites-enabled方式）"
|
||||
elif [ -d "/etc/nginx/conf.d" ]; then
|
||||
echo "检测到 conf.d 结构"
|
||||
sudo cp $CONFIG_FILE /etc/nginx/conf.d/
|
||||
echo "配置已启用（conf.d方式）"
|
||||
else
|
||||
echo "创建 vhosts 目录并直接包含"
|
||||
sudo mkdir -p /etc/nginx/vhosts
|
||||
sudo cp $CONFIG_FILE /etc/nginx/vhosts/
|
||||
echo "请手动在 /etc/nginx/nginx.conf 中添加："
|
||||
echo "include /etc/nginx/vhosts/$CONFIG_FILE;"
|
||||
fi
|
||||
|
||||
# 测试配置
|
||||
sudo nginx -t
|
||||
if [ $? -eq 0 ]; then
|
||||
echo "配置测试通过，重载nginx..."
|
||||
sudo nginx -s reload
|
||||
echo "nginx重载完成！"
|
||||
else
|
||||
echo "配置测试失败，请检查配置文件"
|
||||
fi
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 验证配置生效
|
||||
|
||||
### 检查配置是否被加载
|
||||
```bash
|
||||
# 列出所有server块
|
||||
sudo nginx -T | grep -A 5 "server_name hzdyjsweb.camasort.com"
|
||||
|
||||
# 检查端口监听
|
||||
sudo netstat -tlnp | grep :80
|
||||
|
||||
# 测试域名解析（需要配置hosts或DNS）
|
||||
curl -I http://hzdyjsweb.camasort.com
|
||||
```
|
||||
|
||||
### 常见问题排查
|
||||
```bash
|
||||
# 查看nginx错误日志
|
||||
sudo tail -f /var/log/nginx/error.log
|
||||
|
||||
# 查看站点专用日志
|
||||
sudo tail -f /var/log/nginx/hzdyjsweb.camasort.com.error.log
|
||||
|
||||
# 检查nginx进程
|
||||
ps aux | grep nginx
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 推荐方案
|
||||
|
||||
**对于生产环境，推荐使用方法一（sites-available/sites-enabled）**，因为：
|
||||
|
||||
✅ **易于管理**: 可以方便地启用/禁用站点
|
||||
✅ **标准化**: 符合Debian/Ubuntu的标准做法
|
||||
✅ **版本控制友好**: 配置文件独立，便于备份和版本管理
|
||||
✅ **安全性**: 软链接方式，原配置文件受保护
|
||||
|
||||
**配置完成后记得:**
|
||||
1. 测试nginx配置: `sudo nginx -t`
|
||||
2. 重载nginx: `sudo nginx -s reload`
|
||||
3. 验证站点可访问: `curl -I http://hzdyjsweb.camasort.com`
|
||||
4. 检查日志: `sudo tail /var/log/nginx/hzdyjsweb.camasort.com.access.log`
|
||||
@@ -0,0 +1,346 @@
|
||||
# Web前端生产环境部署指南
|
||||
|
||||
## 📋 部署概述
|
||||
|
||||
本指南说明如何将Web前端工程部署到生产环境，后端API地址为：`http://47.121.125.41:8080/`
|
||||
|
||||
## 🔧 已完成配置
|
||||
|
||||
### 1. 生产环境API配置修改
|
||||
|
||||
已将生产环境配置文件 `web/.env.production` 中的API地址修改为：
|
||||
|
||||
```bash
|
||||
# 原配置
|
||||
VITE_APP_BASE_API = '/prod-api'
|
||||
|
||||
# 新配置
|
||||
VITE_APP_BASE_API = 'http://47.121.125.41:8080'
|
||||
```
|
||||
|
||||
### 2. 配置文件备份
|
||||
|
||||
原始配置文件已备份为：`web/.env.production.backup`
|
||||
|
||||
## 🚀 部署步骤
|
||||
|
||||
### 步骤1：安装依赖并构建
|
||||
|
||||
```bash
|
||||
# 进入web工程目录
|
||||
cd web
|
||||
|
||||
# 安装依赖（如果还没有安装）
|
||||
npm install
|
||||
|
||||
# 构建生产环境版本
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
### 步骤2：验证构建产物
|
||||
|
||||
```bash
|
||||
# 构建完成后，检查dist目录
|
||||
ls -la dist/
|
||||
|
||||
# 应该包含以下文件/目录：
|
||||
# - index.html (主页面)
|
||||
# - assets/ (静态资源：CSS、JS、图片等)
|
||||
# - favicon.ico (网站图标)
|
||||
```
|
||||
|
||||
### 步骤3：部署到Web服务器
|
||||
|
||||
#### 选项A：直接上传静态文件（推荐）
|
||||
|
||||
1. 将 `dist/` 目录下的所有文件上传到Web服务器的根目录
|
||||
2. 确保Web服务器支持HTML5 History模式（SPA路由）
|
||||
|
||||
#### 选项B：使用Docker部署
|
||||
|
||||
```dockerfile
|
||||
# Dockerfile示例
|
||||
FROM nginx:alpine
|
||||
|
||||
# 复制构建产物到nginx目录
|
||||
COPY dist/ /usr/share/nginx/html/
|
||||
|
||||
# 复制nginx配置（可选）
|
||||
COPY nginx.conf /etc/nginx/nginx.conf
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
```
|
||||
|
||||
### 步骤4：Web服务器配置
|
||||
|
||||
#### Nginx配置示例
|
||||
|
||||
如果使用Nginx作为Web服务器，需要配置支持Vue Router的History模式：
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name your-domain.com;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# 支持Vue Router History模式
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# 静态资源缓存配置
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# Gzip压缩
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
||||
}
|
||||
```
|
||||
|
||||
#### Apache配置示例
|
||||
|
||||
如果使用Apache，需要在网站根目录创建 `.htaccess` 文件：
|
||||
|
||||
```apache
|
||||
<IfModule mod_rewrite.c>
|
||||
RewriteEngine On
|
||||
RewriteBase /
|
||||
RewriteRule ^index\.html$ - [L]
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteRule . /index.html [L]
|
||||
</IfModule>
|
||||
```
|
||||
|
||||
## 🔍 部署验证
|
||||
|
||||
### 1. 功能验证
|
||||
|
||||
部署完成后，访问网站进行以下验证：
|
||||
|
||||
```bash
|
||||
# 访问主页
|
||||
curl -I http://your-domain.com
|
||||
|
||||
# 检查API请求是否正常
|
||||
# 在浏览器开发者工具中查看网络请求
|
||||
# 确认API请求指向：http://47.121.125.41:8080
|
||||
```
|
||||
|
||||
### 2. 关键检查点
|
||||
|
||||
- [ ] 页面正常加载
|
||||
- [ ] 登录功能正常
|
||||
- [ ] API请求指向正确的后端地址
|
||||
- [ ] 路由跳转正常（刷新页面不出现404）
|
||||
- [ ] 静态资源加载正常
|
||||
- [ ] 浏览器控制台无错误
|
||||
|
||||
## 🌐 CORS配置注意事项
|
||||
|
||||
由于前端直接访问后端API，需要确保后端服务器配置了正确的CORS策略：
|
||||
|
||||
### 后端CORS配置检查
|
||||
|
||||
确保后端 `application.yml` 中包含以下配置：
|
||||
|
||||
```yaml
|
||||
# CORS配置
|
||||
cors:
|
||||
# 允许的域名，部署后需要添加前端域名
|
||||
allowed-origins:
|
||||
- http://localhost
|
||||
- http://localhost:80
|
||||
- http://your-frontend-domain.com # 添加你的前端域名
|
||||
allowed-methods: GET,POST,PUT,DELETE,OPTIONS
|
||||
allowed-headers: "*"
|
||||
allow-credentials: true
|
||||
```
|
||||
|
||||
## 🔒 安全配置建议
|
||||
|
||||
### 1. HTTPS配置
|
||||
|
||||
生产环境建议使用HTTPS：
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name your-domain.com;
|
||||
|
||||
ssl_certificate /path/to/your/certificate.crt;
|
||||
ssl_certificate_key /path/to/your/private.key;
|
||||
|
||||
# 其他配置...
|
||||
}
|
||||
|
||||
# HTTP重定向到HTTPS
|
||||
server {
|
||||
listen 80;
|
||||
server_name your-domain.com;
|
||||
return 301 https://$server_name$request_uri;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 安全头配置
|
||||
|
||||
```nginx
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header Referrer-Policy "no-referrer-when-downgrade" always;
|
||||
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
|
||||
```
|
||||
|
||||
## 🔄 替代部署方案：Nginx代理方式
|
||||
|
||||
如果不想修改前端配置，可以保持原始配置 `VITE_APP_BASE_API = '/prod-api'`，通过Nginx代理：
|
||||
|
||||
### 1. 恢复原始配置
|
||||
|
||||
```bash
|
||||
# 恢复原始配置（如果需要）
|
||||
cp web/.env.production.backup web/.env.production
|
||||
|
||||
# 重新构建
|
||||
cd web && npm run build:prod
|
||||
```
|
||||
|
||||
### 2. Nginx代理配置
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name your-domain.com;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# 前端静态文件
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# API代理到后端服务器
|
||||
location /prod-api/ {
|
||||
proxy_pass http://47.121.125.41:8080/;
|
||||
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;
|
||||
|
||||
# CORS处理
|
||||
add_header Access-Control-Allow-Origin *;
|
||||
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
|
||||
add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,clientid';
|
||||
|
||||
if ($request_method = 'OPTIONS') {
|
||||
return 204;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 性能优化建议
|
||||
|
||||
### 1. 构建优化
|
||||
|
||||
```bash
|
||||
# 使用生产环境构建（已启用压缩）
|
||||
npm run build:prod
|
||||
|
||||
# 检查构建产物大小
|
||||
du -sh dist/
|
||||
```
|
||||
|
||||
### 2. CDN配置
|
||||
|
||||
对于静态资源，建议使用CDN加速：
|
||||
|
||||
```nginx
|
||||
# 静态资源使用CDN
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
|
||||
# 如果有CDN，可以设置重定向
|
||||
# return 301 https://cdn.your-domain.com$request_uri;
|
||||
}
|
||||
```
|
||||
|
||||
## 🚨 故障排查
|
||||
|
||||
### 常见问题及解决方案
|
||||
|
||||
1. **页面刷新出现404**
|
||||
- 检查Web服务器是否配置了SPA路由支持
|
||||
- 确认 `try_files` 配置正确
|
||||
|
||||
2. **API请求失败**
|
||||
- 检查后端服务是否正常运行
|
||||
- 验证CORS配置
|
||||
- 检查防火墙和安全组设置
|
||||
|
||||
3. **静态资源加载失败**
|
||||
- 检查文件路径和权限
|
||||
- 验证Web服务器配置
|
||||
|
||||
4. **登录功能异常**
|
||||
- 检查加密配置是否与后端一致
|
||||
- 验证客户端ID配置
|
||||
|
||||
## 📝 部署检查清单
|
||||
|
||||
- [ ] 环境配置文件已正确修改
|
||||
- [ ] 项目构建成功
|
||||
- [ ] 静态文件已上传到Web服务器
|
||||
- [ ] Web服务器配置正确
|
||||
- [ ] 后端API地址可访问
|
||||
- [ ] CORS配置正确
|
||||
- [ ] 所有功能测试通过
|
||||
- [ ] 性能测试通过
|
||||
- [ ] 安全配置完成
|
||||
|
||||
## 🔄 部署脚本示例
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# deploy.sh - 自动化部署脚本
|
||||
|
||||
echo "开始部署Web前端..."
|
||||
|
||||
# 1. 构建项目
|
||||
cd web
|
||||
echo "正在安装依赖..."
|
||||
npm install
|
||||
|
||||
echo "正在构建生产版本..."
|
||||
npm run build:prod
|
||||
|
||||
# 2. 备份现有部署
|
||||
if [ -d "/var/www/html.backup" ]; then
|
||||
rm -rf /var/www/html.backup
|
||||
fi
|
||||
cp -r /var/www/html /var/www/html.backup
|
||||
|
||||
# 3. 部署新版本
|
||||
echo "正在部署新版本..."
|
||||
rm -rf /var/www/html/*
|
||||
cp -r dist/* /var/www/html/
|
||||
|
||||
# 4. 重启Web服务器
|
||||
echo "正在重启Web服务器..."
|
||||
sudo systemctl reload nginx
|
||||
|
||||
echo "部署完成！"
|
||||
echo "请访问: http://your-domain.com"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**部署完成后，前端应用将通过配置的域名访问，所有API请求将直接指向 `http://47.121.125.41:8080/`**
|
||||
Reference in new issue
Block a user