如何在azure应用程序服务中部署flutter

Question

目前正在研究 flutter web gui 并处理 blob 存储和数据可视化。 Web GUI正在本地主机中运行，我想在azure应用程序服务中运行该应用程序是否可能。如果可以的话怎么办？

当我尝试创建它时，它要求网络应用程序或静态网络应用程序。

以下是节目

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 安装的功能核心工具（python）

运行命令并得到以下响应

npm install -g @azure/static-web-apps-cli

运行下一个命令

swa初始化

这些是我得到的回复

注意并且在 Visual Code Studio 中 azure cloud shell (bash) 正在运行

Answer 1

以下是使用 Azure 静态 Web 应用将 Flutter Web 应用程序部署到 Azure 应用服务的步骤：

确保 Flutter 已安装并配置。

启用网络支持:

您需要运行以下命令才能使用 Beta 通道并启用 Web 支持：

flutter channel beta  
flutter upgrade  
flutter config --enable-web

使用
```
flutter create
```
命令生成一个新的Flutter Web项目：

flutter create my_flutter_web_app

进入您的项目目录并使用
```
flutter build web
```
命令进行编译：

cd my_flutter_web_app
flutter build web

使用以下命令在 Chrome 浏览器中运行 Flutter Web 应用程序：

flutter run -d chrome

在 my_flutter_web_app 的根路径（或）中添加 staticwebapp.config.json：

{
  "navigationFallback": {
    "rewrite": "index.html"
  }
}

确保安装 Node.js、Azure Functions Core Tools 和 Azure Static Web Apps CLI，然后安装以下 NPM 包：

npm install -g azure-functions-core-tools

npm install -g @azure/static-web-apps-cli

使用
```
swa init
```
命令设置将应用程序部署到 Azure 静态 Web 应用程序的配置：

swa init

enter image description here

检查根路径中的
```
swa-cli.config.json
```
：

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "my-flutter-web-app": {
      "appLocation": ".",
      "outputLocation": "build\\web",
      "appBuildCommand": "flutter build web",
      "run": "flutter run -d edge --web-port 8080 ",
      "appDevserverUrl": "http://localhost:8080"
    }
  }
}

使用
```
swa build
```
命令构建您的 Flutter Web 应用程序，为部署做准备。

enter image description here

使用
```
swa deploy
```
命令通过 Azure 静态 Web 应用将应用程序部署到 Azure 应用服务。

enter image description here

安装以下软件包：

dart pub global activate flutter_cors
flutter pub add http

以下示例 Flutter Web GUI 代码使用 SAS URL 连接到 Azure Blob 存储并在 UI 中可视化数据：

lib/main.dart：


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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: alt(),
    );
  }
}

class alt extends StatefulWidget {
  const alt({Key? key}) : super(key: key);

  @override
  _altState createState() => _altState();
}

class _altState extends State<alt> {
  String? fetchedData;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fetch Blob Data'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                await fetchData();
              },
              child: const Text('Fetch Blob Data'),
            ),
            SizedBox(height: 20),
            fetchedData != null
                ? Expanded(
                    child: SingleChildScrollView(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text(
                          fetchedData!,
                          style: TextStyle(fontSize: 16),
                        ),
                      ),
                    ),
                  )
                : Container(),
          ],
        ),
      ),
    );
  }

  Future<void> fetchData() async {
    String sasUrl =
        'https://example.blob.core.windows.net/container/HelloWorld.txt?sp=r&st=2024-03-29T15:29:53Z&se=2024-03-29T23:29:53Z&sv=2022-11-02&sr=b&sig=SampleSignature
';

    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
        print('Received ${bytes.length} bytes of data.');

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

Azure 存储： enter image description here