如何在Azure App Service部署Flutter Web应用？部署类型选择指引

一、是否可行？ #

完全可行。Flutter Web编译后会生成静态HTML/CSS/JS资源，既可以部署到Azure Static Web Apps，也可以部署到Azure Web App（支持静态站点模式或容器部署）。

二、Web App vs Static Web App 选择指南 #

根据你的应用场景和需求判断：

• Azure Static Web Apps：
  • 适配纯静态前端应用（你的Flutter Web编译产物属于此类）
  • 自带免费CDN加速、SSL证书，部署流程更轻量化
  • 支持从GitHub/GitLab等代码仓库自动构建部署
  • 适合仅前端调用外部API（如你的Blob存储请求）、无需后端服务的场景，成本更低
• Azure Web App：
  • 适合需要搭配后端服务（如Node.js/.NET等）一起部署的场景
  • 支持自定义运行环境与容器部署
  • 若后续需要扩展后端功能、或需要更灵活的服务器配置，选择此方案更合适

你的应用目前是纯前端调用Blob存储，优先推荐Azure Static Web Apps。

三、部署步骤（基于你已有的环境） #

1. 先编译Flutter Web项目 #

在本地项目根目录执行命令，生成静态部署文件：

flutter build web

执行完成后，项目根目录会生成build/web文件夹，内含所有部署所需的静态资源。

2. 部署到Static Web Apps（本地CLI方式） #

你已安装Static Web Apps CLI，继续以下操作：

• 进入项目根目录，运行部署命令：

swa deploy ./build/web

• 按照CLI提示登录Azure账号，选择目标订阅、创建或选择已有的Static Web Apps实例，等待部署完成即可。

备选：部署到Web App的步骤 #

若选择Azure Web App：

1. 完成Flutter Web编译，得到build/web文件夹
2. 在Azure Portal创建Web App实例，选择静态站点模式（或选择Node.js运行时，静态资源可托管于此环境）
3. 部署方式二选一：
   • 通过Azure Portal的「高级工具>Kudu」，或FTP工具，将build/web内的所有文件上传到Web App的site/wwwroot目录
   • 使用Azure CLI命令部署：

     az webapp deploy --resource-group <你的资源组名> --name <Web App名称> --src-path ./build/web --type static
     

附：你的应用代码 #

import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

// ignore: camel_case_types
class alt extends StatelessWidget {
  const alt({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await main();
            },
            child: const Text('Fetch Blob Data'),
          ),
        ),
      ),
    );
  }

  Future<void> main() async {
    String sasUrl =
        'https://stroageMM.blob.core.windows.net/binfile/ledblink.bin?sp=r&st=2024-02-13T06:58:48Z&se=2024-02-13T14:58:48Z&sv=2022-11-02&sr=b&sig=aa2%2BdywACIb2jU4ErTGDtrWLpKaFJtJt60xdewlJd7o%3D';

    try {
      // Send HTTP GET request to the SAS URL
      final response = await http.get(Uri.parse(sasUrl));

      if (response.statusCode == 200) {
        // Parse response body as bytes
        Uint8List bytes = response.bodyBytes;

        // Handle the data as needed
        // For example, you can decode the bytes to a string or save them to a file
        if (kDebugMode) {
          print('Received ${bytes.length} bytes of data.');
        }

        // Example: Decode bytes to a string
        String data = String.fromCharCodes(bytes);
        if (kDebugMode) {
          print('Data: $data');
        }
      } else {
        if (kDebugMode) {
          print('Failed to fetch data: ${response.statusCode}');
        }
      }
    } catch (e) {
      if (kDebugMode) {
        print('Error fetching data: $e');
      }
    }
  }
}

环境更新说明 #

已安装Node.js V20.10.0、npm V10.2.3、Function Core Tools（Python版），执行npm install -g @azure/static-web-apps-cli和swa init命令后得到对应反馈，当前Visual Studio Code中Azure Cloud Shell（Bash）正在运行。

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