如何在无Azure Pipeline/GitHub时调度Nuxt3静态生成并部署至Azure？

以下是两种无需Azure Pipeline或GitHub的无服务器实现方案，均能完成Nuxt3静态站点的定时生成与部署：

方案一：Azure Functions Timer Trigger + Azure Blob Storage #

利用定时触发的Azure函数完成构建与文件上传，全程无服务器托管：

步骤说明 #

1. 创建Timer Trigger函数

   • 在Azure门户创建Node.js环境的Timer Trigger函数，设置CRON表达式定义定时规则（例如每天凌晨2点：0 0 2 * * *）
   • 调整函数配置：将超时时间设为10分钟以上、内存分配至少1GB，满足Nuxt3构建资源需求

2. 准备Nuxt代码包

   • 将本地Nuxt3项目打包为zip文件，上传至Azure Blob Storage的私有容器
   • 生成该zip文件的SAS令牌，用于函数安全拉取代码

3. 编写函数逻辑
   函数需完成：代码拉取解压 → 依赖安装 → 静态生成 → 上传至Blob静态网站容器，示例代码如下：

   const { BlobServiceClient } = require('@azure/storage-blob');
   const fs = require('fs');
   const path = require('path');
   const { execSync } = require('child_process');
   const https = require('https');
   const unzipper = require('unzipper');
   
   module.exports = async function (context, myTimer) {
       const connStr = process.env.STORAGE_CONN_STR;
       const codeSasUrl = process.env.NUXT_CODE_SAS_URL;
       const staticContainer = 'static-site';
   
       // 1. 下载并解压Nuxt代码到临时目录
       const tempDir = path.join(context.executionContext.temporaryDirectory, 'nuxt');
       fs.mkdirSync(tempDir, { recursive: true });
       await new Promise((resolve, reject) => {
           https.get(codeSasUrl, (res) => {
               res.pipe(unzipper.Extract({ path: tempDir }))
                   .on('close', resolve)
                   .on('error', reject);
           });
       });
   
       // 2. 安装依赖并执行静态生成
       process.chdir(tempDir);
       execSync('npm install --production=false', { stdio: 'inherit' });
       execSync('npx nuxi generate', { stdio: 'inherit' });
   
       // 3. 上传静态文件到Blob存储
       const blobClient = BlobServiceClient.fromConnectionString(connStr);
       const containerClient = blobClient.getContainerClient(staticContainer);
       const publicDir = path.join(tempDir, '.output', 'public');
   
       const uploadDir = async (dir) => {
           const files = fs.readdirSync(dir, { withFileTypes: true });
           for (const file of files) {
               const fullPath = path.join(dir, file.name);
               if (file.isDirectory()) {
                   await uploadDir(fullPath);
               } else {
                   const blobPath = fullPath.replace(publicDir, '').replace(/\\/g, '/');
                   const blockBlob = containerClient.getBlockBlobClient(blobPath);
                   await blockBlob.uploadFile(fullPath, {
                       blobHTTPHeaders: { contentType: getMimeType(file.name) }
                   });
               }
           }
       };
       await uploadDir(publicDir);
   
       context.log('部署完成');
   };
   
   function getMimeType(filename) {
       const ext = path.extname(filename).toLowerCase();
       const mimeMap = {
           '.html': 'text/html', '.css': 'text/css', '.js': 'application/javascript',
           '.png': 'image/png', '.jpg': 'image/jpeg', '.svg': 'image/svg+xml'
       };
       return mimeMap[ext] || 'application/octet-stream';
   }
   

4. 配置环境变量
   在函数应用的配置中添加：存储账户连接字符串、Nuxt代码包的SAS URL，避免硬编码敏感信息

方案二：Azure Container Apps Jobs + Azure Static Web Apps #

用定时容器作业完成构建部署，适合需要预配置环境的场景：

步骤说明 #

1. 构建自定义Docker镜像
   预先配置Node.js、Nuxt3环境与部署脚本，示例Dockerfile：

   FROM node:18-alpine
   WORKDIR /app
   RUN npm install -g pnpm @azure/static-web-apps-cli
   COPY deploy.sh .
   RUN chmod +x deploy.sh
   CMD ["./deploy.sh"]
   

   deploy.sh脚本示例：

   #!/bin/sh
   # 拉取Nuxt代码
   wget $CODE_SAS_URL -O nuxt.zip && unzip nuxt.zip -d ./nuxt
   cd ./nuxt
   # 构建静态文件
   pnpm install && pnpm generate
   # 部署到Static Web Apps
   swa deploy .output/public --app-name $SWA_APP_NAME --resource-group $RESOURCE_GROUP \
       --tenant-id $TENANT_ID --client-id $CLIENT_ID --client-secret $CLIENT_SECRET
   

2. 推送镜像至Azure容器注册表
   将构建好的镜像上传至Azure Container Registry，确保容器作业可拉取

3. 创建定时容器作业
   在Azure门户创建Container Apps Job，设置：

   • 定时CRON表达式
   • 镜像来源（你的容器注册表地址）
   • 环境变量：代码包SAS URL、Static Web Apps凭据、Azure服务主体信息（需预先给服务主体分配Static Web Apps部署权限）

通用注意事项 #

• 敏感凭据（如SAS令牌、服务主体密钥）应存储在Azure Key Vault，通过托管身份访问，避免直接暴露
• 可配置Azure Monitor警报，在构建失败时触发邮件/Teams通知
• 可将node_modules缓存至Blob存储，每次构建时直接复制，缩短依赖安装时间

内容的提问来源于stack exchange，提问作者nathan1658