如何在服务器上部署 flutter web？

Question

我正在学习 Flutter web。现在我想在真实服务器中部署这段代码。 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 网络的新手。

Answer 1

[更新]

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

build/web

与资产文件夹一起生成的文件夹，您可以简单地将其部署在您的服务器上。

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

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

所以转到安装 dart SDK 的位置，在 bin 文件夹中你应该有一个 pub 批处理文件。您需要将 bin 文件夹的路径提供给环境变量，以便从 cmd 使用 pub。
现在打开cmd并点击下面的命令安装webdev

pub global activate webdev

// 在你的 intelliJ Idea 终端
现在转到项目的根文件夹并在发布模式下构建

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

我用同样的方式部署到GitHub页here's how in detail guide.

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

这是运行flutterweb app

Answer 2

如果您想通过网络使用自己的服务器 e.q 您的虚拟专用主机或其他网络主机：

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

上传(/build/web)目录到您的服务器，您可以按照 this link 并在 windows 服务器上配置 IIS。

Answer 3

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

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

构建 flutter web：flutter build web —release
Create instance on aws ec2 server：意思是分配一些内存给您在服务器上的网站。 Instance是AWS云中的虚拟服务器。
在 putty 的帮助下连接到您的服务器（实例）：
Install Vesta control panel 在您的服务器上。（您可以安装其他控制面板如果你不喜欢灶神星，也可以。
在服务器上上传您的内容（网站）。（借助于 FileZilla你可以轻松上传您在服务器上的网站内容）

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

Answer 4

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

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

那么你只需要：

flutter build web
firebase deploy

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

Answer 5

您可以使用 Nodejs 将您的 flutter web 应用程序部署在共享主机中，或者使用 [=36] VPS 服务器=]Python 关注这个中型博客 Post

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

app.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;

package.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 可以通过他的服务器提供它托管只是继续博客 Post here

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

node app.js

或者如果你不想要 nodejs 只需在你的 flutter web 应用程序中使用 python 来使用这个命令

作为一个简单的 http 服务器

nohup python -m SimpleHTTPServer 8000 &

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

Answer 6

Nota Bene - Using flutter 2.0 as of today, I am seeing a bug where the images are not uploaded. Performance is also not the best as of today. Bookmark this and I will update with workarounds.

为使用 VPS/Shared 任何类型的主机的人提供的一个解决方案：

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

例如

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

更新丢失图片问题

tldr; Two issues - In pubspec.yaml I forgot to uncomment the assets folder and when built for web, the images were placed one folder below the assets folder. Editing the pubspec.yaml and moving the images folder up one level (after building for the web) solved the issue.

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

Solution - The fix for this was to use the proper structure for assets which is to create top level folders for (images and google_fonts) in the flutter project root. Then the compiler builds the web project correctly. My code references image assets as images/name.png. Pubspec.yaml should reference the assets: as - images/ and - google_fonts/

如何在服务器上部署 flutter web？

How to deploy flutter web on server?

dart

flutter

flutter-web

更新丢失图片问题