终极sub-web自动化部署指南从零搭建CI/CD流水线sub-web是一个基于Vue.js 2.6和Element UI构建的订阅配置自动生成Web界面它能够将各种订阅链接转换为不同代理客户端的配置文件。本文将详细介绍如何为sub-web项目构建完整的自动化部署流程实现从代码提交到生产环境部署的CI/CD流水线。 项目架构概览sub-web采用现代化的前端技术栈包括Vue.js 2.6、Element UI和Axios等。项目结构清晰主要包含以下核心模块前端界面层位于src/views/Subconverter.vue提供订阅转换的用户界面组件模块src/components/目录包含各种可复用组件服务层src/services/处理API调用和业务逻辑配置管理src/config/存储客户端类型和远程配置构建配置vue.config.js和babel.config.js控制构建过程 Docker容器化部署sub-web提供了完整的Docker支持通过Dockerfile实现多阶段构建# ---- Dependencies ---- FROM node:22-alpine AS build WORKDIR /app COPY . . RUN yarn install RUN yarn build FROM nginx:1.24-alpine COPY --frombuild /app/dist /usr/share/nginx/html EXPOSE 80 CMD [ nginx, -g, daemon off; ]Docker Compose完整部署方案项目还提供了services/docker-compose.yaml文件支持与MyUrls短链接服务集成部署version: 3 services: subweb: build: ../. container_name: subweb restart: always ports: - ${SUBWEB_PORT}:80 GitHub Actions CI/CD流水线自动化构建流水线项目已经配置了GitHub Actions工作流位于.github/workflows/build.ymlname: Build on: push: branches: [ master, dev ] jobs: build: name: Build runs-on: ubuntu-latest strategy: matrix: node-version: [22.x] steps: - uses: actions/checkoutv2 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-nodev1 with: node-version: ${{ matrix.node-version }} - name: Get dependencies and build run: | yarn install yarn build - name: Upload uses: actions/upload-artifactv4 with: name: dist path: dist/多架构Docker镜像构建.github/workflows/docker-build-push.yml实现了多平台Docker镜像的自动化构建和推送name: Build and Push Multi-Arch Docker Image on: push: branches: - master jobs: build-and-push: runs-on: ubuntu-latest steps: - name: Check out repository uses: actions/checkoutmaster - name: Set up Docker Buildx uses: docker/setup-buildx-actionv2 - name: Log in to Docker Hub uses: docker/login-actionv2 with: username: ${{ secrets.DOCKERHUB_USERNAME }} password: ${{ secrets.DOCKERHUB_PASSWORD }} - name: Build and push Docker image uses: docker/build-push-actionv3 with: context: . platforms: linux/amd64,linux/arm64 push: true tags: careywong/subweb:latest️ 本地开发与测试环境环境要求与安装Node.js 22.x- 确保使用正确的Node版本Yarn 1.22- 推荐使用Yarn作为包管理器Docker 20.10- 可选用于容器化部署开发环境配置# 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/su/sub-web.git cd sub-web # 安装依赖 yarn install # 启动开发服务器 yarn serve访问 http://localhost:8080 即可查看应用。 生产环境部署策略Nginx配置优化为sub-web配置Nginx反向代理支持SPA路由和性能优化server { listen 80; server_name your-domain.com; root /var/www/sub-web/dist; index index.html index.htm; # SPA路由支持 location / { try_files $uri $uri/ /index.html; } # Gzip压缩优化 gzip on; gzip_min_length 1k; gzip_types text/plain text/css application/json application/javascript; # 静态资源缓存 location ~* \.(css|js|png|jpg|jpeg|gif)$ { add_header Cache-Control public,max-age86400; } }环境变量配置创建.env文件配置后端服务地址# Subconverter后端地址 VUE_APP_SUBCONVERTER_DEFAULT_BACKENDhttps://api.wcc.best # 项目信息 VUE_APP_PROJECThttps://github.com/CareyWang/sub-web VUE_APP_BOT_LINKhttps://t.me/subconverter_discuss 自动化部署最佳实践1. 分支策略与触发条件master分支触发Docker镜像构建和推送dev分支触发构建测试不推送镜像feature分支仅运行代码检查不触发完整构建2. 构建缓存优化在GitHub Actions中配置依赖缓存加速构建过程- name: Cache node modules uses: actions/cachev3 with: path: node_modules key: ${{ runner.os }}-node-${{ hashFiles(**/yarn.lock) }} restore-keys: | ${{ runner.os }}-node-3. 自动化测试集成扩展CI/CD流水线集成自动化测试- name: Run tests run: | yarn test:unit yarn test:e2e4. 部署通知机制添加部署成功/失败通知- name: Notify deployment status if: always() uses: appleboy/telegram-actionmaster with: to: ${{ secrets.TELEGRAM_CHAT_ID }} token: ${{ secrets.TELEGRAM_BOT_TOKEN }} message: | Sub-web部署状态 分支: ${{ github.ref }} 状态: ${{ job.status }} 提交: ${{ github.sha }} 故障排除与监控常见问题解决构建失败检查Node.js版本是否为22.xDocker构建错误确认Docker Buildx已正确配置运行时错误检查环境变量配置是否正确监控指标应用响应时间内存使用情况容器健康状态API调用成功率 性能优化建议构建优化代码分割配置Webpack的代码分割策略Tree Shaking移除未使用的代码图片优化使用WebP格式和懒加载运行时优化CDN加速静态资源使用CDN分发HTTP/2启用HTTP/2协议缓存策略合理配置缓存头 总结通过本文介绍的自动化部署流程您可以实现sub-web项目的持续集成和持续部署。从代码提交到生产环境部署整个流程完全自动化大大提高了开发效率和部署可靠性。关键要点包括✅ 完整的Docker容器化支持✅ GitHub Actions自动化CI/CD流水线✅ 多架构Docker镜像构建✅ 生产环境最佳实践配置✅ 监控和故障排除方案现在就开始为您的sub-web项目配置自动化部署流水线享受高效、可靠的部署体验吧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
终极sub-web自动化部署指南从零搭建CI/CD流水线sub-web是一个基于Vue.js 2.6和Element UI构建的订阅配置自动生成Web界面它能够将各种订阅链接转换为不同代理客户端的配置文件。本文将详细介绍如何为sub-web项目构建完整的自动化部署流程实现从代码提交到生产环境部署的CI/CD流水线。 项目架构概览sub-web采用现代化的前端技术栈包括Vue.js 2.6、Element UI和Axios等。项目结构清晰主要包含以下核心模块前端界面层位于src/views/Subconverter.vue提供订阅转换的用户界面组件模块src/components/目录包含各种可复用组件服务层src/services/处理API调用和业务逻辑配置管理src/config/存储客户端类型和远程配置构建配置vue.config.js和babel.config.js控制构建过程 Docker容器化部署sub-web提供了完整的Docker支持通过Dockerfile实现多阶段构建# ---- Dependencies ---- FROM node:22-alpine AS build WORKDIR /app COPY . . RUN yarn install RUN yarn build FROM nginx:1.24-alpine COPY --frombuild /app/dist /usr/share/nginx/html EXPOSE 80 CMD [ nginx, -g, daemon off; ]Docker Compose完整部署方案项目还提供了services/docker-compose.yaml文件支持与MyUrls短链接服务集成部署version: 3 services: subweb: build: ../. container_name: subweb restart: always ports: - ${SUBWEB_PORT}:80 GitHub Actions CI/CD流水线自动化构建流水线项目已经配置了GitHub Actions工作流位于.github/workflows/build.ymlname: Build on: push: branches: [ master, dev ] jobs: build: name: Build runs-on: ubuntu-latest strategy: matrix: node-version: [22.x] steps: - uses: actions/checkoutv2 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-nodev1 with: node-version: ${{ matrix.node-version }} - name: Get dependencies and build run: | yarn install yarn build - name: Upload uses: actions/upload-artifactv4 with: name: dist path: dist/多架构Docker镜像构建.github/workflows/docker-build-push.yml实现了多平台Docker镜像的自动化构建和推送name: Build and Push Multi-Arch Docker Image on: push: branches: - master jobs: build-and-push: runs-on: ubuntu-latest steps: - name: Check out repository uses: actions/checkoutmaster - name: Set up Docker Buildx uses: docker/setup-buildx-actionv2 - name: Log in to Docker Hub uses: docker/login-actionv2 with: username: ${{ secrets.DOCKERHUB_USERNAME }} password: ${{ secrets.DOCKERHUB_PASSWORD }} - name: Build and push Docker image uses: docker/build-push-actionv3 with: context: . platforms: linux/amd64,linux/arm64 push: true tags: careywong/subweb:latest️ 本地开发与测试环境环境要求与安装Node.js 22.x- 确保使用正确的Node版本Yarn 1.22- 推荐使用Yarn作为包管理器Docker 20.10- 可选用于容器化部署开发环境配置# 克隆项目仓库 git clone https://gitcode.com/gh_mirrors/su/sub-web.git cd sub-web # 安装依赖 yarn install # 启动开发服务器 yarn serve访问 http://localhost:8080 即可查看应用。 生产环境部署策略Nginx配置优化为sub-web配置Nginx反向代理支持SPA路由和性能优化server { listen 80; server_name your-domain.com; root /var/www/sub-web/dist; index index.html index.htm; # SPA路由支持 location / { try_files $uri $uri/ /index.html; } # Gzip压缩优化 gzip on; gzip_min_length 1k; gzip_types text/plain text/css application/json application/javascript; # 静态资源缓存 location ~* \.(css|js|png|jpg|jpeg|gif)$ { add_header Cache-Control public,max-age86400; } }环境变量配置创建.env文件配置后端服务地址# Subconverter后端地址 VUE_APP_SUBCONVERTER_DEFAULT_BACKENDhttps://api.wcc.best # 项目信息 VUE_APP_PROJECThttps://github.com/CareyWang/sub-web VUE_APP_BOT_LINKhttps://t.me/subconverter_discuss 自动化部署最佳实践1. 分支策略与触发条件master分支触发Docker镜像构建和推送dev分支触发构建测试不推送镜像feature分支仅运行代码检查不触发完整构建2. 构建缓存优化在GitHub Actions中配置依赖缓存加速构建过程- name: Cache node modules uses: actions/cachev3 with: path: node_modules key: ${{ runner.os }}-node-${{ hashFiles(**/yarn.lock) }} restore-keys: | ${{ runner.os }}-node-3. 自动化测试集成扩展CI/CD流水线集成自动化测试- name: Run tests run: | yarn test:unit yarn test:e2e4. 部署通知机制添加部署成功/失败通知- name: Notify deployment status if: always() uses: appleboy/telegram-actionmaster with: to: ${{ secrets.TELEGRAM_CHAT_ID }} token: ${{ secrets.TELEGRAM_BOT_TOKEN }} message: | Sub-web部署状态 分支: ${{ github.ref }} 状态: ${{ job.status }} 提交: ${{ github.sha }} 故障排除与监控常见问题解决构建失败检查Node.js版本是否为22.xDocker构建错误确认Docker Buildx已正确配置运行时错误检查环境变量配置是否正确监控指标应用响应时间内存使用情况容器健康状态API调用成功率 性能优化建议构建优化代码分割配置Webpack的代码分割策略Tree Shaking移除未使用的代码图片优化使用WebP格式和懒加载运行时优化CDN加速静态资源使用CDN分发HTTP/2启用HTTP/2协议缓存策略合理配置缓存头 总结通过本文介绍的自动化部署流程您可以实现sub-web项目的持续集成和持续部署。从代码提交到生产环境部署整个流程完全自动化大大提高了开发效率和部署可靠性。关键要点包括✅ 完整的Docker容器化支持✅ GitHub Actions自动化CI/CD流水线✅ 多架构Docker镜像构建✅ 生产环境最佳实践配置✅ 监控和故障排除方案现在就开始为您的sub-web项目配置自动化部署流水线享受高效、可靠的部署体验吧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
双梁正问题 【 torch 实战】（Python代码实现）)
