如何通过VS Code或CLI将Flutter Web应用部署到Azure Blob存储静态站点？

针对你手动上传文件重复操作的问题，下面提供VS Code和Azure CLI两种自动化部署方案，均能直接将build/web目录下的文件上传到$web容器根目录，无需手动提取文件：

一、VS Code 可视化自动化部署 #

1. 安装VS Code的Azure Storage扩展，重启编辑器后登录你的Azure账号。
2. 在左侧Azure面板中找到目标存储账户，展开后定位到$web容器。
3. 右键点击$web容器，选择「Upload Folder...」，选中你的Flutter项目下的build/web目录。
4. 在上传设置窗口中，勾选Upload files recursively和Flatten folders（该选项会自动把web目录内的所有文件直接放到容器根路径，不保留原文件夹结构），确认后即可完成上传。
5. 进阶：配置VS Code任务实现一键构建+部署
   在项目的.vscode/tasks.json中添加以下任务，执行时会先构建Web包再自动上传：

   {
     "version": "2.0.0",
     "tasks": [
       {
         "label": "Build & Deploy Flutter Web to Azure",
         "type": "shell",
         "command": "flutter build web --release",
         "problemMatcher": [],
         "next": {
           "task": "azureStorage.uploadFolder",
           "args": {
             "folder": "${workspaceFolder}/build/web",
             "container": "$web",
             "account": "<你的存储账户名>",
             "flattenFolders": true,
             "recursive": true
           }
         }
       }
     ]
   }
   

二、Azure CLI 命令行自动化部署 #

1. 确保已安装Azure CLI并完成登录：

   az login
   

2. 直接执行以下命令，一次性完成构建和上传：

   # 构建生产环境Flutter Web包
   flutter build web --release
   # 将build/web下所有文件上传到$web容器根目录，覆盖已有文件
   az storage blob upload-batch --source ./build/web --destination '$web' --account-name <你的存储账户名> --overwrite
   

3. 进阶：编写脚本一键执行
   • Linux/macOS 脚本（保存为deploy.sh，赋予执行权限chmod +x deploy.sh）：

     #!/bin/bash
     echo "开始构建Flutter Web..."
     flutter build web --release
     echo "构建完成，开始上传到Azure..."
     az storage blob upload-batch --source ./build/web --destination '$web' --account-name <你的存储账户名> --overwrite
     echo "部署完成！"
     

   • Windows 脚本（保存为deploy.bat）：

     @echo off
     echo 开始构建Flutter Web...
     flutter build web --release
     echo 构建完成，开始上传到Azure...
     az storage blob upload-batch --source .\build\web --destination '$web' --account-name <你的存储账户名> --overwrite
     echo 部署完成！
     pause
     

注意事项 #

• 确认你的Azure存储账户已开启静态站点功能，且默认文档设置为index.html
• 如果存储账户开启了防火墙限制，需确保当前机器IP在允许列表内，或使用存储账户密钥认证（在上传命令后添加--account-key <你的存储账户密钥>）

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