前端多环境自动化部署实战：GitHub Actions + Azure Blob + Cloudflare

最新推荐文章于 2026-06-26 10:37:20 发布
原创 最新推荐文章于 2026-06-26 10:37:20 发布 · 500 阅读 · 14 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#前端 #自动化 #github

前言

在团队协作开发中，经常会遇到这样的场景：

  • 多个功能分支并行开发，每个分支都需要独立的测试环境
  • 测试通过后需要部署到预发布环境验证
  • 最终手动控制发布到生产环境

如果每次都手动打包、上传、配置，不仅效率低下，还容易出错。本文将介绍一套完整的自动化部署方案，实现：

  • feature/* 分支 push 后自动部署到 test.example.com/feature/xxx
  • PR 合并到 master 后自动部署到预发布环境 example.com/preview
  • 生产环境 example.com 需要手动触发部署
  • 部署完成后自动发送飞书/钉钉通知

架构概览

用户访问

Cloudflare CDN

Azure Blob Storage

GitHub Actions 工作流

GitHub 仓库

push

trigger

trigger

feature/xxx 分支

GitHub Actions

PR 合并到 master

手动触发 / release tag

安装依赖

构建打包

上传到 Azure Blob

清理 CDN 缓存

发送通知

test/project-name/

test/project-name/feature/xxx/

prod/project-name/

prod/project-name/preview/

test.example.com

example.com

test.example.com/feature/xxx

example.com/preview

example.com

核心原理

为什么能实现分支隔离部署？

关键在于 动态 base 路径 的设计。

当构建 feature/test1 分支时：

  1. GitHub Actions 将分支名 feature/test1 作为环境变量 BASE_URL 传入
  2. Vite 读取 BASE_URL，设置 base: '/feature/test1/'
  3. 构建产物输出到 dist/feature/test1/ 目录
  4. 上传到 Azure Blob 的 test/project-name/ 路径下
  5. 最终文件位置：test/project-name/feature/test1/index.html

这样，不同分支的文件互不干扰，通过 URL 路径区分。

Vite base 配置的作用

base 配置决定了打包后资源的引用路径：

<!-- base: '/' 时 -->
<script src="/assets/main.js"></script>

<!-- base: '/feature/test1/' 时 -->
<script src="/feature/test1/assets/main.js"></script>

如果不设置正确的 base，部署到子路径后所有资源都会 404。

目录结构

project/
├── .github/
│   └── workflows/
│       ├── ci.yml                        # 代码检查
│       ├── deploy-test.yml               # 测试环境部署
│       ├── deploy-preview.yml            # 预发布环境部署
│       └── deploy-production.yml         # 生产环境部署
├── src/
├── vite.config.ts
├── package.json
└── ...

完整代码实现

1. Vite 配置

// vite.config.ts
import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv, type ConfigEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

// 从环境变量获取 BASE_URL，默认为根路径
// 这个值由 GitHub Actions 在构建时注入
const BASE_URL = process.env.BASE_URL || '/';

// 判断是否为预发布环境，用于代码中的条件判断
const IS_PREVIEW_ENV = BASE_URL.startsWith('/preview');

export default defineConfig((env: ConfigEnv) => {
  // 加载 .env 文件中的环境变量
  const viteEnv = loadEnv(env.mode, process.cwd());

  return {
    // 设置资源基础路径，这是实现分支隔离部署的关键
    // 例如：feature/test1 分支会设置为 '/feature/test1/'
    base: BASE_URL,

    build: {
      // 输出目录也要包含 BASE_URL，确保目录结构正确
      // 例如：dist/feature/test1/
      outDir: `dist${BASE_URL}`,

      rollupOptions: {
        output: {
          // 入口文件命名，添加 hash 用于缓存控制
          entryFileNames: 'assets/main-[hash].js',
          // 代码分割后的 chunk 命名
          chunkFileNames: 'assets/chunks/[name]-[hash].js',
          // 静态资源分类存放
          assetFileNames: (assetInfo) => {
            const name = assetInfo?.name || '';
            if (name.endsWith('.css')) {
              return 'assets/styles/[name]-[hash].css';
            }
            if (/\.(png|jpe?g|gif|svg|webp)$/.test(name)) {
              return 'assets/images/[name]-[hash].[ext]';
            }
            if (/\.(woff2?|ttf|eot)$/.test(name)) {
              return 'assets/fonts/[name]-[hash].[ext]';
            }
            return 'assets/[name]-[hash].[ext]';
          }
        }
      }
    },

    // 在代码中可以通过 import.meta.env.IS_PREVIEW_ENV 判断环境
    define: {
      'import.meta.env.IS_PREVIEW_ENV': IS_PREVIEW_ENV
    },

    plugins: [vue()],

    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  };
});

2. Vue Router 配置

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
  // ... 其他路由
];

// 从 Vite 注入的环境变量获取 base 路径
// import.meta.env.BASE_URL 会自动读取 vite.config.ts 中的 base 配置
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;

3. package.json 脚本配置

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build-testing": "vite build --mode testing",
    "build-preview": "vite build --mode preview",
    "build-production": "vite build --mode production",
    "clean": "rimraf dist",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx --fix"
  }
}

4. 环境变量文件

# .env.testing
VITE_API_BASE_URL=https://test-api.example.com
VITE_ENV=testing

# .env.preview  
VITE_API_BASE_URL=https://api.example.com
VITE_ENV=preview

# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_ENV=production

5. GitHub Actions 工作流

5.1 代码检查 (ci.yml)
# .github/workflows/ci.yml
# 代码质量检查工作流
# 触发时机：向 master 分支提交代码或发起 PR 时执行
name: CI

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      # 检出代码
      - uses: actions/checkout@v4

      # 设置 Node.js 环境
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20.x
          # 如果使用私有 npm 包，需要配置 registry
          # registry-url: https://npm.pkg.github.com
          # scope: '@your-org'

      # 缓存依赖，加速后续构建
      - name: Cache dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: npm-${{ hashFiles('package-lock.json') }}
          restore-keys: npm-

      # 安装依赖
      - name: Install dependencies
        run: npm ci
        # 如果使用私有包，需要设置 token
        # env:
        #   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

      # 执行 lint 检查
      - name: Run lint
        run: npm run lint
5.2 测试环境部署 (deploy-test.yml)
# .github/workflows/deploy-test.yml
# 测试环境自动部署工作流
# 触发时机：feature/* 分支 push 时自动触发，或手动触发
# 部署结果：https://test.example.com/feature/xxx/
name: 测试环境部署

on:
  # 手动触发入口
  workflow_dispatch:
  # feature 分支 push 自动触发
  push:
    branches:
      - feature/**

env:
  # 动态计算 BASE_URL
  # 如果是 feature 分支 push，则 BASE_URL 为 /feature/xxx
  # 否则为空（手动触发时部署到根路径）
  BASE_URL: ${{ github.event_name == 'push' && startsWith(github.ref_name, 'feature') && format('/{0}', github.ref_name) || '' }}
  
  # Azure Blob 配置
  AZURE_BLOB_CONNECTION_STRING: ${{ secrets.AZURE_BLOB_CONNECTION_STRING }}
  AZURE_BLOB_CONTAINER_NAME: ${{ vars.AZURE_BLOB_CONTAINER_NAME }}
  # 测试环境部署路径
  AZURE_BLOB_DESTINATION_PATH: "test/my-project"
  BUILD_OUT_DIR: "dist"

permissions:
  id-token: write
  contents: read

jobs:
  deploy:
    runs-on: ubuntu-latest
    # 使用 GitHub Environment 管理敏感配置
    environment: testing
    outputs:
      # 输出 commit message，用于通知
      firstCommitMessage: ${{ steps.getCommitMessage.outputs.firstCommitMessage }}

    steps:
      - uses: actions/checkout@v4

      # 获取最新的 commit message
      - id: getCommitMessage
        name: Get commit message
        run: |
          firstCommitMessage=$(git log -1 --format=%s)
          echo "firstCommitMessage=$firstCommitMessage" >> "$GITHUB_OUTPUT"

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20.x

      - name: Cache dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: npm-${{ hashFiles('package-lock.json') }}
          restore-keys: npm-

      - name: Install dependencies
        run: npm ci

      # 构建时注入 BASE_URL 环境变量
      # Vite 会读取这个变量设置 base 路径
      - name: Build
        run: npm run clean && BASE_URL=$BASE_URL npm run build-testing

      # 上传到 Azure Blob Storage
      - name: Deploy to Azure Blob
        uses: Azure/cli@v2.1.0
        with:
          inlineScript: |
            az storage blob upload-batch \
              --destination '${{ env.AZURE_BLOB_CONTAINER_NAME }}' \
              --source ${{ env.BUILD_OUT_DIR }} \
              --destination-path ${{ env.AZURE_BLOB_DESTINATION_PATH }} \
              --overwrite \
              --connection-string '${{ env.AZURE_BLOB_CONNECTION_STRING }}'

      # 单独设置 HTML 文件的缓存策略
      # HTML 文件不缓存，确保用户总是获取最新版本
      - name: Set HTML cache control
        uses: Azure/cli@v2.1.0
        with:
          inlineScript: |
            az storage blob upload-batch \
              --destination '${{ env.AZURE_BLOB_CONTAINER_NAME }}' \
              --source ${{ env.BUILD_OUT_DIR }} \
              --destination-path ${{ env.AZURE_BLOB_DESTINATION_PATH }} \
              --overwrite \
              --connection-string '${{ env.AZURE_BLOB_CONNECTION_STRING }}' \
              --content-cache-control 'public, max-age=0' \
              --pattern '*.html'

  # 部署完成后发送通知
  notify:
    needs: deploy
    runs-on: ubuntu-latest
    name: Send notification
    # 无论部署成功还是失败都发送通知
    if: ${{ always() }}
    steps:
      - name: Send Feishu notification
        env:
          WEBHOOK_URL: ${{ vars.FEISHU_WEBHOOK }}
          DEPLOY_RESULT: ${{ needs.deploy.result == 'success' && '成功' || '失败' }}
          DEPLOY_ENV: '测试环境'
          # 动态生成访问地址
          DEPLOY_URL: ${{ format('https://test.example.com{0}/', env.BASE_URL) }}
          BRANCH_NAME: ${{ github.ref_name }}
          ACTOR: ${{ github.triggering_actor }}
          ACTION_URL: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
          COMMIT_MESSAGE: ${{ needs.deploy.outputs.firstCommitMessage }}
        run: |
          # 获取中国时区时间
          eventTime=$(TZ='Asia/Shanghai' date +"%Y-%m-%d %H:%M:%S")
          
          # 构造飞书消息体
          reqData="{
            \"msg_type\": \"text\",
            \"content\": {
              \"text\": \"项目部署通知\n状态：$DEPLOY_RESULT\n环境：$DEPLOY_ENV\n分支：$BRANCH_NAME\n提交：$COMMIT_MESSAGE\n操作人：$ACTOR\n时间：$eventTime\n访问地址：$DEPLOY_URL\n构建详情：$ACTION_URL\"
            }
          }"
          
          curl -X POST -H "Content-Type: application/json" -d "$reqData" $WEBHOOK_URL
5.3 预发布环境部署 (deploy-preview.yml)
# .github/workflows/deploy-preview.yml
# 预发布环境部署工作流
# 触发时机：PR 合并到 master 时自动触发，或手动触发
# 部署结果：https://example.com/preview/
name: 预发布环境部署

on:
  workflow_dispatch:
  pull_request:
    types:
      - closed
    branches:
      - master

env:
  AZURE_BLOB_CONNECTION_STRING: ${{ secrets.AZURE_BLOB_CONNECTION_STRING }}
  AZURE_BLOB_CONTAINER_NAME: ${{ vars.AZURE_BLOB_CONTAINER_NAME }}
  # 预发布环境部署到生产容器的 preview 子路径
  AZURE_BLOB_DESTINATION_PATH: "prod/my-project"
  BUILD_OUT_DIR: "dist"

permissions:
  id-token: write
  contents: read

jobs:
  deploy:
    # 只在手动触发或 PR 被合并时执行（不是关闭未合并的 PR）
    if: github.event_name == 'workflow_dispatch' || (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
    runs-on: ubuntu-latest
    environment: preview

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20.x

      - name: Cache dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: npm-${{ hashFiles('package-lock.json') }}
          restore-keys: npm-

      - name: Install dependencies
        run: npm ci

      # 预发布环境使用 /preview 作为 base 路径
      - name: Build
        run: npm run clean && BASE_URL=/preview npm run build-preview

      - name: Deploy to Azure Blob
        uses: Azure/cli@v2.1.0
        with:
          inlineScript: |
            az storage blob upload-batch \
              --destination '${{ env.AZURE_BLOB_CONTAINER_NAME }}' \
              --source ${{ env.BUILD_OUT_DIR }} \
              --destination-path ${{ env.AZURE_BLOB_DESTINATION_PATH }} \
              --overwrite \
              --connection-string '${{ env.AZURE_BLOB_CONNECTION_STRING }}'

      - name: Set HTML cache control
        uses: Azure/cli@v2.1.0
        with:
          inlineScript: |
            az storage blob upload-batch \
              --destination '${{ env.AZURE_BLOB_CONTAINER_NAME }}' \
              --source ${{ env.BUILD_OUT_DIR }} \
              --destination-path ${{ env.AZURE_BLOB_DESTINATION_PATH }} \
              --overwrite \
              --connection-string '${{ env.AZURE_BLOB_CONNECTION_STRING }}' \
              --content-cache-control 'public, max-age=0' \
              --pattern '*.html'

  notify:
    needs: deploy
    runs-on: ubuntu-latest
    if: ${{ always() }}
    steps:
      - name: Send notification
        env:
          WEBHOOK_URL: ${{ vars.FEISHU_WEBHOOK }}
          DEPLOY_RESULT: ${{ needs.deploy.result == 'success' && '成功' || '失败' }}
          DEPLOY_ENV: '预发布环境'
          DEPLOY_URL: 'https://example.com/preview/'
          PR_BRANCH: ${{ github.event.pull_request.head.ref }}
          PR_URL: ${{ github.event.pull_request.html_url }}
          PR_TITLE: ${{ github.event.pull_request.title }}
          ACTOR: ${{ github.triggering_actor }}
          ACTION_URL: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
        run: |
          eventTime=$(TZ='Asia/Shanghai' date +"%Y-%m-%d %H:%M:%S")
          reqData="{
            \"msg_type\": \"text\",
            \"content\": {
              \"text\": \"项目部署通知\n状态：$DEPLOY_RESULT\n环境：$DEPLOY_ENV\nPR标题：$PR_TITLE\nPR分支：$PR_BRANCH\n操作人：$ACTOR\n时间：$eventTime\n访问地址：$DEPLOY_URL\nPR地址：$PR_URL\n构建详情：$ACTION_URL\n\n提示：预发布环境验证完成后，请手动触发正式发布\"
            }
          }"
          curl -X POST -H "Content-Type: application/json" -d "$reqData" $WEBHOOK_URL
5.4 生产环境部署 (deploy-production.yml)
# .github/workflows/deploy-production.yml
# 生产环境部署工作流
# 触发时机：手动触发 或 推送 release/* tag
# 部署结果：https://example.com/
# 注意：生产环境部署需要谨慎，建议只允许手动触发
name: 生产环境部署

on:
  # 手动触发，这是推荐的生产部署方式
  workflow_dispatch:
  # 也可以通过 release tag 触发
  push:
    tags:
      - release/**

env:
  AZURE_BLOB_CONNECTION_STRING: ${{ secrets.AZURE_BLOB_CONNECTION_STRING }}
  AZURE_BLOB_CONTAINER_NAME: ${{ vars.AZURE_BLOB_CONTAINER_NAME }}
  AZURE_BLOB_DESTINATION_PATH: "prod/my-project"
  BUILD_OUT_DIR: "dist"

permissions:
  id-token: write
  contents: read

jobs:
  deploy:
    runs-on: ubuntu-latest
    # 生产环境需要单独的 environment 配置
    # 可以在 GitHub 仓库设置中配置审批流程
    environment: production
    outputs:
      firstCommitMessage: ${{ steps.getCommitMessage.outputs.firstCommitMessage }}

    steps:
      - uses: actions/checkout@v4

      - id: getCommitMessage
        name: Get commit message
        run: |
          firstCommitMessage=$(git log -1 --format=%s)
          echo "firstCommitMessage=$firstCommitMessage" >> "$GITHUB_OUTPUT"

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20.x

      - name: Cache dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: npm-${{ hashFiles('package-lock.json') }}
          restore-keys: npm-

      - name: Install dependencies
        run: npm ci

      # 生产环境 base 为根路径
      - name: Build
        run: npm run build-production

      - name: Deploy to Azure Blob
        uses: Azure/cli@v2.1.0
        with:
          inlineScript: |
            az storage blob upload-batch \
              --destination '${{ env.AZURE_BLOB_CONTAINER_NAME }}' \
              --source ${{ env.BUILD_OUT_DIR }} \
              --destination-path ${{ env.AZURE_BLOB_DESTINATION_PATH }} \
              --overwrite \
              --connection-string '${{ env.AZURE_BLOB_CONNECTION_STRING }}'

      - name: Set HTML cache control
        uses: Azure/cli@v2.1.0
        with:
          inlineScript: |
            az storage blob upload-batch \
              --destination '${{ env.AZURE_BLOB_CONTAINER_NAME }}' \
              --source ${{ env.BUILD_OUT_DIR }} \
              --destination-path ${{ env.AZURE_BLOB_DESTINATION_PATH }} \
              --overwrite \
              --connection-string '${{ env.AZURE_BLOB_CONNECTION_STRING }}' \
              --content-cache-control 'public, max-age=0' \
              --pattern '*.html'

      # 生产部署后清理 CDN 缓存
      # 确保用户能立即访问到最新版本
      - name: Clear Cloudflare cache
        id: clearCache
        uses: actions/github-script@v6
        env:
          # Cloudflare Zone ID，在 Cloudflare 控制台获取
          CF_ZONE_ID: ${{ secrets.CF_ZONE_ID }}
          CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
        with:
          result-encoding: string
          script: |
            const { CF_ZONE_ID, CF_API_TOKEN } = process.env;
            const apiUrl = `https://api.cloudflare.com/client/v4/zones/${CF_ZONE_ID}/purge_cache`;
            
            // 清理指定页面的缓存
            // 也可以使用 purge_everything: true 清理所有缓存
            const response = await fetch(apiUrl, {
              method: 'POST',
              headers: {
                'Authorization': `Bearer ${CF_API_TOKEN}`,
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                files: [
                  'https://example.com/',
                  'https://example.com/about',
                  'https://example.com/products'
                  // 添加其他需要清理缓存的页面
                ]
              })
            });
            
            const result = await response.json();
            console.log('Cloudflare cache purge result:', result);
            return result?.success ? 'success' : 'failure';

      # 检查缓存清理结果
      - name: Check cache clear result
        run: |
          if [ "${{ steps.clearCache.outputs.result }}" != "success" ]; then
            echo "Warning: Failed to clear Cloudflare cache"
            # 缓存清理失败不阻断部署，只是警告
          fi

  notify:
    needs: deploy
    runs-on: ubuntu-latest
    if: ${{ always() }}
    steps:
      - name: Send notification
        env:
          WEBHOOK_URL: ${{ vars.FEISHU_WEBHOOK }}
          DEPLOY_RESULT: ${{ needs.deploy.result == 'success' && '成功' || '失败' }}
          DEPLOY_ENV: '生产环境'
          DEPLOY_URL: 'https://example.com'
          BRANCH_NAME: ${{ github.ref_name }}
          ACTOR: ${{ github.triggering_actor }}
          ACTION_URL: "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
          COMMIT_MESSAGE: ${{ needs.deploy.outputs.firstCommitMessage }}
        run: |
          eventTime=$(TZ='Asia/Shanghai' date +"%Y-%m-%d %H:%M:%S")
          reqData="{
            \"msg_type\": \"text\",
            \"content\": {
              \"text\": \"生产环境部署通知\n状态：$DEPLOY_RESULT\n提交信息：$COMMIT_MESSAGE\n分支/标签：$BRANCH_NAME\n操作人：$ACTOR\n时间：$eventTime\n访问地址：$DEPLOY_URL\n构建详情：$ACTION_URL\"
            }
          }"
          curl -X POST -H "Content-Type: application/json" -d "$reqData" $WEBHOOK_URL

配置说明

GitHub 仓库配置

需要在 GitHub 仓库的 Settings -> Secrets and variables -> Actions 中配置以下内容：

Secrets（敏感信息）
名称说明获取方式
AZURE_BLOB_CONNECTION_STRINGAzure Storage 连接字符串Azure Portal -> Storage Account -> Access keys
CF_ZONE_IDCloudflare Zone IDCloudflare Dashboard -> 域名概览页右侧
CF_API_TOKENCloudflare API TokenCloudflare Dashboard -> My Profile -> API Tokens
Variables（非敏感配置）
名称说明示例值
AZURE_BLOB_CONTAINER_NAMEAzure Blob 容器名$web
FEISHU_WEBHOOK飞书机器人 Webhook 地址https://open.feishu.cn/open-apis/bot/v2/hook/xxx
Environments（环境配置）

建议创建三个 Environment：

  1. testing - 测试环境，无需审批
  2. preview - 预发布环境，可选审批
  3. production - 生产环境，建议配置审批流程

在 Settings -> Environments 中可以为每个环境配置：

  • 审批人员（Required reviewers）
  • 等待时间（Wait timer）
  • 部署分支限制（Deployment branches）

Azure Blob Storage 配置

1. 创建 Storage Account
# 使用 Azure CLI 创建
az storage account create \
  --name mystorageaccount \
  --resource-group myResourceGroup \
  --location eastasia \
  --sku Standard_LRS
2. 启用静态网站托管
az storage blob service-properties update \
  --account-name mystorageaccount \
  --static-website \
  --index-document index.html \
  --404-document index.html

启用后会自动创建 $web 容器，静态网站端点格式为：
https://mystorageaccount.z6.web.core.windows.net

3. 配置 CORS（如需要）
az storage cors add \
  --account-name mystorageaccount \
  --services b \
  --methods GET HEAD \
  --origins '*' \
  --allowed-headers '*'

Cloudflare 配置

1. 添加域名

在 Cloudflare Dashboard 添加域名，并将域名的 NS 记录指向 Cloudflare。

2. 配置 DNS 记录
类型名称内容代理状态
CNAME@mystorageaccount.z6.web.core.windows.net已代理
CNAMEtestmystorageaccount.z6.web.core.windows.net已代理
3. 配置 Page Rules（可选）

为了优化缓存策略，可以添加 Page Rules：

URL: example.com/*.html
设置: Cache Level = Bypass

URL: example.com/assets/*
设置: Cache Level = Cache Everything, Edge Cache TTL = 1 month
4. 创建 API Token

在 My Profile -> API Tokens -> Create Token：

  • 权限：Zone -> Cache Purge -> Purge
  • 区域资源：选择对应的域名

工作流程图

完整的开发部署流程

否

是

否

是

否

是

开发者创建 feature/xxx 分支

本地开发

Push 到远程

GitHub Actions

自动部署到测试环境

test.example.com/feature/xxx

测试验证

测试通过?

创建 PR 到 master

Code Review

Review 通过?

合并 PR

GitHub Actions

自动部署到预发布环境

example.com/preview

预发布验证

验证通过?

修复问题，重新提 PR

手动触发生产部署

GitHub Actions

部署到生产环境

example.com

清理 CDN 缓存

发送部署通知

分支与环境对应关系

环境

分支

push 自动触发

PR 合并自动触发

手动触发

手动触发

feature/xxx

master

release/v1.0.0

测试环境
test.example.com/feature/xxx

预发布环境
example.com/preview

生产环境
example.com

常见问题

Q1: 为什么资源加载 404？

最常见的原因是 base 路径配置不正确。检查以下几点：

  1. Vite 配置中的 base 是否正确读取了 BASE_URL 环境变量
  2. 构建命令是否正确传入了 BASE_URL
  3. Vue Router 的 createWebHistory 是否使用了 import.meta.env.BASE_URL

Q2: 如何支持 SPA 路由？

Azure Blob 静态网站需要配置 404 页面指向 index.html：

az storage blob service-properties update \
  --account-name mystorageaccount \
  --static-website \
  --index-document index.html \
  --404-document index.html  # 关键配置

Q3: 如何清理旧的分支部署？

可以添加一个定时清理的 workflow：

name: Cleanup old deployments

on:
  schedule:
    # 每周日凌晨 2 点执行
    - cron: '0 2 * * 0'
  workflow_dispatch:

jobs:
  cleanup:
    runs-on: ubuntu-latest
    steps:
      - name: Delete old feature deployments
        uses: Azure/cli@v2.1.0
        env:
          AZURE_BLOB_CONNECTION_STRING: ${{ secrets.AZURE_BLOB_CONNECTION_STRING }}
        with:
          inlineScript: |
            # 列出所有 feature 目录
            # 删除超过 30 天未修改的目录
            # 具体实现根据需求调整
            echo "Cleanup completed"

Q4: 如何回滚到上一个版本？

方案一：重新触发上一次成功的 workflow

方案二：使用 Git tag 管理版本，回滚时部署指定 tag

# 创建版本 tag
git tag release/v1.0.0
git push origin release/v1.0.0

# 回滚时，手动触发 workflow 并选择对应的 tag

Q5: 如何在代码中判断当前环境？

// 判断是否为预发布环境
if (import.meta.env.IS_PREVIEW_ENV) {
  console.log('当前是预发布环境');
}

// 判断构建模式
if (import.meta.env.MODE === 'production') {
  console.log('生产模式');
}

// 使用自定义环境变量
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

扩展：钉钉通知

如果团队使用钉钉而不是飞书，可以替换通知步骤：

- name: Send DingTalk notification
  env:
    DINGTALK_WEBHOOK: ${{ vars.DINGTALK_WEBHOOK }}
    DEPLOY_RESULT: ${{ needs.deploy.result == 'success' && '成功' || '失败' }}
  run: |
    eventTime=$(TZ='Asia/Shanghai' date +"%Y-%m-%d %H:%M:%S")
    reqData="{
      \"msgtype\": \"markdown\",
      \"markdown\": {
        \"title\": \"部署通知\",
        \"text\": \"### 项目部署$DEPLOY_RESULT\n- 环境：测试环境\n- 时间：$eventTime\n- 操作人：${{ github.triggering_actor }}\"
      }
    }"
    curl -X POST -H "Content-Type: application/json" -d "$reqData" $DINGTALK_WEBHOOK

扩展：使用 Cloudflare Pages 替代 Azure Blob

如果不想使用 Azure，可以直接使用 Cloudflare Pages：

- name: Deploy to Cloudflare Pages
  uses: cloudflare/wrangler-action@v3
  with:
    apiToken: ${{ secrets.CF_API_TOKEN }}
    accountId: ${{ secrets.CF_ACCOUNT_ID }}
    command: pages deploy dist --project-name=my-project --branch=${{ github.ref_name }}

Cloudflare Pages 的优势：

  • 自动处理分支预览部署
  • 内置 CDN，无需额外配置
  • 免费额度较高

总结

本文介绍的多环境自动化部署方案，核心要点：

  1. 动态 base 路径：通过环境变量控制 Vite 的 base 配置，实现分支隔离部署
  2. GitHub Actions 工作流：根据不同触发条件执行不同的部署流程
  3. Azure Blob + Cloudflare：静态资源存储 + CDN 加速的经典组合
  4. 缓存策略：HTML 不缓存，静态资源长期缓存
  5. 通知机制：部署完成后自动通知团队

这套方案已在多个生产项目中验证，可以直接复用到新项目中。根据实际需求，可以灵活调整触发条件、部署目标和通知方式。

【信息科学与工程学】【安全领域】第八十三篇 云安全解决方案02
weixin_49199313的博客
06-17 85
企业中“搞人”与“搞事情”常见问题的分析框架。我将选取4个典型场景，每个场景都从实际管理现象出发，逐步推导出数学模型、参数设定及关联知识。
sccache云存储终极配置指南：从本地到云端的高效编译缓存方案
gitblog_00033的博客
06-17 180
sccache是一款由Mozilla开发的革命性编译缓存工具，作为ccache的增强版本，它能够显著提升开发团队的构建效率。通过将编译结果存储在云端，sccache实现了跨团队、跨环境的缓存共享，让编译时间大幅缩短。本文将深入探讨sccache的云存储配置实战，涵盖AWS S3、Google Cloud Storage和Azure Blob Storage三大主流云服务，帮助你构建高效的分布式编译
技术博客人格化构建：从.NET实践看开发者内容生产方法论
diedangxiang4092的博客
06-14 522
技术博客本质上是开发者认知传播的载体，其核心在于将抽象技术还原为真实问题解决过程。理解‘技术传播的认知断层’与‘开发者决策链’是提升内容价值的前提——当读者面临SignalR选型、EF Core性能瓶颈或Blazor Session超时等典型场景时，他们需要的不是API文档复述，而是可验证的工程判断依据和可复用的调试路径。人格化并非风格修饰，而是通过身份真实性、成长可见性、失败透明度与价值一致性四维支撑，建立技术信任；而‘人→技术人→程序员’的三阶跃迁，则确保内容既降低新手认知负荷，又满足资深工程师对底层机
Sccache终极指南：如何将编译速度提升300%的完整教程
gitblog_01050的博客
06-14 355
Sccache是一个功能强大的跨平台编译器缓存工具，能够显著加速C/C++、Rust等项目的编译过程。作为Mozilla开发的ccache替代品，sccache不仅支持本地磁盘缓存，还能利用多种云存储服务实现分布式缓存，是现代开发工作流中不可或缺的效率工具。 ## 为什么选择Sccache而不是传统编译工具？ 在大型项目中，重复编译相同的代码会消耗大量时间。Sccache通过智能缓存机制解决了
终极免费开发者资源宝典：1600+开发者共建的免费云服务完全指南
gitblog_00797的博客
06-17 589
在当今的云原生时代，**免费开发者资源**、**免费云服务**和**开源工具生态**已成为每个开发者必须掌握的核心技能。free-for.dev项目汇集了1600多位开发者的智慧，整理出最全面的免费SaaS、PaaS和IaaS服务清单，专为系统管理员、DevOps工程师和基础设施开发者量身打造。无论你是初创公司的技术负责人，还是个人开发者寻找成本优化的解决方案，这份资源都将成为你技术栈中的秘密武器
Unity PICO4 学习记录8： WebRTC
m0_63485455的博客
06-22 761
这一篇和PICO本身没什么关系，只是记录一下开发过程我们要做一个“从超声设备采集影像数据，一对多地传给XR眼镜终端以及其他可能的设备”应用。发送端是Jetson，由同事负责；接收端XR眼镜端由我负责。同事说视频采集卡例程里给了两种通信协议：RSTP和WebRTC.一开始我尝试用HoloLens2，因为老师和医生们似乎更喜欢OST而不是VST；但是UWP ARM64 媒体栈对 RTSP 支持弱、MixedReality-WebRTC 停更，所以 HL2 不适合当主验证平台。
WhatsApp Cloud API 踩坑：webhook 验证成功，消息却收不到
weixin_38680881的博客
06-22 386
先查——返回空就是它，POST补上立刻通。（90% 的情况到这一步就解决了）别假设"测试号自动、生产号才要配"——订阅是 WABA 级关系，不会跨环境自动延续，也可能是别人替你配过却没记录。直接对生产 WABA 跑自查，缺了就POST补。用验的type和expires_at（生产要0看日志而非状态码判断验签——验签失败也返回 200。别被"支付方式"告警带偏——客服窗口内回复免费，不需要支付。号码"未注册"走 Cloud API/register（设好 PIN）。
TokUI开源解析：AI流式渲染，解锁对话富UI新形态
AIGS001的博客
06-23 238
TokUI开源解析：AI流式渲染，解锁对话富UI新形态在大模型应用快速普及的当下，绝大多数AI对话产品始终存在一个核心痛点：大模型具备数据分析、图表绘制、工具调用、智能推理等多元能力，最终输出却只能以纯文本、基础Markdown的形式展示，用户只能看到单调的文字内容，无法获得可视化、可交互的沉浸式体验。为解决这一行业难题，向量空间JBoltAI正式开源自研前端项目TokUI，为AI前端交互、Agent可视化领域提供了全新的轻量化解决方案。TokUI是向量空间JBoltAI重磅推出的。
DataX-Web 部署全流程实战指南（WSL2 + Docker 环境）
Irene1991的博客
06-23 336
本文详细介绍了在Windows11 WSL2环境中部署DataX-Web可视化数据同步平台的全过程。
前端AI工具实战
yanby921005的博客
06-24 246
实测案例： 我输入：“创建一个用户仪表盘，左侧导航菜单，右侧内容区分三部分：数据卡片、图表、任务列表。我（一名5年前端）在过去半年系统评测了30+款AI工具，淘汰了花哨但不实用的，留下了这10个真正能融入日常开发、提升效率的利器。每个工具我都附上了使用场景、优缺点、适合人群，以及官方优惠链接（部分有Affiliate，但我会客观评测）。AI解决的是效率问题，不是创造力问题。GitHub Copilot 生态成熟，VS Code深度集成 日常编码，团队协作 $10/月 ★★★★★。
2026多语言交易所系统搭建开发成品源码
kaifaii的博客
06-23 161
简体中文、繁体中文、英语、日语、韩语、法语、德语、意大利语、马来语、蒙古语、阿拉伯语、印地语、希腊语、西班牙语、英语、菲律宾语、印尼语、荷兰语、波兰语、葡萄牙语、罗马尼亚语、俄语、泰语、土耳其语、乌克兰语、越南语等。交易所源码，前后端全开源，源码可二开，前端uniapp，后端PHP。币币交易，法币交易，大宗交易、外汇、能源、加密货币。多语言交易所系统，秒合约/永续合约/交割合约。系统内置在线客服、钱包授权登录，链上钱包充值。源码完整开源，包搭建、完整源码交付。可根据个人需求增删功能。
HTML开发避坑指南：高频问题解析
m0_55877125的博客
06-26 282
HTML基础问题大多源于标签规范缺失、属性遗漏、布局特性理解不足。开发时遵循DOCTYPE声明、UTF-8编码、语义化标签、表单完整属性四大标准，可规避80%以上基础页面异常。日常开发建议统一基础HTML模板，复制复用减少重复出错。海量精选技术文档和实战案例持续更新，敬请关注【风骏时光少年】
Java表格类接口开发指南：从DTO到架构设计
vortex5的博客
06-22 424
本文介绍了Java表格类接口开发的核心知识点，重点讲解了DTO（数据传输对象）的设计原则与分层策略。文章从DTO的概念出发，阐述了其在企业级应用中的重要性，包括关注点分离、数据聚合、性能优化等优势。同时详细讲解了请求参数的接收与校验、Service层的职责分工、对象转换方案（特别推荐MapStruct）以及统一响应结构的设计规范。全文强调通过合理的分层设计和规范约束，可以构建出高性能、易维护的表格接口，为复杂业务系统奠定坚实基础。
基于 SuperSonic SPI 机制集成 DolphinScheduler CLI 的实践
暗影八度
06-23 202
SuperSonic 是腾讯音乐开源的下一代 AI+BI 平台，统一了 Chat BI（由 LLM 驱动）和 Headless BI（由语义层驱动）两种范式。核心特性：架构组件：GitHub: https://github.com/tencentmusic/supersonic (⭐ 4.9k)Apache DolphinScheduler 是 Apache 基金会的现代数据编排平台，专注于处理数据管道中的复杂任务依赖。核心特性：GitHub: https://github.com/apache/dolph
【Codex】配置SOE服务支撑口语测评与语音评估能力
Mr数据杨
06-25 110
SOE服务在教育管理系统中的设计与实现 摘要：本文分析了SOE(语音评测)服务在教育管理系统中的实现方案。通过拆解业务需求为模型字段、接口规则和页面交互，形成了完整的项目代码生成任务。后端基于AIServiceSetting模型，设计包括服务配置、音频资源管理和评测结果处理功能，涉及10+核心字段和16个接口动作。前端实现配置页面、服务管理和评测功能模块，确保与后端接口一致。系统通过权限控制和异常处理保障服务稳定性，满足教育场景下语音评测和转写需求。 关键点： 后端模型包含服务类型、激活状态、多语言描述、A
【题解】WebGoC 385.身高
能点个关注吗？
06-25 397
摘要：本题要求编写GoC程序，将n个群众演员按身高从低到高排序并去重，用长方形表示每个人的身高（宽20，高为身高值）。输入包含人数n和n个身高值，程序需先去除重复值，然后排序，最后绘制由矮到高的长方形队列。例如输入"5 180 160 160 141 172"，输出为三个不同高度的长方形（141,160,172）。核心算法包括去重、冒泡排序和图形绘制。
把 Vue2 项目“黑盒”嵌进 Vue3：qiankun 微前端实战笔记
interest_ing_的博客
06-24 234
本文介绍了如何通过qiankun微前端框架将Vue2老项目无缝嵌入Vue3新项目中，实现零代码改造的平滑迁移。文章对比了iframe、npm包和qiankun三种方案的优劣，详细说明了qiankun在样式隔离、按需加载和通信机制方面的优势。具体实施分为三步：1）为Vue2子应用添加public-path.js、改造main.js导出生命周期函数、配置UMD打包格式；2）在主应用中注册子应用并设置挂载点；3）通过props实现主应用与子应用的双向通信。该方法只需少量配置改动即可保留原有业务逻辑，30分钟内完成
Vue3+antd中获取日历(Calendar)中当前面板中的所有日期
最新发布
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
06-26 20
本文介绍了在Vue3+Ant Design Vue中使用Calendar组件实现日期红点标记功能的方法。核心思路是通过getPanelDates函数获取当前日历面板显示的所有日期（包括上月和下月的部分日期），然后批量调用后端接口检查哪些日期存在录像文件。关键实现包括：1) 使用dayjs计算当前月份首日及前后补齐的42个日期；2) 通过dateCellRender插槽在日期右上角添加红点样式；3) 在月份/年份切换时重新获取面板日期。代码展示了如何监听日历变化并格式化日期数据，通过isExistFile函数
后端复盘（2）：从功能接口到状态流转，后端复杂度是怎么出现的
weixin_43239068的博客
06-23 385
本文从一个 Balatro 风格实时游戏后端项目出发，复盘后端接口从“功能调用”演变为“状态流转”的过程。文章不重点讲具体游戏功能，而是抽象出一个更通用的后端设计问题：为什么一个接口最开始只是接收参数、执行计算、返回结果，但随着业务推进，会逐渐依赖当前状态、修改多个字段、影响后续判断，并最终推动系统进入下一阶段。本文结合游戏、电商下单、活动奖励、审批流程等场景，梳理后端复杂度出现的原因，以及状态流转型接口在设计时需要关注的处理顺序、返回结构和状态一致性。
高层次综合器（Vivado HLS）的设计流程
nskksms的博客
06-21 319
本教程介绍了使用Vivado HLS工具进行高层次综合（HLS）的完整流程。主要内容包括：首先通过图形界面创建FIR滤波器项目，执行C代码验证、RTL综合与验证、IP封装等步骤；然后演示了如何使用Tcl脚本自动化该流程；最后通过创建多个解决方案，展示了如何应用优化指令（如展开循环、数组分区等）来改进设计性能。实验比较了不同解决方案在延迟和资源利用率上的差异，最终实现了一个高吞吐量的FIR滤波器设计。教程详细介绍了GUI各功能区域的使用方法，并强调了设计分析和指令优化的重要性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

发现你走远了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值