# 🚀 法律助手应用 - 部署指南 ## 环境要求 ### 开发环境 - **Node.js**: >= 18.0.0 - **npm**: >= 9.0.0 - **Angular CLI**: >= 17.0.0 ### 推荐IDE - **VS Code** (推荐) - 扩展：Angular Language Service - 扩展：ESLint - 扩展：Prettier --- ## 快速开始 ### 1. 安装依赖 ```bash cd legal-assistant-app npm install ``` ### 2. 启动开发服务器 ```bash ng serve ``` 或 ```bash npm start ``` 访问：`http://localhost:4200` ### 3. 构建生产版本 ```bash ng build --configuration production ``` 构建文件输出到：`dist/legal-assistant-app/` --- ## 项目结构 ``` legal-assistant-app/ ├── src/ │ ├── app/ │ │ ├── pages/ # 页面组件 │ │ │ ├── home/ # 首页 │ │ │ ├── consultation/ # AI咨询 │ │ │ ├── cases/ # 案件管理 │ │ │ ├── services/ # 法律服务 │ │ │ ├── learning/ # 法律学习 │ │ │ ├── tools/ # 工具箱 │ │ │ └── profile/ # 个人中心 │ │ ├── components/ # 共享组件 │ │ ├── services/ # 服务 │ │ ├── models/ # 数据模型 │ │ └── app.routes.ts # 路由配置 │ ├── assets/ # 静态资源 │ ├── styles.scss # 全局样式 │ └── index.html # 入口HTML ├── STYLE_GUIDE.md # 样式指南 ├── TEST_CHECKLIST.md # 测试清单 └── README.md # 项目说明 ``` --- ## 配置说明 ### 路由配置 位置：`src/app/app.routes.ts` 所有路由已配置完成，支持： - 懒加载 - 路由守卫（可选） - 路由预加载 ### 环境配置 创建环境配置文件： ```bash # 开发环境 src/environments/environment.ts # 生产环境 src/environments/environment.prod.ts ``` 示例配置： ```typescript export const environment = { production: false, apiUrl: 'http://localhost:3000/api', // 其他配置... }; ``` --- ## 后端集成指南 ### 1. 创建API服务 ```typescript // src/app/services/api.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { environment } from '../environments/environment'; @Injectable({ providedIn: 'root' }) export class ApiService { private apiUrl = environment.apiUrl; constructor(private http: HttpClient) {} // 案件相关API getCases() { return this.http.get(`${this.apiUrl}/cases`); } createCase(data: any) { return this.http.post(`${this.apiUrl}/cases`, data); } // 更多API方法... } ``` ### 2. API端点示例 ``` GET /api/cases # 获取案件列表 POST /api/cases # 创建案件 GET /api/cases/:id # 获取案件详情 PUT /api/cases/:id # 更新案件 DELETE /api/cases/:id # 删除案件 GET /api/lawyers # 获取律师列表 GET /api/lawyers/:id # 获取律师详情 POST /api/consultation # AI咨询 GET /api/consultation/history # 咨询历史 GET /api/tools # 工具列表 POST /api/tools/calculate # 赔偿计算 GET /api/evidence # 证据列表 POST /api/evidence/upload # 上传证据 ``` --- ## 部署方案 ### 方案一：Nginx部署 #### 1. 构建项目 ```bash ng build --configuration production ``` #### 2. Nginx配置 ```nginx server { listen 80; server_name your-domain.com; root /var/www/legal-assistant/dist/legal-assistant-app/browser; index index.html; location / { try_files $uri $uri/ /index.html; } # API代理 location /api { proxy_pass http://localhost:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } # 静态资源缓存 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } } ``` #### 3. 部署步骤 ```bash # 复制构建文件 sudo cp -r dist/legal-assistant-app/* /var/www/legal-assistant/ # 重启Nginx sudo systemctl restart nginx ``` ### 方案二：Docker部署 #### 1. 创建Dockerfile ```dockerfile # 构建阶段 FROM node:18 AS build WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build -- --configuration production # 运行阶段 FROM nginx:alpine COPY --from=build /app/dist/legal-assistant-app/browser /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` #### 2. 构建镜像 ```bash docker build -t legal-assistant-app . ``` #### 3. 运行容器 ```bash docker run -d -p 80:80 legal-assistant-app ``` ### 方案三：Vercel/Netlify部署 #### Vercel部署 ```bash # 安装Vercel CLI npm i -g vercel # 部署 vercel --prod ``` #### Netlify部署 ```bash # 安装Netlify CLI npm i -g netlify-cli # 部署 netlify deploy --prod --dir=dist/legal-assistant-app/browser ``` --- ## 性能优化 ### 1. 启用AOT编译 ```bash ng build --aot --configuration production ``` ### 2. 启用生产模式优化 ```typescript // main.ts if (environment.production) { enableProdMode(); } ``` ### 3. 路由懒加载 已在路由配置中实现 ### 4. 图片优化 - 使用WebP格式 - 实现图片懒加载 - 压缩图片资源 ### 5. 代码分割 ```bash ng build --configuration production --stats-json ``` --- ## 监控与日志 ### 1. 错误监控（推荐Sentry） ```typescript // app.config.ts import * as Sentry from "@sentry/angular"; Sentry.init({ dsn: "your-sentry-dsn", environment: environment.production ? 'production' : 'development', }); ``` ### 2. 性能监控 ```typescript // 使用Angular性能API import { PerformanceObserver } from 'perf_hooks'; ``` ### 3. 日志服务 ```typescript // src/app/services/logger.service.ts export class LoggerService { log(message: string) { if (!environment.production) { console.log(message); } } error(error: any) { // 发送到错误监控服务 } } ``` --- ## 安全配置 ### 1. CSP配置 ```html ``` ### 2. HTTPS配置 生产环境必须使用HTTPS ### 3. API安全 - 使用JWT进行身份验证 - 实现CORS策略 - API请求加密 --- ## 持续集成/持续部署 (CI/CD) ### GitHub Actions示例 ```yaml # .github/workflows/deploy.yml name: Deploy on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Setup Node.js uses: actions/setup-node@v2 with: node-version: '18' - name: Install dependencies run: npm ci - name: Build run: npm run build -- --configuration production - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist/legal-assistant-app/browser ``` --- ## 故障排查 ### 常见问题 #### 1. 路由404错误 **问题**：刷新页面出现404 **解决**：配置服务器支持HTML5 History模式 #### 2. 样式不生效 **问题**：部署后样式丢失 **解决**：检查base href配置 #### 3. API跨域 **问题**：API请求被CORS阻止 **解决**：配置后端CORS或使用代理 --- ## 维护建议 ### 定期任务 - [ ] 每月更新依赖包 - [ ] 每周检查错误日志 - [ ] 每月性能分析 - [ ] 每季度安全审计 ### 备份策略 - 数据库每日备份 - 代码版本控制 - 配置文件备份 --- ## 技术支持 ### 文档资源 - [Angular官方文档](https://angular.io/docs) - [项目样式指南](./STYLE_GUIDE.md) - [测试清单](./TEST_CHECKLIST.md) ### 联系方式 - 开发团队邮箱：dev@example.com - 技术支持热线：123-4567-8900 --- *最后更新：2024年* *版本：v1.0.0*