TDesign Vue筆記
TDesign Vue筆記
創(chuàng )建 nginx.conf 文件：
server {
listen 80;
server_name your-domain.com;
root /usr/share/nginx/html;
index index.html;
# 啟用gzip壓縮
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
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;
# 靜態(tài)資源緩存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Access-Control-Allow-Origin "*";
}
# HTML文件不緩存
location ~* \.html$ {
expires -1;
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
}
# API代理
location /api/ {
proxy_pass http://backend-server/;
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;
}
# SPA路由支持
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;
}
server {
listen 443 ssl http2;
server_name your-domain.com;
# SSL證書(shū)配置
ssl_certificate /path/to/your/cert.pem;
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;
ssl_prefer_server_ciphers off;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;
# HSTS
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
# 其他配置同上...
}
# HTTP重定向到HTTPS
server {
listen 80;
server_name your-domain.com;
return 301 https://$server_name$request_uri;
}
創(chuàng )建 Dockerfile：
# 構建階段
FROM node:18-alpine as build-stage
WORKDIR /app
# 復制package文件
COPY package*.json ./
# 安裝依賴(lài)
RUN npm ci --only=production
# 復制源碼
COPY . .
# 構建應用
RUN npm run build
# 生產(chǎn)階段
FROM nginx:alpine as production-stage
# 復制構建產(chǎn)物
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 復制nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 暴露端口
EXPOSE 80
# 啟動(dòng)nginx
CMD ["nginx", "-g", "daemon off;"]
創(chuàng )建 docker-compose.yml：
version: '3.8'
services:
frontend:
build: .
ports:
- "80:80"
environment:
- NODE_ENV=production
restart: unless-stopped
networks:
- app-network
# 如果有后端服務(wù)
backend:
image: your-backend-image
ports:
- "3000:3000"
environment:
- NODE_ENV=production
- DATABASE_URL=postgresql://user:pass@db:5432/dbname
depends_on:
- db
restart: unless-stopped
networks:
- app-network
# 數據庫服務(wù)
db:
image: postgres:13
environment:
- POSTGRES_DB=dbname
- POSTGRES_USER=user
- POSTGRES_PASSWORD=pass
volumes:
- postgres_data:/var/lib/postgresql/data
restart: unless-stopped
networks:
- app-network
volumes:
postgres_data:
networks:
app-network:
driver: bridge
# 構建階段
FROM node:18-alpine as build-stage
# 設置工作目錄
WORKDIR /app
# 安裝依賴(lài)
COPY package*.json ./
RUN npm ci --only=production && npm cache clean --force
# 復制源碼并構建
COPY . .
RUN npm run build
# 生產(chǎn)階段
FROM nginx:1.21-alpine as production-stage
# 安裝必要工具
RUN apk add --no-cache curl
# 創(chuàng )建非root用戶(hù)
RUN addgroup -g 1001 -S nodejs && \
adduser -S nextjs -u 1001
# 復制構建產(chǎn)物
COPY --from=build-stage --chown=nextjs:nodejs /app/dist /usr/share/nginx/html
# 復制nginx配置
COPY --chown=nextjs:nodejs nginx.conf /etc/nginx/conf.d/default.conf
# 健康檢查
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD curl -f http://localhost/ || exit 1
# 暴露端口
EXPOSE 80
# 啟動(dòng)nginx
CMD ["nginx", "-g", "daemon off;"]
創(chuàng )建 vercel.json：
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@vercel/static-build",
"config": {
"distDir": "dist"
}
}
],
"routes": [
{
"src": "/api/(.*)",
"dest": "https://your-api-domain.com/api/$1"
},
{
"src": "/(.*)",
"dest": "/index.html"
}
],
"env": {
"VITE_API_BASE_URL": "https://your-api-domain.com"
}
}
創(chuàng )建 netlify.toml：
[build]
publish = "dist"
command = "npm run build"
[build.environment]
NODE_VERSION = "18"
[[redirects]]
from = "/api/*"
to = "https://your-api-domain.com/api/:splat"
status = 200
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
[[headers]]
for = "/*.html"
[headers.values]
Cache-Control = "no-cache"
創(chuàng )建 .github/workflows/deploy.yml：
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
env:
VITE_BASE_URL: /your-repo-name/
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
創(chuàng )建 deploy.sh：
#!/bin/bash
# 設置變量
PROJECT_NAME="your-project"
DEPLOY_PATH="/var/www/$PROJECT_NAME"
BACKUP_PATH="/var/backups/$PROJECT_NAME"
NGINX_CONFIG="/etc/nginx/sites-available/$PROJECT_NAME"
echo "開(kāi)始部署 $PROJECT_NAME..."
# 創(chuàng )建備份
if [ -d "$DEPLOY_PATH" ]; then
echo "創(chuàng )建備份..."
sudo mkdir -p $BACKUP_PATH
sudo cp -r $DEPLOY_PATH $BACKUP_PATH/$(date +%Y%m%d_%H%M%S)
fi
# 構建項目
echo "構建項目..."
npm install
npm run build
# 部署文件
echo "部署文件..."
sudo mkdir -p $DEPLOY_PATH
sudo cp -r dist/* $DEPLOY_PATH/
# 設置權限
sudo chown -R www-data:www-data $DEPLOY_PATH
sudo chmod -R 755 $DEPLOY_PATH
# 重啟nginx
echo "重啟nginx..."
sudo systemctl reload nginx
echo "部署完成！"
如果使用Node.js服務(wù)器，創(chuàng )建 ecosystem.config.js：
module.exports = {
apps: [{
name: 'your-project',
script: 'serve',
args: '-s dist -l 3000',
instances: 'max',
exec_mode: 'cluster',
env: {
NODE_ENV: 'production'
}
}],
deploy: {
production: {
user: 'deploy',
host: 'your-server.com',
ref: 'origin/main',
repo: 'git@github.com:your-username/your-repo.git',
path: '/var/www/your-project',
'post-deploy': 'npm install && npm run build && pm2 reload ecosystem.config.js --env production'
}
}
};
# 安裝阿里云CLI工具
npm install -g @alicloud/cli
# 上傳到OSS
ossutil cp -r dist/ oss://your-bucket/your-project/ --update
# 刷新CDN緩存
aliyun cdn RefreshObjectCaches --ObjectPath https://your-cdn-domain.com/your-project/
# 安裝騰訊云CLI工具
npm install -g coscmd
# 配置
coscmd config -a your-secret-id -s your-secret-key -b your-bucket -r your-region
# 上傳文件
coscmd upload -r dist/ /your-project/
# 刷新CDN
tccli cdn PurgePathCache --Paths https://your-cdn-domain.com/your-project/
// src/utils/monitor.js
export function setupMonitoring() {
// 性能監控
if ('performance' in window) {
window.addEventListener('load', () => {
const perfData = performance.getEntriesByType('navigation')[0];
console.log('頁(yè)面加載時(shí)間:', perfData.loadEventEnd - perfData.fetchStart);
});
}
// 錯誤監控
window.addEventListener('error', (event) => {
console.error('JavaScript錯誤:', event.error);
// 發(fā)送錯誤到監控服務(wù)
});
// 未處理的Promise錯誤
window.addEventListener('unhandledrejection', (event) => {
console.error('未處理的Promise錯誤:', event.reason);
// 發(fā)送錯誤到監控服務(wù)
});
}
# 自定義日志格式
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" '
'$request_time $upstream_response_time';
server {
# 訪(fǎng)問(wèn)日志
access_log /var/log/nginx/your-project.access.log main;
# 錯誤日志
error_log /var/log/nginx/your-project.error.log warn;
}
這個(gè)部署配置指南涵蓋了從基礎的Nginx配置到云平臺部署的完整流程，幫助您將項目成功部署到生產(chǎn)環(huán)境。