服务器环境要求
开发环境(本地构建)
# 检查 Node.js 版本
node -v
# 检查 npm 版本
npm -v
# 检查项目依赖
npm list --depth=0
# 从仓库克隆代码
git clone https://your-repo-url.git
cd interview_web
# 或使用已有代码
cd /path/to/interview_web
# 创建部署目录
mkdir -p /var/www/interview_web
chmod 755 /var/www/interview_web
# 进入项目目录
cd interview_web
# 安装依赖(推荐使用 npm ci 保证版本一致)
npm ci
# 或手动安装
npm install
注意:
npm cache clean --force# API 地址
VITE_API_URL=http://localhost:8000
# 公共路径
VITE_PUBLIC_PATH=/
# 端口号
VITE_PORT=8080
# 构建输出目录
VITE_OUTPUT_DIR=dist
# API 地址(替换为实际后端地址)
VITE_API_URL=https://api.yourdomain.com
# 公共路径
VITE_PUBLIC_PATH=/
# 端口号(一般不需要,用于本地预览)
VITE_PORT=443
# 本地测试用生产环境
VITE_API_URL=http://localhost:8000
VITE_PUBLIC_PATH=/
配置步骤:
# 标准生产构建
npm run build
# 本地生产构建(用于本地验证)
npm run build:local
构建完成后,在 dist/ 目录下会生成以下文件:
dist/
├── index.html # 入口文件
├── assets/ # 静态资源
│ ├── *.js # JavaScript 文件
│ ├── *.css # 样式文件
│ └── *.png # 图片资源
└── favicon.ico # 网站图标
构建信息:
# 安装 http-server 用于测试
npm install -g http-server
# 在 dist 目录启动测试服务器
cd dist
http-server -p 8080
# 访问 http://localhost:8080 进行测试
验证项目:
# 方法一:使用 SCP
scp -r dist/* user@server:/var/www/interview_web/
# 方法二:使用 rsync
rsync -avz dist/ user@server:/var/www/interview_web/
# 方法三:在服务器上使用 Git
git pull origin master
npm run build
cp -r dist/* /var/www/interview_web/
创建或编辑配置文件 /etc/nginx/sites-available/interview_web:
server {
listen 80;
server_name yourdomain.com www.yourdomain.com;
root /var/www/interview_web;
index index.html;
# 字符集设置
charset utf-8;
# 日志设置
access_log /var/log/nginx/interview_web.access.log;
error_log /var/log/nginx/interview_web.error.log;
# Vue Router 历史模式支持
location / {
try_files $uri $uri/ /index.html;
}
# API 代理
location /api {
proxy_pass http://127.0.0.1:8000;
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 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
}
# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Gzip 压缩
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript
application/json application/javascript application/xml+rss
application/rss+xml font/truetype font/opentype
application/vnd.ms-fontobject image/svg+xml;
# 禁止访问隐藏文件
location ~ /\. {
deny all;
access_log off;
log_not_found off;
}
}
# 创建软链接
sudo ln -s /etc/nginx/sites-available/interview_web /etc/nginx/sites-enabled/
# 测试配置
sudo nginx -t
# 重启 Nginx
sudo systemctl reload nginx
# 或
sudo service nginx restart
# 使用 Let's Encrypt 免费证书
sudo apt-get install certbot python3-certbot-nginx
# 获取证书
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
# 证书会自动续期,也可以手动测试
sudo certbot renew --dry-run
# 构建阶段
FROM node:16-alpine AS builder
WORKDIR /app
# 复制依赖文件
COPY package*.json ./
# 安装依赖
RUN npm ci --only=production
# 复制源代码
COPY . .
# 构建
RUN npm run build
# 生产阶段
FROM nginx:alpine
# 复制构建产物
COPY --from=builder /app/dist /usr/share/nginx/html
# 复制 Nginx 配置
COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
# 暴露端口
EXPOSE 80
# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
version: '3.8'
services:
frontend:
build: .
ports:
- "80:80"
volumes:
- ./nginx.conf:/etc/nginx/conf.d/default.conf
restart: unless-stopped
depends_on:
- backend
backend:
image: django-backend:latest
ports:
- "8000:8000"
environment:
- DATABASE_URL=mysql://user:password@db:3306/dbname
restart: unless-stopped
db:
image: mysql:8.0
environment:
- MYSQL_ROOT_PASSWORD=password
- MYSQL_DATABASE=dbname
volumes:
- mysql_data:/var/lib/mysql
restart: unless-stopped
volumes:
mysql_data:
# 构建并启动
docker-compose up -d
# 查看日志
docker-compose logs -f frontend
# 停止服务
docker-compose down
在 dist 目录下创建 .htaccess 文件:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
<VirtualHost *:80>
ServerName yourdomain.com
DocumentRoot /var/www/interview_web
<Directory /var/www/interview_web>
AllowOverride All
Require all granted
</Directory>
ProxyPass /api http://127.0.0.1:8000/api
ProxyPassReverse /api http://127.0.0.1:8000/api
</VirtualHost>
# 使用 Chrome DevTools
# 1. 打开开发者工具
# 2. Network 面板查看加载时间
# 3. Performance 面板查看性能指标
# 期望指标:
# - 首屏加载时间 < 3秒
# - 页面交互响应 < 100ms
# - 资源文件已压缩
# 1. 备份当前版本
cp -r /var/www/interview_web /var/www/interview_web.backup
# 2. 拉取最新代码
cd /path/to/interview_web
git pull origin master
# 3. 安装新依赖(如有)
npm install
# 4. 重新构建
npm run build
# 5. 更新文件
cp -r dist/* /var/www/interview_web/
# 6. 清除缓存
sudo nginx -s reload
# 如果需要回滚
rm -rf /var/www/interview_web/*
cp -r /var/www/interview_web.backup/* /var/www/interview_web/
sudo nginx -s reload
# 查看 Nginx 访问日志
tail -f /var/log/nginx/interview_web.access.log
# 查看错误日志
tail -f /var/log/nginx/interview_web.error.log
# 查看服务器资源
htop
# 或
top
可能原因:
解决方案:
# 1. 检查构建输出
ls -la dist/assets/
# 2. 检查 Nginx 配置
sudo nginx -t
# 3. 清除浏览器缓存
# Ctrl + Shift + Delete
# 4. 检查控制台错误
# F12 打开开发者工具查看错误信息
可能原因:
解决方案:
# 1. 检查后端服务
curl http://127.0.0.1:8000/api/test/
# 2. 检查代理配置
sudo cat /etc/nginx/sites-available/interview_web | grep proxy_pass
# 3. 检查环境变量
cat .env.production
可能原因:
解决方案:
# 1. 检查文件权限
ls -la /var/www/interview_web/assets/
# 2. 修改文件权限
sudo chmod -R 755 /var/www/interview_web/
# 3. 修改文件所有者
sudo chown -R www-data:www-data /var/www/interview_web/
可能原因:
解决方案:
# 确保 Nginx 配置中有:
location / {
try_files $uri $uri/ /index.html;
}
解决方案:
# 1. 使用缓存加速
npm ci
# 2. 使用并行构建
export NODE_OPTIONS="--max-old-space-size=4096"
# 3. 减少不必要的依赖
npm prune
解决方案:
# 在 Nginx 配置中添加:
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
如有其他问题,请联系:
最后更新:2024年
文档版本:v1.0