41

我正在学习 Flutter 网络。现在我想在真实服务器中部署这段代码。这里的颤振代码：在lib文件夹中

void main() => runApp(new MyApp());    
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

如何在服务器上部署此代码？我是 Flutter 网络的新手。

4

6 回答 6

44

[更新]

现在要为 web 创建一个生产版本，Flutter 支持flutter build web类似于其他平台（android 和 ios）的命令，你会看到

build/web

使用 assets 文件夹生成的文件夹，您可以简单地将其部署在您的服务器上。

[不再需要旧答案第 1 步和第 2 步]

您只需要使用webdev工具进行生产构建。要安装webdev，您需要一个 pub 工具，

  1. 所以去你SDK安装了 dart 的位置，在 bin 文件夹中你应该有一个 pub 批处理文件。您需要提供 bin 文件夹的环境变量路径才能从 cmd 使用 pub。

  2. 现在打开 cmd 并点击以下命令进行安装webdev

    pub global activate webdev

    // 在您的 IntelliJ Idea 终端中

  3. 现在转到项目的根文件夹并在发布模式下进行构建

    flutter build web

  4. /build/web您应该会在根目录中看到一个构建文件夹 ( )，只需复制该文件夹并将其托管在 Web 服务器上即可。

我使用相同的方式将其部署到 GitHub 页面，这是详细指南。

一些有用的链接：https ://dart.dev/tools/webdev#build

这是正在运行的Flutterweb 应用程序

于 2019-05-12T19:13:08.447 回答
8

您可以使用Nodejs将您的Flutter Web 应用程序部署在共享主机中，或者使用Python在VPS服务器中部署您的 Flutter Web 应用程序。

在此处输入图像描述

在您使用“flutter build web”构建您的 Flutter Web 应用程序并且您希望将其托管在共享托管计划中之后，将您的 nodejs 应用程序准备为您的 Flutter Web 应用程序的简单服务器，这里是示例代码

应用程序.js

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public-flutter')));


module.exports = app;

包.json

{
  "name": "flutter-web-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "morgan": "~1.9.1"
  }
}

创建一个文件夹并将其命名（“public-flutter”），然后将您的 Flutter Web 应用程序放入您刚刚创建的文件夹中，以便 nodejs 可以通过他的服务器提供它，如果您在共享主机中，只需继续此处的博客文章

如果您在 VPS 服务器中，那么如果您想为 nodejs 应用程序提供服务器，请运行此命令

node app.js

或者如果您不希望 nodejs 只需在您的 Flutter Web 应用程序中使用 python 来使用此命令将其用作简单的 http 服务器

nohup python -m SimpleHTTPServer 8000 &

只需确保在运行命令时位于 Web 应用程序文件夹中。即使您在 Linux 上关闭了 SSH 会话，“nohub”也会让命令继续运行。或者，您可以使用dhttpd包通过 Dart pub/webdev 工具为您的应用程序提供服务。

于 2020-04-24T12:41:50.943 回答
7

这是在亚马逊 Web 服务器上部署 Flutter Web 应用程序的简单方法。

以下是我遵循的简单过程。

  1. 构建颤振网络：flutter build web —release
  2. 在 aws ec2 服务器上创建实例：意味着在服务器上为您的网站分配一些内存。Instance 是 AWS 云中的虚拟服务器。
  3. 在putty的帮助下连接到您的服务器（实例）：
  4. 在您的服务器上安装 Vesta 控制面板。（如果你不喜欢vesta，你也可以安装其他控制面板）。
  5. 在服务器上上传您的内容（网站）。（在 FileZilla的帮助下，您可以轻松地将您的网站内容上传到服务器上）

这是简单的视频教程： https ://youtu.be/htuHNO9JeRU

于 2020-03-29T14:03:53.853 回答
6

如果您想通过 web 使用您自己的服务器 eq 您的虚拟私有主机或网络上的其他主机：

转到项目的根文件夹并在发布模式下进行构建flutter build web，然后

将目录上传 (/build/web)到您的服务器，您可以按照此链接在 windows 服务器上配置 IIS。

于 2020-02-23T10:29:58.760 回答
1

如果是 Firebase 项目，您可以使用Firebase Hosting。

它会要求您在系统上安装Firebase 工具，并且您必须在项目的根文件夹中对其进行初始化。

然后你只需要：

flutter build web
firebase deploy

并刷新浏览器（可能使用ctrl + F5或ctrl + shift + r）

于 2020-04-02T13:04:07.370 回答
1

Nota Bene - 从今天开始使用颤振 2.0，我看到了一个图像未上传的错误。性能也不是今天最好的。将此添加为书签，我将更新解决方法。

对于那些使用任何类型的 VPS/共享主机的人的一种解决方案：

  • 打开本地构建文件夹
  • 压缩 (zip) Web 文件夹
  • 上传 web.zip 文件（ftp 或文件管理器）
  • 在您的服务器上（例如在 cPanel 上，从文件管理器中选择提取）
  • 将网络文件夹重命名为您喜欢的任何内容
  • 请注意，如果您不使用网站的根目录，则必须将 index.html 中的文件夹从“/”重命名为“/web/”（以匹配上面的名称，请参见示例。）
  • 如果您使用的是网站根文件夹，请确保将 /web 内部的所有文件移动到 / 网站的根文件夹（而不是您的服务器）

例如。

<base href="/"> to  <base href="/web/">

更新丢失图像问题

tldr; 两个问题 - 在 pubspec.yaml 中，我忘记取消注释 assets 文件夹，并且在为 web 构建时，图像被放置在 assets 文件夹下方的一个文件夹中。编辑 pubspec.yaml 并将图像文件夹上移一级（在为 web 构建之后）解决了这个问题。

我的颤振项目文件夹在项目根目录中有一个 assets/images 文件夹。在没有在线看到图像后（在调试过程中可见），我发现运行flutter build web --release导致我的资产文件夹在build/web/assets/assets/images. 我的代码正确引用了assets/images/file.png. 在部署到网络时，我只是将图像文件夹上移了一级。所以我的网络服务器根目录现在有了assets/images/name.png，图像显示正常。

解决方案- 解决此问题的方法是使用正确的资产结构，即在颤振项目根目录中为（图像和 google_fonts）创建顶级文件夹。然后编译器正确构建 Web 项目。我的代码将图像资产引用为 images/name.png. Pubspec.yaml 应该引用资产： as - images/和- google_fonts/

于 2021-03-08T00:41:18.323 回答