Webhint项目在Travis CI与Azure Web Apps中的自动化部署与测试指南

概述

本文将详细介绍如何为Webhint项目配置自动化部署流程，利用Travis CI实现代码从开发环境到生产环境的无缝迁移，并通过Webhint工具进行质量检测。这种自动化流程能够显著提高开发效率，确保代码质量。

环境准备

Azure Web Apps环境配置

1. 创建部署槽位：

   • 在Azure门户中找到Web应用服务
   • 选择"部署槽位"选项
   • 添加名为"staging"的槽位，建议克隆生产环境配置

2. 配置部署源：

   • 为staging槽位设置"本地Git仓库"作为部署源
   • 创建部署凭证（用户名/密码）

3. 服务主体创建（推荐）：

   • 使用Azure CLI创建受限权限的服务主体
   • 仅授予"网站参与者"角色权限
   • 记录appId、password和tenant信息

项目本地配置

1. 添加Webhint依赖：

   npm install hint --save-dev
   

2. 初始化配置：

   npm create hintrc
   

3. 添加测试脚本： 在package.json中添加对staging环境的测试命令：

   "scripts": {
     "test:staging": "hint https://your-staging-site.azurewebsites.net"
   }
   

Travis CI配置详解

基础配置

1. 安装Azure CLI： 在before_install阶段添加Azure CLI安装命令：

   before_install:
     - AZ_REPO=$(lsb_release -cs) && echo "deb [arch=amd64] https://packages.microsoft.com/repos/azure-cli/ $AZ_REPO main" | sudo tee /etc/apt/sources.list.d/azure-cli.list
     - curl -L https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -
     - sudo apt-get install apt-transport-https
     - sudo apt-get update && sudo apt-get install azure-cli
   

2. 加密环境变量：

   travis encrypt -r "your/repo" \
     AZURE_WA_USERNAME="username" \
     AZURE_WA_PASSWORD="password" \
     AZURE_WA_SITE="site" \
     AZURE_WA_SLOT="slot"
   

部署流程设计

1. 构建阶段：

   script:
     - npm test  # 执行lint和构建
   

2. 部署前准备：

   before_deploy:
     - mv .gitignore.prod .gitignore  # 替换gitignore以包含构建产物
   

3. 部署到Staging：

   deploy:
     - provider: azure_web_apps
       skip_cleanup: true  # 保留构建产物
   

4. 部署后测试：

   after_deploy:
     - npm run test:staging  # 使用webhint测试staging环境
   

5. 切换到生产环境：

   after_script:
     - npm run swap  # 执行槽位交换
   

高级配置技巧

确保构建失败

默认情况下，after_deploy阶段的失败不会导致构建失败。如需严格质量控制，可将所有步骤合并到script阶段：

script:
  - npm test
  - npm run deploy-to-staging
  - npm run test:staging
  - npm run swap-to-production

自定义部署脚本

对于复杂场景，可编写自定义部署脚本：

1. travis-update.js：

   • 创建临时目录
   • 复制所需文件（排除node_modules）
   • 推送到Azure Git仓库

2. swap.sh：

   #!/bin/bash
   az login --service-principal -u $AZURE_SERVICE_PRINCIPAL -p $AZURE_SERVICE_PRINCIPAL_PASSWORD --tenant $AZURE_TENANT
   az webapp deployment slot swap -g RESOURCEGROUP -n SITE --slot SLOTNAME
   

完整配置示例

sudo: required
env:
  global:
    - secure: "加密的Azure部署凭证"
    - secure: "加密的服务主体凭证"

before_install:
  # Azure CLI安装命令

script:
  - npm test

before_deploy:
  - mv .gitignore.prod .gitignore

deploy:
  - provider: azure_web_apps
    skip_cleanup: true

after_deploy:
  - npm run test:staging

after_script:
  - .travis/swap.sh

language: node_js
node_js: lts/*

最佳实践建议

1. 安全防护：

   • 始终使用服务主体而非个人凭证
   • 为服务主体分配最小必要权限
   • 定期轮换凭证

2. 测试策略：

   • 在staging环境模拟生产配置
   • 使用Webhint进行全面的静态分析
   • 考虑添加端到端测试

3. 监控与回滚：

   • 配置部署通知
   • 建立快速回滚机制
   • 监控生产环境健康状况

通过本文介绍的配置，您可以为Webhint项目建立完整的CI/CD流程，实现从代码提交到生产部署的全自动化，同时确保每个版本都经过严格的质量检测。